The scope attribute on a <th> tag specifies how the header cell should be interpreted in the table. In other words, what does it convey?
A table header cells can be used as a header for row, column, colgroup, or rowgroup.
A scope attribute on <th> elements.
The header cells are defined as column headers.
| Name | Country |
|---|---|
| Denice Templeman | Italy |
| Paulo Cornell | USA |
| Maria Larsson | Sweden |
<style>
table.tb { width: 300px; border-collapse: collapse; }
.tb th { background-color: lightblue; }
.tb th, .tb td { border: solid 1px #777; padding: 5px; }
</style>
<table class="tb">
<tr>
<th scope="col">Name</th>
<th scope="col">Country</th>
</tr>
<tr>
<td>Denice Templeman</td>
<td>Italy</td>
</tr>
<tr>
<td>Paulo Cornell</td>
<td>USA</td>
</tr>
<tr>
<td>Maria Larsson</td>
<td>Sweden</td>
</tr>
</table>
The scope attributes specifies how a table header cell is used.
Table header cells can be used as a header for row, column, colgroup, or rowgroup.
This attribute has no visual effect. It is used by screen readers, JavaScript, etc.
<th scope="col | row | colgroup | rowgroup">
| Value | Description |
|---|---|
| col | Header applies to a column. |
| row | Header applies to a row. |
| colgroup | Header applies to a group of columns (colgroup). |
| rowgroup | Header applies to a group of rows (rowgroup). |
Here is when scope support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
Back to <th>
