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

Last update on February 14 2024 12:55:29 (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 cell should span</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table border = "1"><!-- Table element with border attribute set to "1" -->
<tr><!-- Table row element -->
<th>Product Name</th><!-- Table header cell for column "Product Name" -->
<th>Rate</th><!-- Table header cell for column "Rate" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>Laptop</td><!-- Table data cell with content "Laptop" -->
<td>$250</td><!-- Table data cell with content "$250" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>Printer</td><!-- Table data cell with content "Printer" -->
<td>$150</td><!-- Table data cell with content "$150" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td colspan="2">Total: $400</td><!-- Table data cell spanning two columns with content "Total: $400" -->
</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 names and their rates, along with a total.
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 column headings "Product Name" and "Rate".
Subsequent rows contain data cells <td> with content representing different product names and rates.
The last row contains a data cell <td> with the attribute colspan="2", indicating that it should span two columns. This cell contains the total price.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page