Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 31 May, 2021

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.  

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

Syntax:

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

 



Example:

HTML




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

Output:

Supported Browsers:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :