Introduction
The colspan attribute in HTML is utilized to specify the quantity of cells that a single cell spans within a table. By using the colspan attribute, we can specify a cell that covers the width of multiple columns and cells. This attribute functions similarly to merging cells in an Excel spreadsheet, consolidating them into a single cell. Additionally, it determines the precise number of columns encompassed by the cell.
Supported Elements
Within HTML, the colspan attribute is utilized to span across multiple columns within the table element. In HTML, the table can be visually represented using this attribute along with others like <td> and <th>.
<td> and <th> elements. We can represent the table's header with the help of <th> tag. Also, we can define the table's data with the help of <td> tag in HTML.
Syntax (with all <table>, <tr>, <td>, <td> & <td>, <th> elements):
The colspan attribute can be specified using the syntax shown below.
<ElementName colspan="value">...........</ElementName>
Within the syntax provided above, the element name corresponds to the name of the tag in HTML. The value specifies the quantity of columns that will be spanned. It is essential to note that the value must always be a positive integer. By default, the colspan attribute is set to 1.
By utilizing the syntax provided below, we can specify the colspan attribute using the <td> and <th> tags to indicate the quantity of columns within a solitary cell.
<td colspan="num"> or <th colspan="num">
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid blue;
}
th, td {
border: 1px solid blue;
padding: 10px;
}
.total-row {
font-weight: bold;
}
</style>
</head>
<body>
<h1>The td colspan attribute</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>800</td>
</tr>
<tr>
<td>March</td>
<td>1100</td>
</tr>
<tr class="total-row">
<td colspan="2">Total savings: 2900</td>
</tr>
</table>
</body>
</html>
Output:
Explanation:
Within the code snippet provided, a table has been generated to extend across both columns utilizing the <td> element.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid blue;
}
th, td {
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<h1>The th colspan attribute</h1>
<table>
<tr>
<th colspan="3">Monthly Savings</th>
</tr>
<tr>
<th>Month</th>
<th>Savings Amount</th>
<th>Year</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>2023</td>
</tr>
<tr>
<td>February</td>
<td>800</td>
<td>2023</td>
</tr>
<tr>
<td>March</td>
<td>1100</td>
<td>2023</td>
</tr>
</table>
</body>
</html>
Output:
Explanation:
Within the provided code snippet, we have integrated the colspan feature within the header cell to span across two distinct columns. Furthermore, we have instantiated a singular table multiple times.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<center>
<h1 style="color: deepskyblue;">Odisha Highlights</h1>
<table>
<tr>
<th colspan="2">Famous Places in Odisha</th>
</tr>
<tr>
<td>Puri</td>
<td>Konark Sun Temple</td>
</tr>
<tr>
<td colspan="2">Jagannath Temple, Puri</td>
</tr>
<tr>
<td>Bhubaneswar</td>
<td>Chilika Lake</td>
</tr>
<tr>
<td colspan="2">Nandankanan Zoological Park</td>
</tr>
<tr>
<td colspan="2">Lingaraja Temple, Bhubaneswar</td>
</tr>
<tr>
<td>Raghurajpur</td>
<td>Chandrabhaga Beach</td>
</tr>
<tr>
<td colspan="2">Simlipal National Park</td>
</tr>
<tr>
<td colspan="2">Dhauli Giri</td>
</tr>
<tr>
<td>Konark</td>
<td>Satpada</td>
</tr>
<tr>
<td colspan="2">Udayagiri and Khandagiri Caves</td>
</tr>
<tr>
<td>Pipili</td>
<td>Ratnagiri Buddhist Excavation</td>
</tr>
<tr>
<td>Bhitarkanika National Park</td>
<td>Paradip Port</td>
</tr>
<tr>
<td colspan="2">Sambalpur</td>
</tr>
</table>
</center>
</body>
</html>
Output:
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px solid blue;
padding: 5px;
text-align: left;
}
th {
background-color: blue;
color: white;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption><h1>Employee Details</h1></caption>
<thead>
<tr>
<th>Department</th>
<th>.NET</th>
<th>JAVA</th>
<th>Embedded</th>
<th>Mechanical</th>
<th>Indoor</th>
<th>Outdoor</th>
<th>Onside</th>
<th>Offside</th>
<th>Accounts</th>
<th>Assets</th>
<th>Canteen</th>
</tr>
</thead>
<tbody>
<tr>
<td>Head Person</td>
<td>Dinesh</td>
<td>Sonu</td>
<td>Monu</td>
<td>Manoj</td>
<td>Sona</td>
<td>Archita</td>
<td>Saswat</td>
<td>Damodar</td>
<td>Amisha</td>
<td>Sakshi</td>
<td>Dolly</td>
</tr>
<tr>
<td>Experience (in years)</td>
<td>17</td>
<td>12</td>
<td>8</td>
<td>7</td>
<td>12</td>
<td>11</td>
<td>5</td>
<td>9</td>
<td>7</td>
<td>12</td>
<td>5</td>
</tr>
<tr>
<td>No of Teams</td>
<td>5</td>
<td>5</td>
<td>7</td>
<td>7</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Assigned Projects/Task</td>
<td>18</td>
<td>15</td>
<td>7</td>
<td>11</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>2</td>
<td>4</td>
<td>10</td>
<td>6</td>
</tr>
<tr>
<td>No of Employees</td>
<td>182</td>
<td>150</td>
<td>75</td>
<td>82</td>
<td>34</td>
<td>25</td>
<td>2</td>
<td>5</td>
<td>4</td>
<td>10</td>
<td>6</td>
</tr>
<tr>
<td>Weekly Standup</td>
<td>Monday</td>
<td>Monday</td>
<td>Friday</td>
<td>Friday</td>
<td>Tuesday</td>
<td>Tuesday</td>
<td>Everyday</td>
<td>Everyday</td>
<td>Friday</td>
<td>Friday</td>
<td>Friday</td>
</tr>
<tr>
<td>Appraisal Month</td>
<td>March</td>
<td>July</td>
<td>March</td>
<td>March</td>
<td>June</td>
<td>September</td>
<td>March</td>
<td>March</td>
<td>September</td>
<td>June</td>
<td>September</td>
</tr>
</tbody>
</table>
</body>
</html>
Output: