Detailed explanation
In an HTML table, colspan and rowspan let one cell occupy multiple positions in the table’s logical grid. colspan extends a cell horizontally across columns, while rowspan extends it vertically across rows. Both attributes work on <td> and <th> elements. For example, <th colspan="2">Name</th> creates one header cell covering two columns, not two separate header elements. These attributes are useful for grouped headings, report layouts, and values shared across several records. They describe table structure rather than merely changing a cell’s visual dimensions.
In the given example, the table has three logical columns. The first row contains a Name header spanning the first two columns and an Age header occupying the third. In the second row, John occupies the first column and spans two rows; Smith and 30 occupy the second and third columns. In the third row, John’s existing span still occupies the first column, so Doe and 31 fit into the remaining two columns. That row correctly contains only two <td> elements. Adding an empty cell for John would not complete the row; it would introduce another cell and disrupt the intended grid.
Under the hood, the browser builds a grid of cell positions, tracking slots already occupied by spanning cells. It places subsequent cells into available positions and calculates column widths and row heights using content, CSS, and the table-layout algorithm. A span therefore does not guarantee equal widths or heights for the tracks it covers. The default span is 1. Normally, you supply a positive integer; rowspan also supports the special value 0, meaning all remaining rows in the current row group, such as a <tbody>. A rowspan cannot extend across separate row groups.
Interviewers usually check whether you can trace the resulting grid and avoid overlapping or misplaced cells. They may also ask about semantics: use real headers and appropriate scope or, for complex tables, explicit id/headers associations. Merged cells can make header relationships harder to understand, especially with assistive technology. Keep tables for tabular data rather than general page layout, and use spans only when the data genuinely requires grouping.
Key points to remember
- colspan spans columns horizontally; rowspan spans rows vertically.
- Both attributes apply to <td> and <th>, with a default value of 1.
- Do not add placeholder cells in positions already occupied by a span.
- rowspan="0" covers the remaining rows in the current row group.
- Spans define grid occupancy, not fixed dimensions or equal column widths.
Common mistakes candidates make
- Adding empty cells beneath a rowspan or beside a colspan, unintentionally creating extra columns.
- Assuming every row must contain the same number of cell elements rather than accounting for occupied grid positions.
- Treating spanning headers as automatically accessible without checking their relationships to data cells.
Likely follow-up questions
Can one cell use both colspan and rowspan?
Yes, a cell can use both attributes, such as <td colspan="2" rowspan="2">Total</td>. It occupies a rectangular area covering two columns and two rows, so other cells must not occupy those positions.
Does colspan="2" make a cell twice as wide as another cell?
Not necessarily; it makes the cell span two column tracks. Their widths depend on content, CSS constraints, and the table-layout algorithm, so the tracks need not be equally wide.
How should headers be associated with cells in a complex table?
Use <th> with appropriate scope values where the header relationships are straightforward, including rowgroup or colgroup where applicable. For more complex relationships, assign IDs to headers and reference them through each relevant data cell’s headers attribute.
Interview tip: Define both attributes, trace the example’s three-column grid, and explain why the last row needs only two cells.