table布局方式与div+css布局的区别细讲

表格布局（table）：

 <!--每个表格从一个 table 标签开始。-->
    <!--每个表格行从 tr 标签开始。-->
    <!--每个表格的数据从 td 标签开始。-->
    <!--每个表格的th标签代表每个表个的表头-->
    <!--cellpadding代表的是边框与其内容的间隙大小-->
    <!--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横向合并表格
必须指定要合并的列数目，是两列还是三列等等
rowspan纵向合并表格
同样必须指定要合并的列数目，是两列还是三列等等

        <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盒子布局比表格布局的优势：

TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。

div盒子布局的好处
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

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

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。