HTML scope Attribute
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
The scope
attribute can be used on the following html elements.
Example
<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>
Browser Support
The following table will show you the current browser support for the HTML scope
Attribute.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 15 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 14 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 29th March 2024