表格：列、标题和页脚

所以你认为你知道如何制作表格。当然，你知道 table、tr、td 和 th 标签，你甚至还掌握了 rowspan 和 colspan 属性。你可以制作一张非常可爱的小胶合板咖啡桌，但你不想知道如何制作一张可以承受一只超大象重量的抛光实木玻璃顶餐桌吗？

你想？哦，太棒了。

列的反击

表格行往往会让表格列看起来很愚蠢。它们承担了所有的工作，因为表格是逐行构建的，这使得列感觉被完全排斥了。

不过，幸运的是，对于那些渴望的列来说，colgroup 和 col 标签已经来解救它们了。

这些标签允许你定义表格列并按照需要设置它们的样式，这在你想要某些列对齐或着色不同时尤其有用，因为如果没有它们，你将需要单独定位每个单元格。


<table>
    <colgroup>
        <col>
        <col class="alternative">
        <col>
    </colgroup>
    <tr>
        <td>This</td>
        <td>That</td>
        <td>The other</td>
    </tr>
    <tr>
        <td>Ladybird</td>
        <td>Locust</td>
        <td>Lunch</td>
    </tr>
</table>

在这个例子中，CSS 类“alternative”的样式将应用于第二列，即每一行的第二个单元格。

你也可以以类似于 rowspan 和 colspan 的方式使用 span 属性。与 colgroup 标签一起使用时，它将定义该列组所属的行数，例如 <colgroup span="2"></colgroup> 将组合前两列。在 col 标签中使用 span 通常更有用，例如，可以像这样应用于上面的示例：


<table>
    <colgroup>
        <col>
        <col span="2" class="alternative">
    </colgroup>
<!-- and so on -->

这将把“alternative”应用于最后两列。

标题插曲

一个简单易行的可访问性考虑是为表格添加一个 **caption**。caption 元素定义了标题，应该放在开始的 table 标签之后。


<table>
    <caption>Locust mating habits</caption>
<!-- etc. -->

标题和页脚

thead、tfoot 和 tbody 允许你将表格分为 **header**、**footer** 和 **body**，这在处理大型表格时会很有用。

虽然 thead 必须放在前面，但 tfoot 实际上可以放在 tbody 之前（如果你愿意，可以有多个 tbody），尽管浏览器会将 tfoot 元素渲染在表格的底部。


<table>
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <!-- etc. -->
    </tbody>
</table>