3.5 HTML 表格（Tables）

HTML 表格 用于定义 表格化数据， 也就是语义上能分解成行（rows）和列（columns）列维度的内容。

HTML表格的用途可类比桌面应用中的Excel电子表格（spreedsheet）。

Syntax

构造一个HTML表格需要特定的语法结构：

• 定义表 <table> 容器
• 使用 <tr> 添加表格行数据
• 使用 <td> 添加表格数据单元或使用 <th> 添加表格头。

编写表格代码时，你需要按照从左到右然后从上到下的顺序来定义表格单元。

<table>
  <tr>
    <td>阿里</td>
    <td> - 连接人和商品</td>
  </tr>
  <tr>
    <td>百度</td>
    <td> - 连接人和信息</td>
  </tr>
  <tr>
    <td>腾讯</td>
    <td> - 连接人和人</td>
  </tr>
</table>

你可以看到，HTML表格的语法有点繁琐：只是显示几行数据，用了一堆标签。

thead, tfoot 和 tbody

网页有页头、页面主体和页脚，类似的， 表格 也可以包含表头、表身和表尾。

<thead>, <tfoot> 和 <tbody> 是一系列 行（rows）。它们是 <table> 的子元素以及<tr>的父元素。它们添加了额外的一层语义结构。

<thead> 和 <tfoot> 用于列数据的概括描述。

现在我们给上面的表格代码添加表头等元素：

<table>
  <thead>
    <tr>
      <th>公司</th>
      <th>商业特征</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>公司</th>
      <th>商业特征</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>阿里</td>
      <td> - 连接人和商品</td>
    </tr>
    <tr>
      <td>百度</td>
      <td> - 连接人和信息</td>
    </tr>
    <tr>
      <td>腾讯</td>
      <td> - 连接人和人</td>
    </tr>
  </tbody>
</table>

需要注意的是，我们把 <tfoot> 加在了 <tbody> 元素之前，但是它仍然正确的显示在表格最下方。

这是因为浏览器在可能需要处理大量表格行数据之前希望先把表格头尾绘制好。

列跨度（colspan）和 行跨度（rowspan）

rowspan 和 colspan 可以分别用来设置单元格可以横跨的行或列数。

请注意，这意味着你应该用 rowspan 属性来合并列单元格，因为它允许一个列（column）横跨多行（rows）。

colspan="0"代表特别的含义，表示横跨到列组（colgroup）的最后一列，但只在Firefox中支持。