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:

Item	Details
T-Shirt	Size	Color

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:

Item	Qty	@	Price
SitePoint Paperclips	100	1.15	115.00
SitePoint Paper	10	45.99	459.90
Subtotal			574.90

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:

Student	Math	Science
John Doe	90%	85%
	Top Performer

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:

Programming Language	Framework
JavaScript	Express.js
	Angular
	Next.js
PHP	Laravel
	Symfony

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:

Life Expectancy		Gender
Men	Women	Men	Women
82	85	78	81

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:

Item	Qty	Price
Notebook	2	$5.00
Total		$10.00

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:

Student	Subject	Score
Alice	Math	95
	Science	90

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:

Team Performance Overview

Team	Q1		Q2
Member	Tasks	Issues	Tasks	Issues
Team A	25	20	30	18
	28	22	35	25
Team B	22	18	28	20
	20	15	25	16
	25	20	30	22

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.