深⼊理解table
如何应⽤好HTML的表格，就需要对表格有详细清楚的了解。在HTML 4.01 ，XHTML 1.0，HTML 5.0草案中这组标签是⽤来描述HTML中的表格结构的，⽽且标签的解释也没有发⽣变化。
我们先看⼀下描述表格结构有那些标签。
标签描述DTD
<table>定义表格STF
<caption>定义表格标题。STF
<th>定义表格中的表头单元格。STF
<tr>定义表格中的⾏。STF
<td>定义表格中的单元。STF
<thead>定义表格中的表头内容。STF
<tbody>定义表格中的主体内容。STF
<tfoot>定义表格中的表注内容（脚注）。STF
<col>定义表格中⼀个或多个列的属性值。STF
tabletable<colgroup>定义表格中供格式化的列组。STF
下⾯是⼀个完整的表格结构实例：
<table summary="表格描述">
<caption>表格标题</caption>
<colgroup>
<col width="150" />
<col width="150" />
<col width="150" />
</colgroup>
<!-- Table Header-->
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<!-- Table Footer-->
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<!-- Table Body-->
<tbody>
<tr>
<td>DATA 1</td>
<td>DATA 2</td>
<td>DATA 3</td>
</tr>
<tr>
<td>DATA 4</td>
<td>DATA 5</td>
<td>DATA 6</td>
</tr>
</tbody>
</table>
对于注重结构，表现，⾏为分离的开发模式的现在，很多在表格标签组的属性都不应该在标签中再出现，⽽应该使⽤相应的样式表属性取⽽代之。例如：
⽤于⽔平⽅向对齐的align，应该使⽤CSS中的text-align属性
⽤于垂直⽅向对其的valign，应该使⽤CSS中的vertical-align属性
⽤于table的cellspacing属性，应该使⽤CSS中的border-spacing属性
⽤于table的cellpadding属性，应该使⽤CSS中的padding属性
但是值得注意的是，在xhtml中的属性建议中却并没有完全将border，cellpadding，cellspacing完全舍弃，因为各浏览器的⽀持有限，因此不能完全使⽤css获取相同的外观。
另外使⽤样式属性border-collapse:collapse/separate；可以设置表格的边框是否被合并成单⼀边框，但是在firefox和IE中仍有微⼩差异;
样式属性empty-cells:show|hide 可以控制当单元格<td>中内容为空时是否显⽰单元格，但是该属性是应⽤在<table>⽽不是<td><th>的样式中，⽽你仍然要注意IE6，IE7的状况，可能不会⽀持。
在表格中仍然有⼀些显⽽易见的有⽤的属性，你需要注意，⽐如⽤在<table>标签中的summary属性⽤于给表格添加摘要。
⽽<colgroup>和<col>也是有⽤的标签，<col>标签可以作为<colgroup>的⼦标签，会继承<colgroup>的属性，通过组合可以更好的格式化表格的列内容。但是要注意<colgroup>标签的属性，虽然被⼴泛的⽀持，但是，Firefox、Chrome 以及 Safari 仅⽀持 colgroup 元素的 span 和 width 属性。span属性是⽤来规定列组应该横跨的列数。
注意到表格结构标签中的<thead>、<tfoot>、<tbody>了吗？在书写上你会发现只有当你按照<thead>、<tfoot>、<tbody>顺序书写时，才会通过w3c的XHTML代码验证，⽽实际上在浏览器解释上也是按照这样的顺序显⽰的，也就是说你会先看到表格头和表格的脚注，然后是表格的内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。