HTML Table Colspan & Rowspan: Complete Guide with Examples

HTML Table Colspan & Rowspan

HTML tables are useful when information needs to be presented in rows and columns. Sometimes, however, a table needs a cell that covers more than one column or more than one row. This is where the HTML colspan and rowspan attributes are used.

The colspan attribute allows one table cell to span across multiple columns. The rowspan attribute allows one table cell to span across multiple rows.

These attributes are especially useful for creating structured tables such as invoices, timetables, mark sheets, financial reports, schedules, comparison tables, and other data-heavy layouts.

Understanding colspan and rowspan is important because they change the normal grid structure of an HTML table.

What Is Colspan in HTML?

colspan is an attribute used with the <td> or <th> element. It tells the browser that a table cell should extend across two or more columns.

The basic syntax is:

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

Here, colspan="2" means that the cell occupies the space of two columns.

For example:

<table border="1">
  <tr>
    <th colspan="2">Student Information</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Dibya</td>
  </tr>
</table>

In this example, the heading cell spans across two columns.

How Colspan Works

Suppose a table normally has three columns:

Name	Subject	Marks
Rahul	English	85

If you use:

<th colspan="3">Student Result</th>

the heading occupies all three columns.

The table becomes conceptually:

Student Result
Name	Subject	Marks

The blank spaces represent the area covered by the same cell.

Colspan Example with Three Columns

<table border="1">
  <tr>
    <th colspan="3">Student Result</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Mathematics</td>
    <td>90</td>
  </tr>
</table>

The first heading spans all three columns.

Colspan with Table Data

colspan can also be used with <td>.

<table border="1">
  <tr>
    <td>Product</td>
    <td>Price</td>
    <td>Quantity</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>₹500</td>
  </tr>
</table>

Here, the Total cell covers the first two columns.

What Is Rowspan in HTML?

rowspan is an HTML attribute that allows a table cell to extend vertically across multiple rows.

The basic syntax is:

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

The value 2 means that the cell occupies two rows.

For example:

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td>Mathematics</td>
  </tr>
</table>

The Name cell occupies the space of two rows.

How Rowspan Works

Consider this simple table:

Name	Subject
Rahul	English
Rahul	Mathematics

You can combine the two Rahul cells vertically by using rowspan:

<table border="1">
  <tr>
    <td rowspan="2">Rahul</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Mathematics</td>
  </tr>
</table>

The browser displays Rahul once while the cell extends across both rows.

Conceptually, it looks like:

Name	Subject
Rahul	English
	Mathematics

The blank area is part of the same Rahul cell.

Rowspan with Three Rows

A cell can span three or more rows.

<table border="1">
  <tr>
    <th rowspan="3">Science</th>
    <td>Physics</td>
  </tr>
  <tr>
    <td>Chemistry</td>
  </tr>
  <tr>
    <td>Biology</td>
  </tr>
</table>

The Science cell extends across all three rows.

Colspan vs Rowspan

The main difference is simple:

Attribute	Purpose	Direction
`colspan`	Combines multiple columns	Horizontal
`rowspan`	Combines multiple rows	Vertical

For example:

<td colspan="3">Three Columns</td>

means the cell extends horizontally across three columns.

<td rowspan="3">Three Rows</td>

means the cell extends vertically across three rows.

Using Colspan and Rowspan Together

You can use both attributes in the same table. This is useful for more complex table structures.

Example:

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Theory</th>
    <th>Practical</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>80</td>
    <td>90</td>
  </tr>
</table>

Here:

Name uses rowspan="2".
Marks uses colspan="2".
Theory and Practical form the two columns underneath Marks.

This creates a two-level table header.

A Complete Colspan and Rowspan Example

<table border="1">
  <tr>
    <th rowspan="2">Student</th>
    <th colspan="3">Marks</th>
  </tr>
  <tr>
    <th>English</th>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>85</td>
    <td>90</td>
    <td>88</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>92</td>
    <td>95</td>
    <td>91</td>
  </tr>
</table>

This is a common example of using both rowspan and colspan to create grouped table headings.

Creating a Timetable with Colspan

colspan is useful for school or college timetables.

For example:

<table border="1">
  <tr>
    <th>Day</th>
    <th>9 AM</th>
    <th>10 AM</th>
    <th>11 AM</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td colspan="2">Mathematics</td>
    <td>English</td>
  </tr>
</table>

Here, Mathematics occupies the 9 AM and 10 AM columns.

This is useful when an activity lasts longer than one time period.

Creating a Timetable with Rowspan

rowspan can be useful when the same activity or category applies to several rows.

<table border="1">
  <tr>
    <th>Day</th>
    <th>Period</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td rowspan="2">Monday</td>
    <td>1</td>
    <td>Mathematics</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Science</td>
  </tr>
</table>

The Monday cell covers both periods.

Colspan in an Invoice

An invoice is another practical use case.

<table border="1">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>2</td>
    <td>₹100</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>₹100</td>
  </tr>
</table>

The Total label covers two columns, while the final amount remains in the third column.

Colspan in Table Headers

One of the most common uses of colspan is grouping related columns.

<table border="1">
  <tr>
    <th colspan="2">Personal Details</th>
    <th colspan="2">Academic Details</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Course</th>
    <th>Marks</th>
  </tr>
</table>

This creates two logical groups:

Personal Details
Academic Details

This structure can make complex data much easier to understand.

Rowspan in Table Headers

rowspan can also make multi-level headers easier to structure.

<table border="1">
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Sales</th>
  </tr>
  <tr>
    <th>Online</th>
    <th>Store</th>
  </tr>
</table>

The Product header covers both header rows, while Sales covers two columns.

Colspan and Rowspan Values

The value of colspan or rowspan should normally be a positive integer.

For example:

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

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

The number tells the browser how many columns or rows the cell should occupy.

The following is not useful:

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

Use meaningful positive values that match the actual table structure.

How to Calculate Colspan Correctly

Suppose your table has four columns:

Column 1
Column 2
Column 3
Column 4

If one cell should cover all four columns, use:

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

If it should cover two columns, use:

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

The value should match the number of columns that the cell occupies.

How to Calculate Rowspan Correctly

Suppose a category applies to three consecutive rows:

Row 1
Row 2
Row 3

Use:

<td rowspan="3">Category</td>

The cell occupies all three rows.

Important Rule for Table Structure

When using rowspan or colspan, remember that the cell itself replaces the individual cells it spans.

For example:

<tr>
  <td rowspan="2">A</td>
  <td>B</td>
</tr>
<tr>
  <td>C</td>
</tr>

You should not add another <td> in the second row for the space already occupied by A.

Incorrect structure:

<tr>
  <td rowspan="2">A</td>
  <td>B</td>
</tr>
<tr>
  <td>A</td>
  <td>C</td>
</tr>

The second A creates an unwanted extra cell.

Colspan and the Number of Cells

Consider a table with four columns:

<tr>
  <td colspan="2">A</td>
  <td>B</td>
  <td>C</td>
</tr>

This row still occupies four columns because:

A occupies 2 columns.
B occupies 1 column.
C occupies 1 column.

Therefore:

2 + 1 + 1 = 4

This is an important concept when designing complex tables.

Combining Multiple Colspan Values

You can create several grouped cells in the same row.

<tr>
  <th colspan="2">Personal</th>
  <th colspan="3">Education</th>
</tr>

The row occupies five columns:

2 + 3 = 5

The next rows should be structured according to those five columns.

Combining Multiple Rowspan Values

You can also use multiple row-spanning cells.

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">Age</th>
    <th>Course</th>
  </tr>
  <tr>
    <th>Duration</th>
  </tr>
</table>

Both Name and Age extend through two rows.

Using Colspan and Rowspan with `<th>`

Both attributes work with table header cells.

<th colspan="2">Sales Information</th>

and:

<th rowspan="2">Product</th>

Using them with <th> is particularly useful when creating multi-level table headers.

Using Colspan and Rowspan with `<td>`

They also work with ordinary table data cells.

<td colspan="2">Total</td>

and:

<td rowspan="2">Category</td>

Use <th> for headers and <td> for ordinary data.

Colspan and Rowspan with `<thead>`, `<tbody>`, and `<tfoot>`

Modern HTML tables can be divided into logical sections.

<table>
  <thead>
    <tr>
      <th colspan="3">Student Result</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Marks</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Rahul</td>
      <td>Math</td>
      <td>90</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>90</td>
    </tr>
  </tfoot>
</table>

This gives the table a clear semantic structure.

Adding a Caption

A table can also have a <caption>.

<table>
  <caption>Student Examination Results</caption>
  <tr>
    <th colspan="2">Student Details</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Rahul</td>
  </tr>
</table>

A caption provides a title or description for the table.

Styling Colspan and Rowspan with CSS

colspan and rowspan control the table structure. CSS controls the visual appearance.

For example:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  th {
    font-weight: bold;
  }
</style>

HTML:

<table>
  <tr>
    <th colspan="3">Student Result</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
</table>

The HTML attributes determine how the cells span, while CSS determines borders, spacing, alignment, fonts, and other visual properties.

Do Not Use Colspan for Page Layout

HTML tables should generally be used for tabular data, not for designing the overall layout of a webpage.

Avoid using tables like this:

<table>
  <tr>
    <td>Website Header</td>
  </tr>
  <tr>
    <td>Website Content</td>
  </tr>
</table>

For page layout, use modern CSS techniques such as:

CSS Grid
Flexbox
Normal document flow

Tables are best when the content itself represents relationships between rows and columns.

Colspan and Rowspan in Responsive Tables

Complex tables with many merged cells can be difficult to display on small screens.

A common approach is to allow horizontal scrolling:

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>

.table-wrapper {
  overflow-x: auto;
}

table {
  min-width: 600px;
}

This allows users to scroll horizontally when the table is wider than the screen.

For highly complex data, consider whether a different presentation would be easier to use on mobile devices.

Accessibility Considerations

Correct table structure is important for people using screen readers and other assistive technologies.

Use <th> for genuine header cells instead of making every cell a <td>.

For example:

<table>
  <thead>
    <tr>
      <th rowspan="2">Product</th>
      <th colspan="2">Sales</th>
    </tr>
    <tr>
      <th>Online</th>
      <th>Store</th>
    </tr>
  </thead>
</table>

For more complex tables, you may also need appropriate header relationships using attributes such as scope or headers and id.

For example:

<th scope="col">Product</th>

and:

<th scope="row">Notebook</th>

The goal is to make relationships between headers and data understandable to both users and assistive technologies.

Using `scope` with Spanning Headers

For simple tables, scope can clarify whether a header describes a column or row.

<table>
  <tr>
    <th scope="col" rowspan="2">Product</th>
    <th scope="col" colspan="2">Sales</th>
  </tr>
  <tr>
    <th scope="col">Online</th>
    <th scope="col">Store</th>
  </tr>
</table>

For very complicated tables, more explicit header associations may be appropriate.

Common Mistakes with Colspan

Mistake 1: Using the Wrong Number

Incorrect:

<tr>
  <td colspan="3">Total</td>
  <td>₹500</td>
</tr>

If the table only has three columns, this row may exceed the intended structure.

Always calculate the total number of columns carefully.

Mistake 2: Adding Extra Cells

If a cell has:

<td colspan="2">Total</td>

do not add another <td> for the column already occupied by that cell.

Mistake 3: Forgetting the Spanned Space

When using rowspan, remember that the spanning cell continues into subsequent rows.

Mistake 4: Using Tables for Layout

Do not use colspan and rowspan as a replacement for CSS layout systems.

Mistake 5: Poor Header Semantics

Avoid creating table headers using ordinary <td> elements when the cells are actually headers.

Prefer:

<th>Product</th>

instead of:

<td>Product</td>

Common Mistakes with Rowspan

A frequent mistake is forgetting that the following row has fewer cells because the previous cell already occupies part of it.

For example:

<tr>
  <td rowspan="2">India</td>
  <td>Odisha</td>
</tr>
<tr>
  <td>Bhubaneswar</td>
</tr>

The second row needs only one additional cell because the first column is already occupied by India.

When Should You Use Colspan?

Use colspan when a cell logically belongs to multiple columns.

Common examples include:

Grouped table headings
Totals
Subtotals
Invoice summaries
Timetables
Category labels
Report sections
Multi-column titles

For example:

<th colspan="4">Quarterly Sales</th>

is appropriate when the heading describes four related columns.

When Should You Use Rowspan?

Use rowspan when a cell logically applies to multiple rows.

Common examples include:

Categories
Dates
Departments
Product groups
Timetables
Multi-level reports
Repeated labels

For example:

<td rowspan="3">Electronics</td>

is useful when three consecutive rows contain electronics products.

Colspan and Rowspan in Real-World Tables

These attributes are often found in:

School Mark Sheets

A subject category may cover several columns.

College Timetables

A lecture that lasts two periods can span two columns.

Invoices

A total or description can span several columns.

Financial Reports

A category can cover several rows.

Product Comparison Tables

A category heading can span multiple product columns.

Sports Schedules

A tournament stage can span multiple rows or columns.

Business Reports

Grouped headers can organize related measurements.

HTML Table Colspan Example

Here is a simple complete example:

<table>
  <tr>
    <th colspan="3">Employee Details</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Marketing</td>
    <td>₹40,000</td>
  </tr>
</table>

The Employee Details heading spans all three columns.

HTML Table Rowspan Example

<table>
  <tr>
    <th rowspan="2">Department</th>
    <th>Employee</th>
  </tr>
  <tr>
    <th>Salary</th>
  </tr>
</table>

The Department header spans both rows.

Combined Practical Example

<table>
  <caption>Employee Performance</caption>

  <thead>
    <tr>
      <th rowspan="2">Employee</th>
      <th colspan="2">Performance</th>
    </tr>
    <tr>
      <th>Sales</th>
      <th>Rating</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Rahul</th>
      <td>₹50,000</td>
      <td>Excellent</td>
    </tr>
    <tr>
      <th scope="row">Priya</th>
      <td>₹45,000</td>
      <td>Good</td>
    </tr>
  </tbody>
</table>

This example demonstrates a clean combination of semantic HTML, rowspan, and colspan.

Difference Between Colspan and CSS

It is important to understand that colspan is an HTML table feature, not a CSS property.

This is HTML:

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

CSS can style the result:

td {
  padding: 10px;
  text-align: center;
}

CSS cannot simply replace the semantic table relationship created by colspan.

Difference Between Rowspan and CSS

Similarly, rowspan is part of HTML table structure:

<td rowspan="3">Category</td>

CSS can change the appearance, but it does not replace the semantic meaning of a cell spanning multiple table rows.

Are Colspan and Rowspan Still Used in HTML5?

Yes. Both colspan and rowspan remain valid and useful HTML table attributes.

HTML5 did not remove them. They continue to be important for representing complex tabular relationships.

Are Colspan and Rowspan Case-Sensitive?

HTML attribute names are generally treated as ASCII case-insensitive, but modern coding conventions recommend writing them in lowercase:

<td colspan="2">

rather than:

<td COLSPAN="2">

Lowercase HTML is easier to read and follows common modern style.

Can Colspan and Rowspan Be Used Together?

Yes.

For example:

<table>
  <tr>
    <th rowspan="2">Category</th>
    <th colspan="2">Products</th>
  </tr>
  <tr>
    <th>Product A</th>
    <th>Product B</th>
  </tr>
</table>

This is one of the most useful patterns for creating hierarchical table headers.

Can a Cell Span the Entire Table?

Yes. If a table has five columns, you can use:

<th colspan="5">Report</th>

The cell will span all five columns.

This is commonly used for table titles or section headings.

Can a Cell Span Multiple Rows and Columns?

A cell can use both attributes:

<td colspan="2" rowspan="2">Content</td>

This cell occupies a rectangular area covering two columns and two rows.

This can be useful, but it also makes the table structure more complex. Use it only when the underlying data genuinely requires it.

Important HTML Table Best Practices

For clean and maintainable tables:

Use tables for tabular data.
Use <th> for header cells.
Use <td> for data cells.
Use colspan for horizontal cell spanning.
Use rowspan for vertical cell spanning.
Carefully calculate the number of occupied columns and rows.
Use <thead>, <tbody>, and <tfoot> where appropriate.
Add <caption> when a table needs a clear title.
Use scope for simple header relationships.
Make complex tables accessible.
Use CSS for presentation and styling.
Consider mobile usability for wide tables.
Avoid unnecessary merged cells.
Keep the table structure logical.
Test complex tables with assistive technologies when accessibility is important.

Frequently Asked Questions

What is `colspan` in HTML?

colspan is an HTML table-cell attribute that makes one <td> or <th> occupy multiple columns.

What is `rowspan` in HTML?

rowspan makes one <td> or <th> occupy multiple rows.

What is the difference between `colspan` and `rowspan`?

colspan spans columns horizontally, while rowspan spans rows vertically.

Can `colspan` be used with `<th>`?

Yes. Both <th> and <td> support colspan.

Can `rowspan` be used with `<th>`?

Yes. A <th> can use rowspan to span multiple rows.

Can I use `colspan` and `rowspan` together?

Yes. For example:

<td colspan="2" rowspan="2">Content</td>

What does `colspan="3"` mean?

It means that the cell occupies three columns.

What does `rowspan="3"` mean?

It means that the cell occupies three rows.

Can I use `colspan` for webpage layout?

You technically can construct layouts with tables, but you should not use tables for general page layout. Use CSS Grid or Flexbox instead.

Does CSS replace `colspan`?

No. colspan defines the semantic structure of a table. CSS is primarily used to style that structure.

Does `rowspan` work with HTML5?

Yes. rowspan remains a valid HTML table attribute.

Why is my table alignment broken after using `rowspan`?

Usually, the problem occurs because the number of cells in subsequent rows was calculated incorrectly. A cell using rowspan already occupies a position in the following rows, so you should not add another cell for that occupied position.

Why is my table too wide on mobile?

Complex tables can naturally require more horizontal space. A common solution is to place the table inside a horizontally scrollable container.

Final Thoughts

HTML colspan and rowspan are simple attributes, but they are extremely useful when a table has a more complicated structure than a basic grid.

Use colspan when one cell needs to cover multiple columns. Use rowspan when one cell needs to cover multiple rows. You can also combine both attributes to create multi-level headers, grouped data, schedules, invoices, reports, and other structured tables.

The most important rule is to think about the table as a grid. Every cell occupies one or more positions in that grid. When a cell spans multiple positions, those positions should not be filled again with additional cells.

When combined with semantic elements such as <th>, <thead>, <tbody>, <tfoot>, <caption>, and appropriate accessibility attributes, colspan and rowspan can help you create tables that are not only visually organized but also meaningful and easier to understand.