How to define one or more header cells a cell is related to in HTML ?
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
Please Login to comment...