Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 31 May, 2021
Geek Week

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.  

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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :