Rowspan and colspan are powerful HTML table attributes that let you merge cells vertically and horizontally. They make complex table structures cleaner, more flexible, and easier to understand.
- rowspan controls how many rows a cell spans vertically.
- colspan defines how many columns a cell spans horizontally.
- Widely used in complex tables, about 80–90% rely on them for better layout and readability.
HTML Table with Colspan
HTML Table with colspan allows you to merge or combine adjacent table cells horizontally, creating a single, wider cell that spans across multiple columns.
Note: The colspan is defined as the <th> element.
Example: The element illustrates the HTML Table with colspan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Table with Colspan</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with Colspan
</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Brown</td>
<td>1</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>3</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
- colspan="2" merges two columns under the “Name” header.
- The rows then place first and last names under this merged heading.
HTML Table with Rowspan
The HTML attribute rowspan determines how many rows a specific cell in a table should cover. When a cell spans multiple rows, it occupies the space of those rows within the table.
Example: The element illustrates a HTML Table with rowspan.
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
color: green;
}
table {
width: 70%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML Table Rowspan</h2>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th rowspan="3">MVM School</th>
</tr>
<tr>
<td>Adam</td>
<td>10</td>
</tr>
<tr>
<td>Bob</td>
<td>11</td>
</tr>
</table>
</body>
</html>
Output:
- rowspan="3" merges the “MVM School” cell across three rows.
- Name and Class values fill the remaining cells beside the vertically merged column.
Note: Applied within a <td> or <th> element.
Table with Rowspan and Colspan Together
The table with rowspan and colspan together helps in creating the table more complex and structured. The table utilizes rowspan and colspan attributes to merge cells, creating a structured layout.
Example: The element illustrates the HTML Table with colspan and rowspan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table with Rowspan and Colspan</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
width: 100%;
border: 1px solid #100808;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Table with Rowspan and Colspan</h3>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Class</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Alice</td>
<td rowspan="2">Brown</td>
<td>11</td>
<td rowspan="2">MVM School</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td rowspan="2">John</td>
<td rowspan="2">Doe</td>
<td>3</td>
<td rowspan="2">LMS School</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td rowspan="2">Jane</td>
<td rowspan="2">Smith</td>
<td>5</td>
<td rowspan="2">SCPM School</td>
</tr>
<tr>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
- colspan="2" merges two columns under the “Name” header.
- rowspan="2" merges each student’s name and school cells vertically.
- Class values fill the adjacent cells for each row pair.
