Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 31 May, 2021
Improve Article
Save Article

This article aims to add one or more header cells to a cell related to HTML. 

Approach: This can be done by using the headers attribute in the HTML document while using the <td> and <th> tag. It contains the value i.e. header_id that specify the space to the separated list of id’s to one or more header cell that the table header cell is related to.  


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




<!DOCTYPE html>
    <!-- style to set border -->
        table {
            border: 3px solid black;
        td {
            border: 1px solid green;
            text-align: center;
        <h1 style="color:green;">
            How to set one or more header 
            cells a cell is related to HTML?
        <table style="width:500px">
                <th id="fruits" colspan="3">
                    List of fruits
                <td Headers="fruits">banana</td>
                <td Headers="fruits">grapes</td>
                <td Headers="fruits">mango</td>
                <th id="vegetables" colspan="3">
                    List of vegetables
                <td Headers="vegetables">potato</td>
                <td Headers="vegetables">Tomato</td>
                <td Headers="vegetables">onion</td>


Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!