HTML Table Rowspan & Colspan
Sometimes one cell must take the space of more than one cell. HTML has two attributes for this: colspan joins cells across columns, and rowspan joins cells down rows. They are used on <td> and <th>.
Colspan
<table>
<tr>
<th colspan="2">Student Report</th>
</tr>
<tr>
<td>Name</td>
<td>Robin</td>
</tr>
</table>
Output in the browser
| Student Report | |
|---|---|
| Name | Robin |
The heading cell joins two columns, so the second row still has two cells.
Rowspan
<table>
<tr>
<td rowspan="2">Marks</td>
<td>Maths: 90</td>
</tr>
<tr>
<td>Science: 85</td>
</tr>
</table>
Output in the browser
| Marks | Maths: 90 |
| Science: 85 |
The cell “Marks” takes two rows. So the second row needs only one cell, because the first place is already filled.
Both together
<table>
<tr>
<th colspan="2">Student Report</th>
</tr>
<tr>
<td>Name</td>
<td>Robin</td>
</tr>
<tr>
<td rowspan="2">Marks</td>
<td>Maths: 90</td>
</tr>
<tr>
<td>Science: 85</td>
</tr>
</table>
Output in the browser
| Student Report | |
|---|---|
| Name | Robin |
| Marks | Maths: 90 |
| Science: 85 | |
Note:
When you use colspan or rowspan, remove the extra <td> cells that are now covered. If the number of cells in a row is more than the columns, the table breaks.
Summary
colspan="n"joins n columns.rowspan="n"joins n rows.- Delete the cells that are covered by the merged cell.
- Previous chapter: HTML Tables.
Congratulations! Chapter Finished. Learn more about the similar topics:
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |