HTMLTableCellElement: scope 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

HTMLTableCellElement 接口的 scope 属性指示了 <th> 单元格的范围。

可以使用 scope 属性配置表头单元格,使其应用于指定的行或列,或者应用于当前行组中尚未定义范围的单元格(即,具有相同祖先 <thead><tbody><tfoot> 元素)。如果 scope 没有指定值,则表头不会以这种方式直接与单元格关联。scope 的允许值为:

注意: 此属性在浏览器中没有视觉效果。它添加了语义信息,以帮助屏幕阅读器等辅助技术以更连贯的方式呈现表格。

以下值之一

col

表头单元格应用于同一列中的后续单元格(如果同时使用了 colspan,则应用于多列),直到该列的末尾,或者该列中的另一个 <th> 建立新的范围。

colgroup

表头单元格应用于当前列组中尚未应用范围的所有单元格。仅当单元格位于列组中时,才允许使用此值。

row

表头单元格应用于同一行中的后续单元格(如果同时使用了 rowspan,则应用于多行),直到该行的末尾,或者同一行中的另一个 <th> 建立新的范围。

rowgroup

表头单元格应用于当前行组中尚未应用范围的所有单元格。仅当单元格位于行组中时,才允许使用此值。

空字符串(""

表头单元格没有预定义的范围;用户代理将根据上下文线索确定范围。

示例

此示例为 tbody 中第一行的所有单元格添加了一个标签。

HTML

html
<table>
  <caption>
    Tallest Dams
  </caption>
  <tr>
    <td></td>
    <th scope="col">Dam</th>
    <th scope="col">Country</th>
    <th scope="col">Height</th>
  </tr>
  <tr>
    <td>1.</td>
    <th scope="row">Jinping-I Dam</th>
    <td>China</td>
    <td>305 m</td>
  </tr>
  <tr>
    <td>2.</td>
    <th scope="row">Nurek Dam</th>
    <td>Tajikistan</td>
    <td>300 m</td>
  </tr>
  <tr>
    <td>3.</td>
    <th scope="row">Lianghekou Dam</th>
    <td>China</td>
    <td>295 m</td>
  </tr>
  <tr>
    <td>4.</td>
    <th scope="row">Xiowan Dam</th>
    <td>China</td>
    <td>292 m</td>
  </tr>
  <tr>
    <td>5.</td>
    <th scope="row">Balhetan Dam</th>
    <td>China</td>
    <td>289 m</td>
  </tr>
  <tr>
    <td>6.</td>
    <th scope="row">Xiluodu Dam</th>
    <td>China</td>
    <td>285.5 m</td>
  </tr>
  <tr>
    <td>7.</td>
    <th scope="row">Grande-Dixence Dam</th>
    <td>Switzerland</td>
    <td>285 m</td>
  </tr>
</table>

结果

规范

规范
HTML
# dom-th-scope

浏览器兼容性