How to define whether a header cell is a header for a column, row, or group of columns or rows in HTML 5?
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> <!-- Specifying the scope of the headings on the columns of the table --> <th scope="col">Name</th> <th scope="col">Maths</th> <th scope="col">Physics</th> </tr> <tr> <!-- Specifying the scope of the heading on the row of the table --> <th scope="row">Saul</th> <td>89</td> <td>57</td> </tr> <tr> <!-- Specifying the scope of the heading on the row of the table --> <th scope="row">Jessy</th> <td>78</td> <td>45</td> </tr> <tr> <!-- Specifying the scope of the heading on the row of the table --> <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
Please Login to comment...