35、表格的分组 <thead> <tbody> <tfoot>

  • <tbody> 定义表格的主体。
  • <tfoot> 定义表格的脚注。
  • <thead> 定义表格的表头。
    thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

thead、tfoot 以及 tbody 元素可以让你对表格中的行进行分组。当你创建某个表格时，你也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行……这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。
当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

简单来说，就是对整张表格的行归纳了三个类别，表头、主体、脚注。定义在表头和脚注内的行，每张表格头和尾都会出现。而主体包含的行会在表头和脚注之间，一般表格只需要修改主体内容即可。

例：

<table border="1">
    <thead>
      <tr><td>表头：这是一个test表</td></tr>
    </thead>

    <tfoot>
      <tr><td>脚注：2020年5月30日</td></tr>
    </tfoot>

    <tbody>
      <tr><td>主体行1：</td></tr>
      <tr><td>主体行2：</td></tr>
      <tr><td>主体行3：</td></tr>
    </tbody>
  </table>

顺序：表头->主体->脚注
图片说明

36、表格中的按列分组 <colgroup> <col>

  • <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
  • <col> 标签为表格中的一个或多个列定义属性值。
  • 属性 span 定义 <colgroup> 或 <col> 应当横跨的列数。

通过使用 colgroup 和 col 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

如果希望为一组表格列规定相同的属性值，请使用 colgroup 元素。

例：

<table border="1">

    <colgroup span="2" style="background:#cff"></colgroup>
    <col style="background:lightgray"><col>

    <thead>
      <tr>
        <td>表头：</td>
        <td>这是一个test表</td>
        <td>属性1</td>
        <td>属性2</td>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <td>脚注：</td>
        <td>2020年5月30日</td>
        <td>/</td>
        <td>/</td>
      </tr>
    </tfoot>

    <tbody>

      <tr>
        <td>主体行1：</td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
      </tr>
      <tr>
        <td>主体行2：</td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
      </tr>
      <tr>
        <td>主体行3：</td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>

图片说明
span="2"代表横跨两列，对两列样式一起改变，前两列背景变为蓝色。
col style="background:lightgray" 代码紧接在span后一行，表示表格中将单独改变后一列的样式，在这里也就是指第三列的样式。