HTML colspan Attribute
The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as “merge cell” in a spreadsheet program like Excel.
Note: colspan=”0″ tells the browser to span the cell to the last column of the column group (colgroup).
Syntax:
<td colspan = "value">table content...</td>
Note: It can be used with <td> and <th> elements in an HTML Table.
Attribute Values
- number: It specifies how many columns a cell should cover. When set to colspan=”0″, it instructs the browser to expand the cell to the last column of the table section (thead, tbody, or tfoot).
Using with <td> tag:
The colpan attribute when used with <td> tag determines the number of columns a table cell should span.
Syntax:
<td colspan = "value">table content...</td>
// The value specifies the number of
columns that the cell fills and it must be integer
Example: In this article we will see the implementation of colspan attribute with td attribute with an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h6>The HTML colspan Attribute</h6>
<table>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
<!-- The last row -->
<tr>
<!-- This td will span two columns, that is a
single column will take up the space of 2 -->
<td colspan="2">Sum: $18</td>
</tr>
</table>
</center>
</body>
</html>
Output:
Output
Using with <th> tag:
The colspan attribute when used with <th> tag determines the number of header cells it should span.
Syntax:
<th colspan = "value">table content...</th>
// The value specifies the number of
columns that the cell fills and it must be integer
Example: The implementation of rowspan attribute with th attribute with an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h6>HTML colspan Attribute</h6>
<table>
<tr>
<th colspan="2">Expense</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
</table>
</center>
</body>
</html>
Output:
Output
Supported Browsers
- Google Chrome: 1
- Microsoft Edge: 12
- Firefox: 1
- Opera: 12.1
- Safari: 1
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Contact Us