The HTML scope attribute is used within the table header element to determine whether the cell is the header of a column, a row, or a group of columns or rows.
Definition and Usage
➔ It is essentially a semantic tool for web accessibility, which helps with screen readers and other assistive technologies.
➔ It provides structured information to assistive technologies and has no visual impact or representation in the table.
➔ The scope attribute accepts the following values:
- col: Header cell relates to all data cells in the same column as the header cell.
- row: The header cell is related to all data cells in the same row as the header cell.
- colgroup: The header cell relates to a group of columns defined by a colgroup element.
- rowgroup: The header cell relates to a group of rows defined by a thead, tbody, or tfoot element.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML scope attribute example</title>
</head>
<body>
<h3>HTML scope attribute example</h3>
<p>It is a semantic tool, It has no visual effect on the table.</p>
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">ID</th>
<th scope="col">Branch</th>
</tr>
<tr>
<td>A001</td>
<td>25</td>
<td>ACS</td>
</tr>
</table>
</body>
</html>
Definition and Usage
➔ It is essentially a semantic tool for web accessibility, which helps with screen readers and other assistive technologies.
➔ It provides structured information to assistive technologies and has no visual impact or representation in the table.
➔ The scope attribute accepts the following values:
- col: Header cell relates to all data cells in the same column as the header cell.
- row: The header cell is related to all data cells in the same row as the header cell.
- colgroup: The header cell relates to a group of columns defined by a colgroup element.
- rowgroup: The header cell relates to a group of rows defined by a thead, tbody, or tfoot element.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML scope attribute example</title>
</head>
<body>
<h3>HTML scope attribute example</h3>
<p>It is a semantic tool, It has no visual effect on the table.</p>
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">ID</th>
<th scope="col">Branch</th>
</tr>
<tr>
<td>A001</td>
<td>25</td>
<td>ACS</td>
</tr>
</table>
</body>
</html>