w3resource

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

Go to Exercise page

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.