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.


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

Following are the examples…


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>


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


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>


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.