Skip to content
Related Articles

Related Articles

Improve Article

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
Geek Week

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :