HTML-table布局

table布局

布局：是一个页面的整体结构。

结构特点：从上往下，从左往右。一般每一行的高度是一致的。

<tablewidth="100%">
    <tr>
        <tdcolspan="3"style="height:150px;background-color:red"></td>
    </tr>
    <tr>
        <tdstyle="width:150px;height:300px;background-color:aqua"></td>
        <tdstyle="width:200px;background-color:blue"></td>
        <tdstyle="width:250px;background-color:orange"></td>
    </tr>
    <tr>
        <tdcolspan="3"style="height:150px;background-color:bisque"></td>
    </tr>
</table>

  页面的布局可以通过table来实现，一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置，位置是通过单元格的相对位置来体现的。同事借个rowspan和colspan两个属性来完成单元格的合并。

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

 

div

<div>标签定义一个分块（divisivon）

写法：

<divstyle="width:200px;height:100px;border:2px;background-color:chocolate"></div>

显示特点：在新的下一行进行显示。（块标签）

块级元素和内联元素的区别：

块级元素占满行。而内联元素会按照顺序从左至右依次排列

标签

块状元素:一般是其他元素的容器，可容纳内联元素和其他块状元素。
　　内联元素:内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。

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

div \ h1~h6 \ p \ hr \ table \ ul \ ol \ dl \ tr \ option \ caption \ dd \ dt \ form

内联标签：不会在新的下一行进行显示。

img \ input \ a \ td \ textarea \ span \ label \ select \ th \ button

1、块状元素可包含内联元素或某些块元素，但内联元素不可包含块元素，只能包含内联元素。
　　　　<div><h1></h1><p></p></div>    正确
　　　<a href="#"><span></span></a>    正确

2、块级元素不能放在<p>里面，放在里面它的结构就错误了
　　　　<p><ol><li></li></ol></p>   X
　　　　<p><div></div></p>　        X

3、有几个特殊块级元素只能包含内联元素，不能包含块级元素: h1~h6、p、dt

4、li标签可包含div标签
　　　<li><div></div></li>         正确

5、块级元素与块级元素并列、内联元素与内联元素并列
　　　　<div><h2></h2><p></p></div>　　          正确
　　　　<div><a href="#"></a><span></span></div>　　正确
　　　　<div><h2></h2><span></span></div>　　     X