HTML表格

本笔记记于2021年，摘自MDN HTML板块

1.什么是表格

表格是由行和列组成的结构化数据集(表格数据)，它能够使简捷迅速地查找某个表示不同类型数据之间的某种关系的值
HTML 表格 应该用于表格数据 ，这正是 HTML 表格设计出来的用途

2.定义整列数据的样式信息：<col> 和 <colgroup>

让一列中的每个数据的样式都一样

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

效果图

3.高级特性

• <caption> 为表格增加一个标题，标题就放在 <table> 标签的下面
• <thead> 需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的
  使用了 <col>/<colgroup>元素，那么 <thead>元素就需要放在它们的下面
• <tfoot> 需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面(浏览器仍将它呈现在表格的底部)
• <tbody> 需要嵌套在 table 元素中，放置在 <thead>的下面或者是 <tfoot> 的下面，这取决于如何设计结构
  (<tfoot>放在<thead>下面也可以生效)

4. scope属性，可以添加在<th> 元素中，用来帮助屏幕阅读设备更好地理解那些标题单元格，这个标题单元格到底是列标题呢，还是行标题

scope 还有两个可选的值 ： colgroup 和 rowgroup，用于位于多个列或行的顶部的标题