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>Usage
It can be used with <td> and <th> elements in an HTML Table.
Attribute Values:
|
Attribute Values |
Description |
|---|---|
|
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>
<head>
<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>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML colspan Attribute</h2>
<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:
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 a example.
<!DOCTYPE html><html>
<head>
<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>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML colspan Attribute</h2>
<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:
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.