Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like 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

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:

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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :