HTML Colspan & Rowspan

A basic HTML table is a strict grid where every row has the same number of cells. But real data often needs a single cell to visually stretch across multiple columns (like a section title spanning an entire table width) or multiple rows (like a category label next to several related rows). The colspan and rowspan attributes let one cell merge into the space several ordinary cells would otherwise occupy.

In this page:

Spanning Columns with colspan
Spanning Rows with rowspan
Combining colspan and rowspan
Building a Complex Schedule Table
Accessibility Considerations for Spanned Cells

Spanning Columns with colspan

colspan="2" on a <td> or <th> makes that single cell occupy the space of two ordinary columns, which means the row containing it must have one fewer total cell than the rest of the table to keep the grid aligned. This is the standard technique for a full-width section title row inside a table.

Note: When a cell uses colspan="3", remove two of the normal cells that would have followed it in that same row.

Warning: Forgetting to remove the replaced cells after adding colspan produces a row with too many cells, breaking the table's column alignment.

Example: Spanning Columns with colspan

markup

<table>
  <tr>
    <td colspan="2">Full width title</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

Spanning Rows with rowspan

rowspan="2" on a <td> or <th> makes that single cell occupy the space of two rows vertically, which means each of the following rows it spans into must have one fewer cell, since that column position is already filled by the spanning cell above.

Note: When a cell uses rowspan="3", remove that same column position from the next two rows entirely.

Warning: A mismatched rowspan count, where a following row still includes the cell the span was meant to replace, breaks the table's row alignment.

Example: Spanning Rows with rowspan

markup

<table>
  <tr>
    <td rowspan="2">Spans two rows</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

Combining colspan and rowspan

A single cell can use colspan and rowspan together, spanning a rectangular block of both multiple columns and multiple rows simultaneously -- useful for a corner label cell in a matrix-style table where it needs to occupy more than one row and one column at once.

Note: Sketch the intended grid on paper first when combining both attributes, since tracking exactly which cells are consumed gets complex quickly.

Warning: Combining colspan and rowspan incorrectly is one of the easiest ways to produce a visually broken, misaligned table grid.

Example: Combining colspan and rowspan

markup

<table>
  <tr>
    <td rowspan="2" colspan="2">Corner label</td>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
</table>

Building a Complex Schedule Table

colspan and rowspan together are exactly what makes possible common real-world tables like a weekly class schedule, where a single multi-hour class block spans several time-row slots, or a merged header spans an entire day's column.

Note: Build complex spanning tables incrementally, adding one spanned cell at a time and checking alignment before adding the next.

Warning: A schedule table with many overlapping spans is easy to get subtly wrong; test it visually across several browsers before shipping.

Example: Building a Complex Schedule Table

markup

<table>
  <tr>
    <th>Time</th>
    <th colspan="2">Monday</th>
  </tr>
  <tr>
    <td>9am</td>
    <td rowspan="2">Math Class</td>
  </tr>
</table>

Accessibility Considerations for Spanned Cells

Spanned cells can confuse screen reader users if the reading order becomes unclear, since a merged cell breaks the simple one-cell-per-row-per-column assumption. Adding scope and, for complex cases, the headers/id association technique helps assistive technology correctly announce which spanned header applies to which data cell.

Note: Test any table with heavy colspan/rowspan usage with a screen reader, since visual layout and reading order can diverge more easily in spanned tables.

Warning: Overusing spans purely for visual layout, rather than genuine data structure, is generally discouraged -- CSS Grid is often a better tool for pure visual layout needs.

Example: Accessibility Considerations for Spanned Cells

markup

<table>
  <tr>
    <th id="monday" scope="col">Monday</th>
  </tr>
  <tr>
    <td headers="monday">Math Class</td>
  </tr>
</table>

Common Mistakes

Forgetting to remove the cells that colspan or rowspan is replacing, resulting in a row with too many total cells and a broken, misaligned grid.
Miscounting how many columns a spanned cell covers, throwing off the alignment of every column after it in that row.
Using colspan or rowspan values that do not match up across rows, producing an uneven, jagged-looking table grid.

Chapter Summary

colspan="n" makes a cell span n columns horizontally, replacing that many normal cells in its row.
rowspan="n" makes a cell span n rows vertically, and that many following rows must have one fewer cell to compensate.
colspan and rowspan can be combined on the same cell to span a rectangular block of both rows and columns at once.

Browser Support

colspan and rowspan attributes have been part of HTML since its earliest versions and are supported in every browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Padding & Spacing Next Lesson → HTML Table Styling

HTML Colspan & Rowspan

Spanning Columns with colspan

Spanning Rows with rowspan

Combining colspan and rowspan

Building a Complex Schedule Table

Accessibility Considerations for Spanned Cells

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code