View video tutorial
HTML Table Rowspan-Colspan
HTML
HTML cells can span over multiple rows and columns.
HTML rowspan, colspan
➔ rowspan allows a unit cell add more unit cell vertically to make bigger cell.
➔ colspan allows a unit cell add more unit cell Horizontally to make bigger cell.
➔ To make table symmetric number of unit cell horizontally and vertically must be same.
➔ colspan and rowspan both are used in <th> or <td>
Syntax
<!--CSS-->
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
thead {
background-color: black;
color: white;
}
</style>
<!--HTML-->
<table >
<thead>
<tr>
<th>Candidate</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tr>
<td rowspan="3" id='sample'>M John</td>
<td>Mathematics</td>
<td>95</td>
</tr>
<tr>
<td>Physics</td>
<td>90</td>
</tr>
<tr>
<td>Chemistry</td>
<td>88</td>
</tr>
</table>
HTML Table (rowspan)
| Candidate | Subject | Marks |
|---|---|---|
| John Due | Mathematics | 95 |
| Physics | 90 | |
| Chemistry | 88 | |
| Eva Jackson | Mathematics | 94 |
| Physics | 92 | |
| Chemistry | 86 |
HTML Table (colspan)
| Student Name | Mathematics | Physics | Chemistry | |
|---|---|---|---|---|
| John | Due | 95 | 90 | 88 |
| Eva | Jackson | 94 | 92 | 86 |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example (rowspan)
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: center;
padding: 8px;
}
thead {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Candidate Table</h2>
<table>
<thead>
<tr>
<th>Candidate</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tr>
<td rowspan="3" id='sample'>M John</td>
<td>Mathematics</td>
<td>95</td>
</tr>
<tr>
<td>Physics</td>
<td>90</td>
</tr>
<tr>
<td>Chemistry</td>
<td>88</td>
</tr>
<tr>
<td rowspan="3" id='sample'>Eva Jackson</td>
<td>Mathematics</td>
<td>94</td>
</tr>
<tr>
<td>Physics</td>
<td>92</td>
</tr>
<tr>
<td>Chemistry</td>
<td>86</td>
</tr>
</table>
</body>
</html>
Click on the "tryitnow" button to see how it works.
Example (colspan)
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
thead {
background-color: #dddddd;
color: black;
}
</style>
</head>
<body>
<h2>Candidate Table</h2>
<table>
<thead>
<tr>
<th colspan="2" id='sample'>Candidate Name</th>
<th>Mathematics</th>
<th>Physics</th>
<th>Chemistry</th>
</tr>
</thead>
<tr>
<td>John</td>
<td>Due</td>
<td>95</td>
<td>90</td>
<td>88</td>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>94</td>
<td>92</td>
<td>86</td>
</tr>
</table>
</body>
</html>
Click on the "tryitnow" button to see how it works.