跳到主要内容

单元格合并与关联

colspan 与 rowspan 如何合并单元格？​

  • colspan: 单元格横向跨越的列数, 默认 1;
  • rowspan: 单元格纵向跨越的行数, 默认 1;
  • 代价: 合并后该行/该列被占用的位置不再写单元格;
<table>
  <tr>
    <th scope="col">Player</th>
    <th scope="col" id="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row" id="row">Mia Oolong</th>
    <td colspan="1" rowspan="1" headers="row col">9</td>
    <td>6,219</td>
  </tr>
</table>

scope 属性如何声明标题单元格的作用范围？​

取值含义
col与该列所有单元格相关
row与该行所有单元格相关
colgroup与所属列组覆盖的所有列相关
rowgroup与所属行组覆盖的所有行相关
  • 位置: 写在 th 上;
  • 用途: 让辅助技术知道某个标题管的是哪一片单元格;

headers 属性如何显式关联？​

  • 写法: td 的 headers 填一组 th 的 id 值, 空格分隔;
  • 场景: 表头合并或结构复杂时无法靠 scope 推断归属, 就显式列出;
  • 前置: 对应 th 必须写 id;
<tr>
  <th scope="row" id="row">Mia Oolong</th>
  <td headers="row col">9</td>
</tr>

表格可访问性依赖哪些属性？​

  • th 的 scope 与 id: 声明标题单元格的管辖范围与可被引用的标识;
  • td 的 headers: 声明数据单元格对应的标题单元格;
  • 效果: 读取某个数据格时能同时得到它所在行列的标题;