Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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

Approach: This can be done using the headers attribute in the HTML document while using the <td> and <th> tags. 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>

Example: In this example, we will use the headers attribute.


<!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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 05 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials