HTML5: How to specify one or more header cells a cell is related to?

Last update on February 14 2024 12:56:01 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify one or more header cells a cell is related to</title><!-- Title of the HTML page -->
<style><!-- Start of CSS style block -->
table, th, td { /*Style rule to set border for table, th, and td elements */
border: 1px solid black; /* Border property with 1px solid black */
}
</style><!-- End of CSS style block -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table style="width:100%"><!-- Table element with inline style to set width to 100% -->
<tr><!-- Table row element -->
<th id="uid">User Id</th><!-- Table header cell for column "User Id" with id attribute "uid" -->
<th id="name">User Name</th><!-- Table header cell for column "User Name" with id attribute "name" -->
<th id="address">Address</th><!-- Table header cell for column "Address" with id attribute "address" -->
<th id="phone">Phone No</th><!-- Table header cell for column "Phone No" with id attribute "phone" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td headers="uid">U001</td><!-- Table data cell with content "U001" related to header cell with id "uid" -->
<td headers="name">Sudha Chandan</td><!-- Table data cell with content "Sudha Chandan" related to header cell with id "name" -->
<td headers="address">99,J.C.Bose Road,kal-125042</td><!-- Table data cell with content "99,J.C.Bose Road,kal-125042" related to header cell with id "address" -->
<td headers="phone">5612445470</td><!-- Table data cell with content "5612445470" related to header cell with id "phone" -->
</tr><!-- End of table row -->
</table><!-- End of table -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a table displaying user information.
The <table> tag creates a table structure.
Each row of the table is defined by the <tr> (table row) tag.
Within each row, cells are defined using the <th> (table header) tag for header cells and <td> (table data) tag for data cells.
The first row contains table header cells <th> for columns "User Id", "User Name", "Address", and "Phone No". Each header cell has a unique id attribute.
Subsequent rows contain data cells <td> with content representing user information. The headers attribute specifies which header cell(s) each data cell is related to using the corresponding id attribute(s). This helps in associating data cells with their appropriate header cells for accessibility purposes.

Live Demo:

See the Pen td-headers-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page