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
Share your thoughts in the comments
Please Login to comment...