HTML Table Colspan & Rowspan

HTML tables display data in rows and columns. To make tables clearer, it's possible to merge cells. The colspan attribute merges cells horizontally, while the rowspan attribute merges them vertically. In this tutorial, we explain the syntax and show examples.

Learning Outcomes

After reading this tutorial, you will be able to:

• Use the colspan attribute to merge table cells across columns.
• Use the rowspan attribute to merge table cells over rows.
• Write clear HTML table code with proper cell merging.
• Group header columns to present data clearly.
• Create sample layouts for invoices, student data, and more.
• Combine both colspan and rowspan for complex table structures.
• Follow best practices to keep table code accessible and easy to maintain.
• Choose tables for data display and use CSS for page layout.

HTML Table – The colspan Attribute

Syntax:

The colspan attribute makes one cell span several columns. Use this code:

<td colspan="number_of_columns">Content</td>

For example, to merge three columns:

<td colspan="3">Merged Cell</td>

Grouping Header Columns

This example shows how to group columns under one header:

<table border="1">
  <tr>
    <th>Item</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>T-Shirt</td>
    <td>Size</td>
    <td>Color</td>
  </tr>
</table>

Output:

Invoice Layout Table Example

This example uses colspan to merge cells for the subtotal.

<table border="1">
  <tr>
    <th>Item</th>
    <th>Qty</th>
    <th>@</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>SitePoint Paperclips</td>
    <td>100</td>
    <td>1.15</td>
    <td>115.00</td>
  </tr>
  <tr>
    <td>SitePoint Paper</td>
    <td>10</td>
    <td>45.99</td>
    <td>459.90</td>
  </tr>
  <tr>
    <th colspan="3">Subtotal</th>
    <td>574.90</td>
  </tr>
</table>

Output:

HTML Table – The rowspan Attribute

Syntax

The rowspan attribute makes one cell span several rows. Use this code:

<td rowspan="number_of_rows">Content</td>

For example, to merge two rows:

<td rowspan="2">Merged Cell</td>

Merging Rows for Student Data Table Example

This example shows a student table. The student's name spans two rows.

<table border="1">
  <tr>
    <th>Student</th>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <th rowspan="2">John Doe</th>
    <td>90%</td>
    <td>85%</td>
  </tr>
  <tr>
    <td colspan="2">Top Performer</td>
  </tr>
</table>

Output:

Programming Frameworks Table Example

This example shows programming frameworks. The cell for "JavaScript" spans three rows.

<table border="1">
  <thead>
    <tr>
      <th>Programming Language</th>
      <th>Framework</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">JavaScript</td>
      <td>Express.js</td>
    </tr>
    <tr>
      <td>Angular</td>
    </tr>
    <tr>
      <td>Next.js</td>
    </tr>
    <tr>
      <td rowspan="2">PHP</td>
      <td>Laravel</td>
    </tr>
    <tr>
      <td>Symfony</td>
    </tr>
  </tbody>
</table>

Output:

Additional Examples

Multi-Column Headings

This table groups columns under headings.

<table border="1">
  <tr>
    <th colspan="2">Life Expectancy</th>
    <th colspan="2">Gender</th>
  </tr>
  <tr>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
  </tr>
  <tr>
    <td>82</td>
    <td>85</td>
    <td>78</td>
    <td>81</td>
  </tr>
</table>

Output:

Single-Row Titling

This example shows a header that spans an entire row.

<table border="1">
  <tr>
    <th>Item</th>
    <th>Qty</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>2</td>
    <td>$5.00</td>
  </tr>
  <tr>
    <th colspan="2">Total</th>
    <td>$10.00</td>
  </tr>
</table>

Output:

Multi-Row Data

This table merges rows when a label applies to several rows.

<table border="1">
  <tr>
    <th>Student</th>
    <th>Subject</th>
    <th>Score</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Math</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>90</td>
  </tr>
</table>

Output:

Combining Colspan and Rowspan

This example shows a table that uses both attributes. It gives a team performance overview.

<table border="1">
  <caption>Team Performance Overview</caption>
  <tr>
    <th>Team</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Member</th>
    <th>Tasks</th>
    <th>Issues</th>
    <th>Tasks</th>
    <th>Issues</th>
  </tr>
  <tr>
    <td rowspan="2">Team A</td>
    <td>25</td>
    <td>20</td>
    <td>30</td>
    <td>18</td>
  </tr>
  <tr>
    <td>28</td>
    <td>22</td>
    <td>35</td>
    <td>25</td>
  </tr>
  <tr>
    <td rowspan="3">Team B</td>
    <td>22</td>
    <td>18</td>
    <td>28</td>
    <td>20</td>
  </tr>
  <tr>
    <td>20</td>
    <td>15</td>
    <td>25</td>
    <td>16</td>
  </tr>
  <tr>
    <td>25</td>
    <td>20</td>
    <td>30</td>
    <td>22</td>
  </tr>
</table>

Output:

Reasons Not to Use colspan or rowspan

• Merging too many cells can make your HTML code harder to read and maintain. Overusing rowspan and colspan may create complex table structures that are difficult to understand at a glance.
• Screen readers, which assist visually impaired users, may have trouble interpreting merged cells correctly. This can affect the accessibility of your table and make it confusing for users relying on assistive technology.
• Use HTML tables strictly for displaying tabular data, such as lists, schedules, or comparisons. Avoid using tables for page layout or design purposes. Instead, use CSS (Cascading Style Sheets) to control the layout, positioning, and styling of elements on a webpage. CSS provides more flexibility, cleaner code, and better accessibility for modern web design.

Browser Support

All modern browsers support the colspan and rowspan attributes. Tables render the same on most devices.

FAQs on HTML Table Colspan & Rowspan

What does the colspan attribute do?

It makes one cell span more than one column.

What does the rowspan attribute do?

It makes one cell span more than one row.

Is there a limit to how many rows or columns can be spanned?

There’s no strict limit to how many rows or columns a cell can span in HTML. However, it's important to focus on clarity and usability. Overusing large spans can make tables harder to understand and navigate, especially for users with accessibility needs. Aim for simple, readable layouts.

Should I use tables for page layout?

No. Use tables only for showing data. Use CSS methods like Flexbox or Grid for layout.