FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Data

Intermediate

Colspan & Rowspan

Learn Colspan & Rowspan with practical examples for tables, lists, structured data relationships, accessibility, SEO and live practice.

HTML data structures

Colspan and rowspan merge cells, but they also change the data structure.

The colspan and rowspan attributes let a cell stretch across multiple columns or rows. They are useful for group headers, totals and schedules.

Merged cells can make a table more readable visually, but they can also make the relationship between headers and values harder to understand.

Use spanning when the data really has a group relationship. Do not use it only to force a layout shape.

colspan

Makes a cell span multiple columns.

rowspan

Makes a cell span multiple rows.

group header

A header that labels several columns or rows.

complex table

A table that may need extra accessibility testing.

Syntax and structure

Span only when the data has a real grouped meaning.

A subtotal row that spans label columns is a normal use case. Random visual merging is not.

Subtotal row with colspan

<table>
  <caption>Order summary</caption>
  <tr><th scope="col">Item</th><th scope="col">Qty</th><th scope="col">Price</th></tr>
  <tr><td>Lesson</td><td>2</td><td>EUR 150</td></tr>
  <tr>
    <th scope="row" colspan="2">Total</th>
    <td>EUR 150</td>
  </tr>
</table>

Span used for visual layout

<table>
  <tr><td colspan="3"><h1>Hero area</h1></td></tr>
  <tr><td>Left</td><td>Main</td><td>Right</td></tr>
</table>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<table>
  <caption>Order summary</caption>
  <tr><th scope="col">Item</th><th scope="col">Qty</th><th scope="col">Price</th></tr>
  <tr><td>Lesson</td><td>2</td><td>EUR 150</td></tr>
  <tr>
    <th scope="row" colspan="2">Total</th>
    <td>EUR 150</td>
  </tr>
</table>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="demo-card">
  <table>
    <caption>Package summary</caption>
    <tr><th scope="col">Part</th><th scope="col">Amount</th><th scope="col">Price</th></tr>
    <tr><td>Lessons</td><td>15</td><td>EUR 1125</td></tr>
    <tr><td>Exam</td><td>1</td><td>EUR 300</td></tr>
    <tr><th scope="row" colspan="2">Total</th><td>EUR 1425</td></tr>
  </table>
</main>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #f7f7f4;
}

caption {
  caption-side: top;
  margin-bottom: 12px;
  color: #8cffc1;
  font-weight: 900;
  text-align: left;
}

th, td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  color: #8cffc1;
  font-weight: 900;
}

ul, ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  color: #cfd8e6;
}

li::marker {
  color: #8cffc1;
  font-weight: 900;
}

dl {
  margin: 0;
}
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<table>
  <tr><td colspan="3"><h1>Hero area</h1></td></tr>
  <tr><td>Left</td><td>Main</td><td>Right</td></tr>
</table>
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Data HTML should preserve relationships, not only appearance.

Tables and lists are small elements with big structural value. They help users scan, compare, follow steps and understand how pieces of information belong together.

Use spans sparingly

The more spans a table has, the harder it is to reason about.

Keep totals clear

A colspan subtotal row is often useful and readable.

Avoid layout spans

Spanning cells is not a replacement for CSS layout.

Retest headers

Merged cells can affect which headers apply to which values.

Prefer simple structures

Two simple tables can be better than one clever table.

Document complex tables

Use captions or notes when relationships are not obvious.

Production thinking

Structured data markup affects accessibility, SEO and maintainability.

Why does this matter?

This matters because merged cells feel convenient until the table grows. Good spanning supports the data instead of hiding complexity.

Accessibility

Complex spanning can confuse header associations. Test with real assistive technology or simplify the table.

Production note

Dashboards often need export, sorting and filtering. Heavy rowspan and colspan can make those features harder.

SEO note

Simple table structures are easier for crawlers and users to interpret than heavily merged tables.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Add a discount row before the total.
  • Change colspan from 2 to 3 and explain why the row breaks.
  • Add a grouped header row with colspan="3".

Practice assignment

Do this before moving to the next lesson.

  1. Build a small invoice table with a total row.
  2. Use colspan only where the label really spans columns.
  3. Check whether every value still has a clear label.

Try it yourself

Add a clear total row

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?