Merging Table Rows and Columns

To merge adjacent cells in an HTML table, use the colspan attribute to merge horizontally (across columns) and the rowspan attribute to merge vertically (down rows).

Sometimes your data doesn't fit neatly into a perfect grid. You might want a single header to stretch across multiple columns, or a single piece of data to span down a few rows. You can achieve this by stretching a single td or th cell over the space of its neighbors.

Merging Across Columns: colspan

The colspan attribute tells a cell how many column widths it should take up. For example, if you want a header to span across two columns:

When you use colspan="2", you must remember to remove one cell from that row in your HTML, because the merged cell is doing the work of two.

Merging Down Rows: rowspan

The rowspan attribute tells a cell how many row heights it should take up. This is slightly more complex because it pushes the cell down into the next row:

Full Working Example

Here is an example of a schedule that uses colspan to create a main title row, and rowspan to combine a time block that spans over two rows: