HTML colspan Attribute
The HTML colspan attribute specifies how many columns a table cell should span. The value must be a positive integer. This attribute allows a single table cell to span the width of more than one column or cell. It has the same functionality as “merge cell” in Excel.
You can use the colspan attribute on the <td> and <th> elements.
When the colspan attribute is used on the <td> tag, it determines the number of standard cells it should span. When used on the <th> tag, the colspan attribute specifies the number of header cells it should span.
Syntax
Syntax of HTML colspan Attribute
<tag colspan="value"></tag>Example of the HTML colspan attribute used on the <td> element:
Example of the HTML colspan attribute used on the <td> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$150</td>
</tr>
<tr>
<td colspan="2">Total: $250</td>
</tr>
</table>
</body>
</html>Example of the HTML colspan attribute used on the <th> element:
Example of the HTML colspan attribute used on the <th> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
<tr>
<td>February</td>
<td>23</td>
</tr>
</table>
</body>
</html>Practice
What is the main purpose of the HTML colspan attribute?