Spanning Rows and Columns in Tables

If you’ve ever used a spreadsheet, you’ve probably merged cells to make a big title across several columns or a label that covers multiple rows. You can do the same thing on a web page using HTML tables.

In this article, you’ll learn how to:

• Create a basic HTML table
• Make cells span multiple columns using colspan
• Make cells span multiple rows using rowspan
• Combine both to build more advanced table layouts

You don’t need any coding experience. We’ll go step by step, with short, commented examples you can copy, paste, and tweak.

---

1. The building blocks of an HTML table

An HTML table is made from a few simple pieces:

• <table>: the outer container for the whole table
• <tr>: a table row (think of a horizontal line of cells)
• <th>: a table header cell (usually bold, at the top or left)
• <td>: a table data cell (regular cell for content)

Here’s a very simple table without any spanning.

<table border="1">
  <!-- First row: table headers -->
  <tr>
    <th>Day</th>
    <th>Morning</th>
    <th>Afternoon</th>
  </tr>

  <!-- Second row: table data -->
  <tr>
    <td>Monday</td>
    <td>Meeting</td>
    <td>Coding</td>
  </tr>

  <!-- Third row: table data -->
  <tr>
    <td>Tuesday</td>
    <td>Emails</td>
    <td>Design</td>
  </tr>
</table>

What this does:

• The border="1" attribute adds simple borders so you can easily see cell edges.
• Each <tr> creates one row.
• Inside each row, <th> and <td> create individual cells.

Expected result: You’ll see a 3-column table with “Day”, “Morning”, and “Afternoon” as headers, and data for Monday and Tuesday.

Try it yourself:

1. Paste this code into a blank .html file.
2. Open it in your browser.
3. Change some cell text (for example, replace “Design” with “Gym”) and refresh.

Once you’re comfortable with this structure, you’re ready to span cells.

---

2. Spanning columns with colspan

Column spanning means one cell stretches over several columns.

In HTML, we use the colspan attribute (short for column span). The value is a number that tells the browser how many columns the cell should cover.

Let’s add a title that spans across all 3 columns of our table.

<table border="1">
  <!-- First row: a single header cell spanning 3 columns -->
  <tr>
    <th colspan="3">Weekly Schedule</th>
  </tr>

  <!-- Second row: regular headers -->
  <tr>
    <th>Day</th>
    <th>Morning</th>
    <th>Afternoon</th>
  </tr>

  <!-- Third row: data -->
  <tr>
    <td>Monday</td>
    <td>Meeting</td>
    <td>Coding</td>
  </tr>
</table>

What changed?

• The first <tr> now has just one <th> cell.
• We added colspan="3" so that this cell stretches across all three columns below.

Expected result:

• The top row shows “Weekly Schedule” centered in one wide cell.
• The second row has the normal three headers.
• The third row has the data.

When to use colspan

Use colspan when you want:

• A big title across multiple columns
• A category that groups several columns under one label
• To combine neighboring cells into one wider cell

Try it yourself:

• Change colspan="3" to colspan="2" and see what happens.
• Add another <th> in that first row to fill the missing column and observe the layout.

Playing with these numbers will help you understand how the browser lines things up.

---

3. Spanning rows with rowspan

Row spanning means one cell stretches down across several rows.

We use the rowspan attribute (short for row span). Again, the value is a number: how many rows the cell should cover.

Let’s say you have a schedule where a single activity fills both the morning and afternoon on Monday. We can merge those two Monday cells into one.

<table border="1">
  <!-- Header row -->
  <tr>
    <th>Day</th>
    <th>Morning</th>
    <th>Afternoon</th>
  </tr>

  <!-- Monday row -->
  <tr>
    <td rowspan="2">Monday</td> <!-- This cell covers 2 rows -->
    <td colspan="2">Workshop (all day)</td>
  </tr>

  <!-- Tuesday row -->
  <tr>
    <td>Emails</td>
    <td>Design</td>
  </tr>
</table>

Important detail:

• The Monday cell uses rowspan="2", so it will cover both the Monday row and the Tuesday row.
• Because that Monday cell already occupies a column in the next row, the Tuesday row still has only two <td> cells (for Morning and Afternoon).

Expected result:

• The "Monday" label appears in a tall cell that spans the first two rows.
• On the first row, "Workshop (all day)" stretches across the Morning and Afternoon columns.
• On the second row, you see Tuesday’s morning and afternoon activities.

Try it yourself:

• Change rowspan="2" to rowspan="3" and add another row to see how far the Monday cell stretches.
• Remove one of the <td> cells in the Tuesday row and watch how the browser adjusts the layout (you’ll see misalignment). This shows why the number of columns has to match.

---

4. Combining colspan and rowspan in one table

You can use colspan and rowspan together to build more complex tables, like a summary of a small event schedule.

Here’s a more advanced example that combines both. Don’t worry if it looks longer; we’ll walk through it.

<table border="1">
  <!-- Top title spanning all 3 columns -->
  <tr>
    <th colspan="3">Weekend Workshop</th>
  </tr>

  <!-- Second row: simple headers -->
  <tr>
    <th>Day</th>
    <th>Session</th>
    <th>Topic</th>
  </tr>

  <!-- Saturday morning/afternoon -->
  <tr>
    <!-- Saturday label spans 2 rows (morning and afternoon) -->
    <td rowspan="2">Saturday</td>
    <td>Morning</td>
    <td>Introduction to HTML</td>
  </tr>

  <tr>
    <!-- No Day cell here because Saturday cell is spanning this row -->
    <td>Afternoon</td>
    <td>Building Simple Pages</td>
  </tr>

  <!-- Sunday: one long combined session -->
  <tr>
    <td>Sunday</td>
    <!-- One session cell that covers 2 columns -->
    <td colspan="2">Project Practice (all day)</td>
  </tr>
</table>

What’s happening here?

• The first row has a header cell that spans all 3 columns (colspan="3").
• The "Saturday" cell uses rowspan="2", so it covers the morning and afternoon rows.
• The Sunday row uses colspan="2" to merge the Session and Topic columns into one wide cell.

Expected result:

• A clean, readable table with a big title.
• Saturday appears once on the left, with two sessions next to it.
• Sunday shows one merged cell that clearly says it’s an all-day project practice.

Try it yourself:

• Change the Sunday row so that it has separate Morning and Afternoon sessions.
• Add another day (for example, "Friday"), and decide where you might want to use rowspan or colspan.

The key idea: when you span cells, always think about how many columns each row should end up with. Spans must line up so the grid stays consistent.

---

5. Tips to avoid common mistakes

It’s normal to feel a bit confused at first. Here are some tips to keep you on track:

1. Count your columns.

   • Each row should still line up into the same total number of columns.
   • If a cell uses colspan="2", it counts as two columns for that row.

2. Match rowspans carefully.

   • A cell with rowspan="3" will use space in three different rows.
   • In those extra rows, you remove one cell from that column because it’s already taken.

3. Start simple.

   • Begin with a small 2x2 table.
   • Add colspan or rowspan one step at a time.

4. Use borders to see the structure.

   • border="1" is very helpful for beginners.
   • Later, you can use CSS to style borders more nicely.

Every time the layout looks strange, go back and count: how many columns does each row have if you include their spans?

---

6. Quick recap and what’s next

You’ve just learned how to:

• Build a basic HTML table with <table>, <tr>, <th>, and <td>
• Use colspan to make a cell stretch across multiple columns
• Use rowspan to make a cell stretch across multiple rows
• Combine both to create clear, well-organized tables

That’s a big win, especially if you’re just starting to code. Spanning rows and columns is a powerful way to make your tables easier to read and more professional.

What’s next?

• Experiment with your own schedules, price lists, or comparison tables.
• Look into basic CSS to style your table (colors, fonts, spacing).
• Try recreating a simple table from a spreadsheet using rowspan and colspan.

Each small experiment strengthens your understanding. Keep tweaking, keep testing, and you’ll be surprised how quickly these concepts start to feel natural.