深入理解table

下面是一个完整的表格结构实例：

    <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>

对于注重结构，表现，行为分离的开发模式的现在，很多在表格标签组的属性都不应该在标签中再出现，而应该使用相应的样式表属性取而代之。例如：

• 用于水平方向对齐的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代码验证，而实际上在浏 览器解释上也是按照这样的顺序显示的，也就是说你会先看到表格头和表格的脚注，然后是表格的内容。