深入理解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 |
| <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--></table>
<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>
对于注重结构，表现，行为分离的开发模式的现在，很多在表格标签组的属性都不应该在标签中再出现，而应该使用相应的样式表属性取而代之。例如：
- 用于水平方向对齐的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代码验证，而实际上在浏 览器解释上也是按照这样的顺序显示的，也就是说你会先看到表格头和表格的脚注，然后是表格的内容。
