How to define whether a header cell is a header for a column, row, or group of columns or rows in HTML 5?
Last Updated :
30 Apr, 2021
In this article, we will learn how to specify whether a header cell is a header of a column, row, or group of columns or rows. The <th> tag is used to specify the heading for an <table> element, typically for the columns of the table. However, in specific cases, the header can be used to define the heading of a row or a group of columns or rows.
Approach:
The scope attribute of the <th> tag is used to specify the scope of the heading, i.e, it can be used to define whether the heading is for a column, row, or a group of columns and rows. The available keyword values are rows, cols, rowgroup, and colgroup.
Syntax:
<th scope="rows|cols|rowgroup|colgroup">
The below examples illustrate the scope attribute to specify the scope of the header cells.
Example:
HTML
<html>
<style>
table {
border: 2px solid;
padding: 4px;
margin: 4px;
width: 100%;
}
th {
background-color: orange;
}
</style>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to specify whether a header cell is
a header for a column, row, or group of
columns or rows in HTML5?
</h3>
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Maths</th>
<th scope="col">Physics</th>
</tr>
<tr>
<th scope="row">Saul</th>
<td>89</td>
<td>57</td>
</tr>
<tr>
<th scope="row">Jessy</th>
<td>78</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Whitman</th>
<td>98</td>
<td>69</td>
</tr>
</table>
</body>
</html>
|
Output: The abbreviations would not be displayed as normal web browsers do not display them.
scope attribute
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...