HTML colspan Attribute
Last Updated :
16 Jan, 2024
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:
|
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.
html
<!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>
<tr>
<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.
html
<!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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...