HTML Table Colspan Rowspan

Colspan and rowspan let one cell take up more than one column or more than one row. They are the key to building complex table layouts like timetables, report cards, and reservation systems — layouts where one label covers multiple data columns or rows.

What Is Colspan

Colspan means column spanning. A cell with colspan stretches horizontally and covers the space of multiple columns in the same row.

Think of a spreadsheet where you merge two cells side by side into one wider cell. Colspan does the same in HTML.

Syntax

<td colspan="2">This cell covers 2 columns</td>

The number in colspan tells the browser how many columns this one cell should occupy.

Visual Diagram — colspan="2"

Normal table (3 columns):
+--------+--------+--------+
| Col 1  | Col 2  | Col 3  |
+--------+--------+--------+
| A      | B      | C      |
+--------+--------+--------+

With colspan="2" on first cell of second row:
+--------+--------+--------+
| Col 1  | Col 2  | Col 3  |
+-----------------+--------+
|A + B (colspan=2)| C      |
+-----------------+--------+

The first cell now spans across columns 1 and 2.

Colspan Example — Class Timetable Header

<table border="1">
  <tr>
    <th>Day</th>
    <th colspan="2">Morning (9–11am)</th>
    <th colspan="2">Afternoon (1–3pm)</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Math</td>
    <td>English</td>
    <td>Science</td>
    <td>Art</td>
  </tr>
</table>

Visual Diagram — Timetable with Colspan

+----------+---------------------+---------------------+
| Day      | Morning (9–11am)    | Afternoon (1–3pm)   |
|          +----------+----------+----------+----------+
|          | Math     | English  | Science  | Art      |
+----------+----------+----------+----------+----------+
| Monday   | ✓        | ✓        | ✓        | ✓        |
+----------+----------+----------+----------+----------+

"Morning" header spans 2 sub-columns.
"Afternoon" header spans 2 sub-columns.

What Is Rowspan

Rowspan means row spanning. A cell with rowspan stretches vertically and covers the space of multiple rows in the same column.

Think of merging two cells stacked on top of each other into one tall cell. Rowspan does that in HTML.

Syntax

<td rowspan="2">This cell covers 2 rows</td>

Visual Diagram — rowspan="2"

Normal table:
+----------+--------+
| Category | Item   |
+----------+--------+
| Fruit    | Apple  |
+----------+--------+
| Fruit    | Mango  |
+----------+--------+

With rowspan="2" on "Fruit" cell:
+----------+--------+
| Category | Item   |
+----------+--------+
|          | Apple  |
|  Fruit   +--------+
|          | Mango  |
+----------+--------+

"Fruit" spans two rows so it is not repeated.

Rowspan Example — Category Table

<table border="1">
  <tr>
    <th>Category</th>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td rowspan="2">Fruit</td>
    <td>Apple</td>
    <td>₹10</td>
  </tr>
  <tr>
    <td>Mango</td>
    <td>₹20</td>
  </tr>
  <tr>
    <td rowspan="2">Vegetable</td>
    <td>Potato</td>
    <td>₹5</td>
  </tr>
  <tr>
    <td>Tomato</td>
    <td>₹8</td>
  </tr>
</table>

The Golden Rule of Rowspan and Colspan

When a cell spans multiple columns or rows, the browser removes that many regular cells from the neighboring rows or columns. You must not write extra <td> tags for the spaces that the spanning cell already covers.

Visual Diagram — Counting Cells in a Rowspan

3-column table, "Fruit" has rowspan=2:

Row 1: [Fruit(rowspan=2)] [Apple] [₹10]   → 3 cells total but only 2 written
Row 2:                    [Mango] [₹20]   → only 2 cells written (Fruit still occupies col 1)

If you accidentally write 3 cells in Row 2:
Row 2: [Mango] [₹20] [Extra]              → table breaks visually

Combining Colspan and Rowspan

You can use both attributes on the same cell to create a cell that covers multiple columns and multiple rows simultaneously.

Visual Diagram — colspan="2" rowspan="2"

A 4-column, 3-row table:

+-------+-------+-------+-------+
| A     | B     | C     | D     |
+-------+-------+-------+-------+
| E     |       Big     | H     |
+-------+  Cell         +-------+
| I     | (colspan=2    | L     |
+-------+  rowspan=2)   +-------+

"Big Cell" occupies columns 2-3 and rows 2-3.

Example Code

<table border="1">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
    <td colspan="2" rowspan="2">Big Cell</td>
    <td>H</td>
  </tr>
  <tr>
    <td>I</td>
    <td>L</td>
  </tr>
</table>

Practical Real-World Example — Hotel Booking Table

A hotel booking table shows room types across the top and days down the side. Some rooms are booked for multiple nights — rowspan handles that.

<table border="1">
  <tr>
    <th>Date</th>
    <th>Room 101</th>
    <th>Room 102</th>
    <th>Room 103</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td rowspan="2">Booked – Priya</td>
    <td>Available</td>
    <td>Available</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td rowspan="2">Booked – Raj</td>
    <td>Available</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Available</td>
    <td>Available</td>
  </tr>
</table>

Visual Diagram — Hotel Booking

+----------+------------------+------------------+------------------+
| Date     | Room 101         | Room 102         | Room 103         |
+----------+------------------+------------------+------------------+
| Monday   | Booked – Priya   | Available        | Available        |
| Tuesday  | (continues)      | Booked – Raj     | Available        |
| Wednesday| Available        | (continues)      | Available        |
+----------+------------------+------------------+------------------+

Common Mistakes to Avoid

Writing Too Many Cells

When a cell has rowspan="3", it takes one spot in the current row and eliminates one cell from the next two rows. If you write the same number of cells in those rows as you normally would, the table breaks and extra cells push columns out of alignment.

Using Incorrect Span Numbers

If you set colspan="4" but your table only has 3 columns, the spanning cell overflows the table boundaries. Always count your columns carefully before setting span values.

Forgetting to Remove Displaced Cells

Draw your table on paper first. Count exactly how many cells each row and column needs after accounting for spans. Then write the HTML to match that count.

Quick Reference

Attribute       Direction    Use For
-----------     ---------    ------------------------------------------
colspan="N"     Horizontal   Headers covering multiple data columns
rowspan="N"     Vertical     Labels shared across multiple rows
Both together   Both ways    Merged blocks in complex grid layouts

Colspan and rowspan are fundamental tools for displaying structured data. Once you understand the cell-counting rule, you can build any complex table layout with confidence.