table布局

1.table布局

布局：网页结构清晰
结构特点：规范一致，从上到下，从左到右每一行每一列高度工整

<table width="100%">
    <tr>
        <td style="height: 150px;background-color: green"colspan="3"></td>
    </tr>
    <tr>
        <td style="width: 150px;;height: 300px;background-color: chartreuse;"></td>
        <td style="width:700px;background-color: lawngreen "></td>
        <td style="width:150px;background-color: olivedrab"></td>
    </tr>
    <tr>
        <td style="height: 200px;background-color: greenyellow;"colspan="3"></td>
    </tr>
</table>

页面的布局可以使用table来实现，一个单元格就是一个布局区域。这个区域的大小可以用width和height来调整，位置是通过单元格的相对位置来体现的，同时可以结合colspan和rowspan来完成单元格的合并。
当布局比较复杂我们可以先自己划分几个大块再分小块 使用table的嵌套来解决，在大块里面嵌入一个小块进行划分
2.div
定义一个区域

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

它是一个块级标签他会占满一行
标签总结
1.块级标签：
占满一行在新的一行显示
div、h1-h6、p、hr、table、ul、ol、dl、tr、option、caption、dd、dl
2.内联标签
跟块级标签相反 不会在新的一行显示
img、input、a、td、th、textarea、span、label、select、button
块级标签占满行 内联标签比较省空间
<h1>利于搜索 用于各大网页的名称