scope

scope attribute

The scope attribute in HTML is applied to table headers (<th>) to define their relationship with data cells. This attribute improves accessibility by indicating if the header pertains to rows, columns, or groups of cells.

Syntax

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

Example

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>25</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

Definition and Usage

The scope attribute indicates whether a header cell is associated with a column, row, or a group of columns or rows.

While it doesn't have a visual effect in most browsers, it helps screen readers understand the structure of the table.

Applies To

The scope attribute can be applied to the following HTML elements:

• <th>

Values

• col: Indicates that the header cell corresponds to a column of data cells in the table.
• row: Signifies that the header cell pertains to a row of data cells in the table.
• colgroup: Specifies that the header cell relates to a group of columns in the table.
• rowgroup: Specifies that the header cell is associated with a group of rows in the table.

Conclusion

The scope attribute helps define the relationship between header cells and data cells in a table, improving accessibility. It provides context to screen readers, indicating whether the header pertains to a row, column, or group of rows or columns. This attribute is essential for creating more accessible tables.