Codestin Search App

HTML scope Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The scope attribute is a vital feature in HTML used to specify the scope of header cells in a table. It plays a crucial role in enhancing table accessibility, particularly for screen readers, by providing context about how each header cell relates to other cells in the table. The attribute can be applied to th (table header) elements, and its value indicates whether the header is for a row, column, or a group of rows or columns.

The scope attribute enhances table accessibility by providing screen readers with the necessary context to interpret the table structure correctly. It helps users understand the relationship between headers and data cells, making tables more navigable and understandable, especially for visually impaired users. Proper use of the scope attribute contributes to creating web content that's more inclusive and accessible to a wider range of users.

Syntax

<th scope="col | row | colgroup | rowgroup">

Values

colSpecifies that the header cell applies to a column of data cells in the table.
rowIndicates that the header cell applies to a row of data cells in the table.
colgroupDenotes that the header cell applies to a group of columns in the table.
rowgroupDenotes that the header cell applies to a group of rows in the table.

Applies To

<th>

Example

HTML

<table border="1">

  <tr>

    <th scope="col">Name</th>

    <th scope="col">Age</th>

    <th scope="col">City</th>

  </tr>

  <tr>

    <td>John Doe</td>

    <td>30</td>

    <td>New York</td>

  </tr>

  <tr>

    <td>Jane Doe</td>

    <td>25</td>

    <td>Los Angeles</td>

  </tr>

</table>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML scope attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.