HTML 佈局主要有兩種：使用 div 元素的佈局和使用 span 元素的佈局，那麼他們的優缺點是什麼呢？下面我們將詳細的進行介紹。
使用 div 元素佈局
例子：
div 部分：
<body>
<div id="header">
<h1>deepin國際社區</h1>
</div>
</body>
css 部分：
<style>
#header {
background-color:black;
color:red;
text-align:center;
padding:25px;
}
</style>
使用 table 元素佈局
例子：
<body>
<table class="syl">
<tr>
<td>
deepin國際社區
</td>
</tr>
</table>
</body>
css 部分：
<style>
table.syl {
width:100%;
border:1px solid #d4d4d4;
}
table.syl td {
padding:10px;
width:20px;
}
</style>
table 元素佈局：
優點：
理解比較簡單。
不同的瀏覽器看到的效果一般相同。
缺點：
顯示樣式和數據綁定在一起。
佈局的時候靈活度不高。
一個頁面可能會有大量的 table 元素，代碼冗餘度高。
增加帶寬。
搜索引擎不喜歡這樣的佈局。
div 元素佈局：
優點：
符合 W3C 標準。
搜索引擎更加友好。
樣式的調整更加方便，內容和樣式的分離，使頁面和樣式的調整變得更加方便。
節省代寬，代碼冗餘度低。
表現和結構分離，在團隊開發中更容易分工合作而減少相互關聯性。