RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/basic/td-colspan-answer.php below:

Website Navigation

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

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)

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 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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4