HTML5: How to specify the number of rows a header cell should span ?

Last update on February 14 2024 12:55:58 (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 the number of rows a header cell should span</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>Product</th><!-- Table header cell for "Product" -->
<th>Rate</th><!-- Table header cell for "Rate" -->
<th rowspan="4">Product for sale online.</th><!-- Table header cell spanning 4 rows for "Product for sale online." -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>Laptop</td><!-- Table data cell with content "Laptop" -->
<td>$200</td><!-- Table data cell with content "$200" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>Mobile</td><!-- Table data cell with content "Mobile" -->
<td>$100</td><!-- Table data cell with content "$100" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>Plotter(Hp)</td><!-- Table data cell with content "Plotter(Hp)" -->
<td>$120</td><!-- Table data cell with content "$120" -->
</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 rowspan attribute in the third header cell spans 4 rows.
Each <tr> tag represents a row in the table.
Each <td> tag represents a cell in the table containing data.
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-rowspan-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page