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>
HTML Table header
| Company | Contact | Country |
|---|---|---|
| Magazzini Alimentari Moctezuma | Yoshi Chang | Germany |
| Laughing Bacchus Futterkiste | Giovanni Anders | Mexico |
| Ernst Trading | Bennett Roland | Austria |
| Island Handel | Mendel Helen | UK |
| Centro comercial Riuniti | Maria Rovelli | Italy |
| Alfreds Winecellars | Francisco Tannamuri | Canada |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Magazzini Alimentari Moctezuma</td>
<td>Yoshi Chang</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Futterkiste</td>
<td>Giovanni Anders</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Trading</td>
<td>Bennett Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Handel</td>
<td>Mendel Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Centro comercial Riuniti</td>
<td>Maria Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Winecellars </td>
<td>Francisco Tannamuri</td>
<td>Canada</td>
</tr>
</table>
</body>
</html>Click on the "See output" button to see how it works.