HTML Table with Rowspan and Colspan Example

mediumTablesHTML

rowspan and colspan merge cells — the most-asked table question in the O Level M2 practical.

The question

Make this time table with border="1": the first row has a header "Day" and a header "Subjects" that spans 2 columns. Below it, a cell "Wednesday" spans 2 rows; the first row has CSS and IT Tools, the second row has IoT and HTML.

The code

index.html

<table border="1">
  <tr><th>Day</th><th colspan="2">Subjects</th></tr>
  <tr><td rowspan="2">Wednesday</td><td>CSS</td><td>IT Tools</td></tr>
  <tr><td>IoT</td><td>HTML</td></tr>
</table>

Try it Yourself »

Result

How it works

1colspan="2" makes one cell as wide as two columns.
2rowspan="2" makes one cell as tall as two rows.
3The row below a rowspan cell has one cell fewer, because the merged cell already fills that spot.

Common mistakes

Adding a full set of cells in the row under a rowspan — the table grows an extra column.
Writing rowspan on the <tr> instead of the <td>.

Now solve a similar question yourself

A new HTML / CSS / JS question every time, checked instantly.

Practice questions