0Pricing
HTML Academy · Lesson

colspan and rowspan for Spanning

Merge cells across columns and rows.

colspan and rowspan for Spanning is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Cell Spanning?

By default, each table cell occupies one row and one column. Spanning allows a cell to stretch across multiple columns or rows:

  • colspan — span multiple columns
  • rowspan — span multiple rows

colspan

The colspan attribute makes a cell span multiple columns:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

The rowspan attribute makes a cell span multiple rows:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan and rowspan Together

You can combine both attributes on a single cell:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Accounting for Spanned Cells

When a cell spans multiple columns, omit those columns in the spanned rows:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Common Spanning Patterns

Real-world table spanning examples:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan for Merged Row Headers

Use rowspan to create merged row group labels:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 — Full Width Cell

A colspan of 0 spans all remaining columns in a column group (rarely used):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Spanning and Accessibility

Complex spanning tables need scope and headers attributes for screen readers:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Debugging Spanning Issues

Common spanning mistakes:

  • Too many or too few cells in a row after spanning
  • rowspan extending beyond the number of rows
  • Overlapping spans (two cells claiming the same position)

Use browser DevTools to inspect the table structure if something looks wrong.

CSS for Spanning Cells

Style cells that span multiple columns or rows:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Print and Spanning

Spanning cells print correctly in modern browsers. However:

  • If thead rows span columns, they repeat correctly on each printed page
  • Rowspan within tbody does not repeat across page breaks
  • Test complex tables in print preview before shipping

Quick Check

You have a table cell that should cover 3 columns. Which attribute do you use?

Recap: colspan and rowspan

Cell spanning essentials:

  • colspan — cell spans multiple columns
  • rowspan — cell spans multiple rows
  • Account for spanned cells: omit the cells the span covers
  • Add scope="colgroup" for spanning header accessibility
  • Use DevTools to debug layout issues

Frequently asked questions

Is the “colspan and rowspan for Spanning” lesson free?

Yes — the full text of “colspan and rowspan for Spanning” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “colspan and rowspan for Spanning”?

Merge cells across columns and rows. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “colspan and rowspan for Spanning” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. table tr td and th
  2. thead tbody tfoot Structure
  3. colspan and rowspan for Spanning
  4. Table Accessibility scope summary caption
← Back to HTML Academy