Advanced Tables (colspan and rowspan)

In this lesson you'll learn how to merge cells using a table's colspan and rowspan, so you can build more complex table layouts. This is for people searching "HTML table colspan rowspan."

The colspan attribute merges cells horizontally, and the rowspan attribute merges cells vertically. Picture it like "grouping adjacent time slots on a class schedule together." Specifying a number merges that many cells.

The sample code uses colspan="2" to make a "Morning" heading span the width of 2 cells, and rowspan="2" to make a "Free time" cell span the height of 2 rows. Notice that wherever you merge cells, you need to reduce the number of ordinary cells in the other affected rows accordingly.

A common beginner stumbling block is that, on a row where cells are merged with colspan or rowspan, if you don't adjust the number of ordinary cells to match, the columns across the whole table end up misaligned. You need to keep count of merged cells in your head to keep the number of cells in each row consistent.

Even a layout as complex as a spreadsheet can be expressed with HTML alone if you master these two attributes — useful in real work for things like a price list or a class schedule. Correctly understanding table structure lets you organize and display even complex data cleanly.