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

Last update on February 14 2024 12:55:26 (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 columns 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 colspan="2">Product Cost</th><!-- Table header cell spanning 2 columns -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>Mobile</td><!-- Table data cell with content "Mobile" -->
<td>$180</td><!-- Table data cell with content "$180" -->
</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 -->
</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 costs.
The <table> tag creates a table structure.
The <th> tag creates a header cell spanning two columns using the colspan attribute.
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-colspan-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page