html布局之table表格布局

1.1table布局

1、布局方式

布局方式一：使用table元素及相关元素进行布局。

布局方式二：使用与表格相关的display属性值来模拟表格进行布局。

2、两种布局方式的区别

table元素在HTML中是一个包含语义的标签，它用于描述数据。使用与表格相关的display属性值只是声明了某些元素在浏览器中的样式而不包含语义。

注意：当需要制表展示数据时，不要使用与表格相关的display属性值定义的表格。

3、匿名表格元素——CSStable布局的特性：缺少的表格元素会被浏览器以匿名的方式创建

CSS2.1规范：CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

意思是如果为某一元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，则浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。

1.2与表格相关的display属性值

1、概述

与表格相关的display属性值使其设置的元素像表格元素那样渲染。

2、详细介绍

display:table;使该元素按table样式渲染。

display:table-row;使该元素按tr样式渲染。

display:table-cell;使该元素按td样式渲染。

display:table-row-group;使该元素按tbody样式渲染。

display:table-header-group;使该元素按thead样式渲染。

display:table-footer-group;使该元素按tfoot样式渲染。

display:table-caption;使该元素按caption样式渲染。

display:table-column;使该元素按col样式渲染。

display:table-column-group;使该元素按colgroup样式渲染。

1.3实例详解——三栏栅格布局

1、使用table及相关元素布局

实例：

<table class="table-one">
    <tr>
        <td>CELL A</td>
        <td>CELL B</td>
        <td>CELL C</td>
    </tr>
</table>
或
<table class="table-two">
    <tr>
        <th>CELL A</th>
        <th>CELL B</th>
        <th>CELL C</th>
    </tr>
</table>

.table-one,.table-two{
    border-spacing: 0;
}
.table-one td,.table-two th{
    width: 100px;
    height: 36px;
    border: 1px solid blue;
    text-align: center;
}

2、使用与表格相关的display属性值布局

实例：

.container { 
    display: table; 
} 
.row { 
    display: table-row; 
} 
.cell { 
    display: table-cell; 
    width: 100px; 
    height: 36px; 
    border: 1px solid blue; 
    line-height:36px;
    text-align:center;
}

<div class="container"> 
    <div class="row"> 
        <div class="cell">CELL A</div> 
        <div class="cell">CELL B</div> 
        <div class="cell">CELL C</div> 
    </div> 
</div>

以上HTML文档明确地为三个单元格定义了包含它的表格和表格行，使用到了所有创建的CSS类名。然而，可以减少这些标签，移除一行div元素试试：

<div class="row"> 
    <div class="cell">CELL A</div> 
    <div class="cell">CELL B</div> 
    <div class="cell">CELL C</div> 
</div>

即使上面的代码遗漏了声明表格的那一行，浏览器仍将创建一个匿名的表格行。还可以移除更多的代码：

<div class="cell">CELL A</div> 
<div class="cell">CELL B</div> 
<div class="cell">CELL C</div>

以上代码遗漏了声明表格和表格行的代码，浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素，最终的效果仍然是一样的。

3、总结

创建匿名表格元素的规则：

这些匿名的盒对象不是变出来的，也不会自动往HTML源码中添加新的标签。

如果布局中调用了匿名元素，浏览器将会根据需要创建一个匿名的盒对象并将它的CSSdisplay属性设置为table、table-row或table-cell中的一个。如果某个元素已经被设置为“display:table-cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display:table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display:table-cell;”的元素而结束这一行。