The colspan attribute in HTML specifies how many columns a table cell (<td> for data or <th> for header) should span horizontally.
Definition and Usage
➔ The colspan attribute is added directly to the opening <td> or <th> tag within an HTML table.
➔ The colspan attribute takes a positive integer value, if the attribute is not specified, the default value is 1 (no spanning).
Syntax
//In HTML
<table border="1">
<tr>
<th colspan="2" id='sample'>Student Name</th>
<th>Status</th>
<th>Score</th>
</tr>
<tr>
<td>M John</td>
<td>Due</td>
<td>Pass</td>
<td>95</td>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>Pass</td>
<td>90</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>Pass</td>
<td>88</td>
</tr>
</table>
//In Javascript
let element=document.querySelector("#sample");
element.rowSpan = 2;
//or
element.setAttribute("rowspan", "2");
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan attribute Example</title>
<style>
table,
th,
td {
padding: 10px;
text-align: center;
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>HTML rowspan attribute Example</h3>
<p>The rowspan specifies the number of rows a table cell should span vertically.
</p>
<table border="1">
<tr>
<th colspan="2" id='sample'>Student Name</th>
<th>Status</th>
<th>Score</th>
</tr>
<tr>
<td>M John</td>
<td>Due</td>
<td>Pass</td>
<td>95</td>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>Pass</td>
<td>90</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>Pass</td>
<td>88</td>
</tr>
</table>
</body>
</html>
Click on the "Try it Now" button to see how it works.