How to add one or more header cells a cell is related to in HTML?

The headers attribute in HTML text along with the td and th tags allows us to add one or more header cells. It holds the value header id, which specifies a list of ids for one or more header cells that the table header cell is associated to, separated by spaces.

Syntax

 
<td headers="header_id"> Content..</td>

Following are the examples…

Example

In the following example we are using headers to add required headercells in our table.

<!DOCTYPE html>
<html>
   <style>
      table {
         border: 3px solid black;
      }

      td {
         border: 1px solid green;
         text-align: center;
      }
   </style>
<body>
   <center>
      <table style="width:500px">
         <tr>
            <th id="CARS" colspan="3">
               LIST OF CARS
            </th>
         </tr>
         <tr>
            <td Headers="CARS">BENTLEY</td>
            <td Headers="CARS">AUDI RS7</td>
            <td Headers="CARS">DUCATI</td>
         </tr>
         <tr>
            <th id="BIKES" colspan="3">
               LIST OF BIKES
            </th>
         </tr>
         <tr>
            <td Headers="BIKES">KAWASAKI</td>
            <td Headers="BIKES">HAYABUSA</td>
            <td Headers="BIKES">DODGE TOMAHAWK</td>
      </table>
   </center>
</body>
</html>

Output

On executing the above script, the table was created with different header cells in our web page.

Example

Another example using the headers attribute is given below −

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 2px solid blue;
      }
   </style>
</head>
<body>
   <table style = "width:100%">
      <tr>
         <th id = "name">Subject ID</th>
         <th id = "email">Subject Name</th>
      </tr>
      <tr>
         <td headers = "name">001</td>
         <td headers = "email">Mathematics</td>
      </tr>
   </table>
</body>
</html>

Output

On executing the above script, the output is obtained in the form of a table with two columns subject ID and subject name with header consisting the name and email address of students.

Updated on: 05-Sep-2022

228 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements