rowspan

Learn how to use the rowspan attribute to merge table cells vertically, creating complex layouts that span multiple rows.

What it is

The rowspan attribute in HTML tables specifies how many rows a single cell should extend downward. It is applied to <td> or <th> elements. When a cell spans multiple rows, subsequent rows must omit the corresponding cells to maintain structural integrity. This contrasts with colspan, which merges cells horizontally across columns.

Why it matters

• Data Grouping: Visually groups related data under a single header without repeating text.
• Complex Layouts: Enables non-uniform grid structures for schedules, calendars, or comparison charts.
• Accessibility: Properly structured spanning helps screen readers understand hierarchical relationships.
• Space Efficiency: Reduces visual clutter by eliminating redundant labels in repetitive datasets.

Syntax or steps

1. Identify the cell that needs to span multiple rows.
2. Add the rowspan="N" attribute, where N is the number of rows to cover.
3. In the following N-1 rows, remove the <td> element that would have occupied the space taken by the spanning cell.
4. Ensure the total number of logical columns remains consistent across all rows.

Example

<table border="1">
  <thead>
    <tr>
      <th>Category</th>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Fruits</td>
      <td>Apple</td>
      <td>$1.00</td>
    </tr>
    <tr>
      <!-- No Category cell here because "Fruits" spans this row -->
      <td>Banana</td>
      <td>$0.50</td>
    </tr>
    <tr>
      <td rowspan="3">Vegetables</td>
      <td>Carrot</td>
      <td>$0.80</td>
    </tr>
    <tr>
      <td>Broccoli</td>
      <td>$1.20</td>
    </tr>
    <tr>
      <td>Spinach</td>
      <td>$2.00</td>
    </tr>
  </tbody>
</table>

Explanation: The first column contains two main categories. "Fruits" uses rowspan="2", so it covers the Apple and Banana rows. Consequently, the second row only defines Item and Price. Similarly, "Vegetables" uses rowspan="3", covering Carrot, Broccoli, and Spinach. The browser automatically adjusts the layout so the vertical lines align correctly.

Common mistakes

• Forgetting to remove cells: If you add rowspan="2" but keep the cell in the next row, the table will shift right, breaking alignment.
• Miscounting rows: Ensure the rowspan value matches the exact number of rows the content occupies, including the starting row.
• Conflicting with colspan: Using both attributes on the same cell requires careful calculation of remaining empty spaces in the grid.
• Ignoring accessibility: Always use <th> for headers and consider adding scope attributes if the structure becomes too complex for simple visual parsing.

When to use it

Use rowspan when data logically belongs to a parent category that applies to multiple sub-items. Avoid it if the data changes frequently per row, as editing spanning cells can be error-prone.

Practice

Guided Exercise: Create a table with three columns: Name, Department, and Role. Make the "Department" cell for "Engineering" span two rows containing "Alice" and "Bob".

Challenge: Add a third employee, "Charlie", also in Engineering. Update your code so the "Engineering" cell spans three rows. Verify that Charlie's row does not contain a Department cell.

Quick check

Question: If a cell has rowspan="4", how many subsequent rows must omit the corresponding cell?

Answer: Three subsequent rows must omit the cell, because the original row counts as one of the four.

Summary

The rowspan attribute allows table cells to extend vertically across multiple rows, facilitating cleaner data presentation and logical grouping. Success depends on accurately counting rows and removing redundant cells in subsequent rows to maintain table structure.