HTML基础--（四）

table布局

table布局是一个页面的整体结构，可以吧整个页面看做为一个表格，分为一行一行。在行里面可以嵌套一个表格分块。

<tablewidth="100%">
    <tr>
        <td colspan="3"style="height:150px;width: 100%;background-color: red"></td>
    </tr>

    <tr>
        <td style="height:350px;width:150px;background-color: green"></td>
        <td style="width:700px;background-color: yellow"></td>
        <td style="width:150px;background-color: green"></td>
    </tr>

    <tr>
        <td colspan="3"style="height: 100px;width: 100%;background-color:blue"></td>
    </tr>
</table>

布局通过table来实现，一个单元格就是一个布局单位。

该区域的大小通过height和width属性来设置，位置是通过单元格的相对位置来体现的。同时可以结合rowspan和colspan两个属性来完成单元格的合并。

当布局比较复杂的时候，可以使用table的嵌套来实现，既在某个单元格中再嵌套入一个table进行划分。

<div>标签定义一个分块

<div style="border: dashed; width: 100px; height: 100px;"></div>

显示特点：在新的一行进行显示。称之为块标签

块级元素和内联元素的区别：块级元素占满行，而内联元素会按照顺序从左至右依次排列

标签总结：

块级标签：在新的一行进行显示。

div、h1~h6、p、hr、table、ul、ol、dl、tr、option、caption、dd、dl………

内联标签：不会新起一行显示。

img、input、a、td、textarea、span、label、select、th、button………