表格布局（table）：

 <!--每個表格從一個 table 標簽開始。-->
    <!--每個表格行從 tr 標簽開始。-->
    <!--每個表格的數(shù)據(jù)從 td 標簽開始。-->
    <!--每個表格的th標簽代表每個表個的表頭-->
    <!--cellpadding代表的是邊框與其內(nèi)容的間隙大小-->
    <!--cellspacing 是邊框與邊框之間的間隙大小-->
    <table style="text-align: center" width="300px" border="1px">
        <tr><th>這是表格的表頭部分</th><th>這是表格的表頭部分</th><th>這是表格的表頭部分</th></tr>
        <tr><td>九宮格</td><td>九宮格</td><td>九宮格</td></tr>
        <tr><td>九宮格</td><td>九宮格</td><td>九宮格</td></tr>
        <tr><td>九宮格</td><td>九宮格</td><td>九宮格</td></tr>
        <tr><td>九宮格</td><td>九宮格</td><td>九宮格</td></tr>
        <tr><td>九宮格</td><td>九宮格</td><td>九宮格</td></tr>
        <tr><td>九宮格</td><td>九宮格</td><td>九宮格</td></tr>
        <tr><td>九宮格</td><td>九宮格</td><td>九宮格</td></tr>
    </table>

table表格拆分合并（colspan、rowspan）

colspan橫向合并表格
必須指定要合并的列數(shù)目，是兩列還是三列等等
rowspan縱向合并表格
同樣必須指定要合并的列數(shù)目，是兩列還是三列等等

        <table border="1" cellspacing="0" width="50%" height="150">
            <caption>合并單元格</caption>
            <tr><th>班級</t> <th colspan="2">姓名和年齡</th> <th>電話</th> </tr>
            <tr><td rowspan="2">601班</td> <td>Jack</td> <td>24</td> <td>1351234567</td>  </tr>
            <tr> <td>Tom</td> <td>22</td> <td>1351234567</td>  </tr> 
            <tr><td  rowspan="3">602班</td> <td>Rose</td> <td>22</td> <td>1351234567</td>  </tr>
            <tr> <td>張三</td> <td>25</td> <td>1351234567</td>  </tr>
            <tr> <td>李四</td> <td>25</td> <td>1351234567</td>  </tr>
        </table>

合并表格

tip:表格布局學習的時候可是簡單了解一下他的基本用法 ，不用深入研究。

div盒子布局比表格布局的優(yōu)勢：

TABLE布局是WEB早期CSS不存在的時候興起的，是對TABLE標簽的不正規(guī)使用，Table標簽就是表格，是用來顯示數(shù)據(jù)的，而不是用來布局網(wǎng)頁的，雖然它有時候布局網(wǎng)頁很簡單?，F(xiàn)在絕大多數(shù)的網(wǎng)站都是用DIV+CSS布局。這兩種布局各有各的優(yōu)點。

div盒子布局的好處
1.符合W3C標準，代碼結構清晰明了，結構、樣式和行為分離，帶來足夠好的可維護性。

2.布局精準，網(wǎng)站版面布局修改簡單。

3.加快了頁面的加載速度（最重要的）（在IE中要將整個table加載完了才顯示內(nèi)容）。

4.節(jié)約站點所占的空間和站點的流量。

5.用只包含結構化內(nèi)容的HTML代替嵌套的標簽，提高另外搜索引擎對網(wǎng)頁的搜索效率。

tbale布局好處：
1.容易上手。

2.可以形成復雜的變化，簡單快速。

3.表現(xiàn)上更加“嚴謹”，在不同瀏覽器中都能得到很好的兼容。