HTML <th> scope 属性

在 HTML 表格中，<th> 元素用于定义表格的表头单元格。<th> 元素通常用于表头行或列，以标识表格中的标题信息。在 <th> 元素中，我们可以使用 scope 属性来指定该表头单元格的作用范围。

作用

scope 属性用于指定 <th> 元素的作用范围，以帮助屏幕阅读器等辅助技术更好地理解表格结构。scope 属性的取值可以是以下几种：

• row：表示该表头单元格用于标识一行的标题。
• col：表示该表头单元格用于标识一列的标题。
• rowgroup：表示该表头单元格用于标识一组行的标题。
• colgroup：表示该表头单元格用于标识一组列的标题。

示例

下面是一个简单的示例，演示了如何在表格中使用 <th> 元素和 scope 属性：

// www.javascriptcn.com code example
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">Gender</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>Female</td>
  </tr>
</table>

在上面的示例中，我们使用了 <th> 元素来定义表头单元格，并为每个表头单元格指定了 scope="col"，表示这些表头单元格用于标识列的标题。

注意事项

• 尽可能使用 <th> 元素来定义表头单元格，而不是使用 <td> 元素。
• 使用 scope 属性可以帮助屏幕阅读器等辅助技术更好地解释表格结构。
• 根据表格的实际情况，选择合适的 scope 属性取值。

通过合理使用 <th> 元素和 scope 属性，我们可以提高表格在网页上的可访问性，使得用户能更轻松地理解表格中的内容和结构。希望本文能帮助你更好地理解和应用 HTML <th> 元素的 scope 属性。