表格分组与标题

caption 元素如何给表格加标题？

• 位置: table 内的第一个子元素;
• 作用: 说明整张表格的主题;

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
  </tr>
</table>

colgroup 与 col 元素如何描述列？

• colgroup: 把若干列作为一个整体;
• col: 嵌套在 colgroup 内, 代表具体列, 用于给列加样式;
• span: 该 col 覆盖的列数, 默认 1;

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
</table>

thead、tbody、tfoot 如何划分表格结构？

• thead: 表头区域;
• tbody: 主体内容区域;
• tfoot: 表尾区域, 常放合计行;

<table>
  <thead>
    <tr>
      <th>Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

表格可以嵌套吗？

• 允许: 在 td 内再放一张完整的 table;
• 场景: 主表某个格子需要一张明细表;
• 边界: 内层表独立计算行列与合并关系, 不继承外层结构;

<td id="nested">
  <table id="table2">
    <tr>
      <td>cell1</td>
      <td>cell2</td>
      <td>cell3</td>
    </tr>
  </table>
</td>