How can you merge rows and columns in HTML tables?

Difficulty: 5/10

HTML Tables, Web Accessibility, Responsive Design

Merging Rows and Columns in HTML Tables

In HTML tables, you can merge cells across multiple columns or rows using the colspan and rowspan attributes on <th> or <td> elements.

Key Attributes

1
colspan: Merges a cell across multiple columns. The value specifies how many columns the cell should span.
2
rowspan: Merges a cell across multiple rows. The value specifies how many rows the cell should span.

Example Usage

In short: Use colspan to merge cells horizontally across columns and rowspan to merge cells vertically across rows. This helps in creating complex table layouts.

Scenario Questions

0-2 years experience

1We are building a pricing page with a table comparing three plans. The 'Enterprise' plan has a special promotional banner row that needs to span across all three columns. How would you implement this, and what changes do you need to make to the other cell elements in that specific row?
2Imagine you've added rowspan='3' to a table cell to group some user data, but now the layout of the subsequent two rows is completely shifted and broken. Walk me through how you would debug this and correct the cell count in those following rows.

Follow-up Questions

How do screen readers announce cells that have a rowspan or colspan applied?
If we transition a native HTML table to CSS Grid for mobile responsiveness, how do we preserve the semantic table relationships?
What performance implications arise when rendering tables with thousands of rows containing dynamic rowspans?