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

Last update on February 14 2024 12:55:25 (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 styling -->
table, th, td { /* CSS rule for table, table header, and table data cells */
border: 1px solid black; /* Apply border style to the table */
}
</style><!-- End of CSS styling -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table><!-- Table element -->
<tr><!-- Table row element -->
<th colspan="3">Product</th><!-- Table header cell spanning 3 columns -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<th headers="product">Productid</th><!-- Table header cell for "Productid" related to "Product" -->
<th headers="product">Productname</th><!-- Table header cell for "Productname" related to "Product" -->
<th headers="product">Productcost</th><!-- Table header cell for "Productcost" related to "Product" -->
</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 product information.
The <table> tag creates a table structure.
The <th> tag creates header cells.
The colspan attribute in the first header cell spans three columns.
Each header cell in the second row has the headers attribute, specifying that they are related to the "Product" header cell in the first row.
CSS styling is applied to the table, table header, and table data cells to add a border around them.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page