HTML - header Attribute

The HTML header attribute is used to specify a table cell that contains the header information for the current data cell. In simple terms, it specifies a space-separated list of identifiers for table header cells.

This attribute contains a list of space-separated strings, each corresponding to the <th> element's id attribute that applies to this element. It also specifies one or more header cells to which the table cell belongs.

Syntax

Following is the syntax for HTML headers −

<tag headers = "header_id"></tag>

Example

In the following example, we are using the HTML 'header' attribute within the <th> tag to specify the table header belongs to the table header of the same table.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'headers' attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <!--HTML 'headers' attribute-->
   <p>Example of the HTML 'headers' attribute</p>
   <table>
      <tr>
      <th id='name' colspan="2">Full Name</th>
      </tr>
      <tr>
      <th headers="name">First Name</th>
      <th headers="name">Last Name</th>
      </tr>
   </table>
</body>
</html>

On running the above code, the output window will pop up displaying the table with a header cells on the webpage.

Example

Considering another scenario, where we are going to use the header attribute with td element

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'headers' attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <!--HTML 'headers' attribute-->
   <p>Example of the HTML 'headers' attribute</p>
   <table>
      <tr>
      <th id="name">Name</th>
      <th id="email">Email</th>
      <th id='mobile'>Mobile</th>
      <th id='address'>Address</th>
      </tr>
      <tr>
      <td headers="name">Aman</td>
      <td headers="email">aman123@gmail.com</td>
      <td headers="mobile">9012345567</td>
      <td headers="address">Ranchi Jharkhand</td>
      </tr>
   </table>
</body>
</html>

When we run the above code, it will generate an output consisting of the table along with header and data displayed on the webpage.

html_attributes_reference.htm