Spanning Rows & Columns

Spanning HTML Table Cells

HTML table cells can span across multiple columns or rows when related information needs to occupy more than one cell position.

The colspan attribute makes a cell extend across multiple columns, while the rowspan attribute makes a cell extend across multiple rows.

Cell Spanning Syntax

The colspan and rowspan attributes are added to <td> or <th> elements to control how many table grid positions a cell occupies.

<td colspan="2">Spans Two Columns</td>

<td rowspan="2">Spans Two Rows</td>

The value is a positive integer that indicates how many columns or rows the cell should span.

The colspan Attribute

The colspan attribute makes a table cell extend horizontally across two or more columns.

<table>
  <tr>
    <th colspan="3">Web Development Courses</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
</table>

In this example, the header cell occupies the same horizontal space as the three cells in the row below it.

The rowspan Attribute

The rowspan attribute makes a table cell extend vertically across two or more rows.

<table>
  <tr>
    <th rowspan="2">Beginner</th>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

Because the header cell spans both rows, the second row does not need another cell in that grid position.

Spanning Header Cells

The colspan and rowspan attributes can also be used with <th> elements to create headers that apply to several rows or columns.

<tr>
  <th scope="col">Course</th>
  <th colspan="2" scope="colgroup">Enrollment</th>
</tr>
<tr>
  <th></th>
  <th scope="col">Online</th>
  <th scope="col">Classroom</th>
</tr>

A spanning header can provide a broader heading for a group of related columns or rows while more specific headers identify the individual cells within that group.

Understanding the Table Grid

It helps to think of a table as a grid of cell positions. When a cell spans several rows or columns, it occupies more than one position in that grid.

Other rows must account for those occupied positions. Adding too many cells to a row can create an uneven or confusing table structure because the browser must fit all of the cells into the table grid.

<tr>
  <td colspan="2">A</td>
  <td>B</td>
</tr>
<tr>
  <td>C</td>
  <td>D</td>
  <td>E</td>
</tr>

Both rows in this example occupy three column positions even though the first row contains only two actual cell elements.

Cell Spanning and Accessibility

Cell spanning can make complex data easier to organize visually, but it can also make header relationships harder to understand if the table becomes overly complicated.

Use meaningful <th> elements and appropriate header relationships when cells span multiple rows or columns. Simple table structures are generally easier for everyone to understand, including people using assistive technology.

Cell Spanning Example

The following example demonstrates both colspan and rowspan. Change the spanning values or add cells to see how the browser rebuilds the table grid.

Cell Spanning Best Practices

• Use colspan when one cell logically applies across several columns.
• Use rowspan when one cell logically applies across several rows.
• Keep track of the table grid so each row accounts for cells already occupied by spanning cells.
• Use spanning header cells only when they accurately describe groups of related rows or columns.
• Keep complex spanning to a minimum when a simpler table structure can communicate the same information.
• Use proper header markup and accessibility techniques when spanning creates more complicated header relationships.
• Do not use cell spanning simply to force a table into a particular visual layout.

Summary

The colspan attribute allows an HTML table cell to occupy multiple columns, while rowspan allows a cell to occupy multiple rows. Both attributes can be used with data cells and header cells, but the resulting table grid should remain logical, understandable, and accessible.