Blog

HTML tables are used to display information in rows and columns. They are useful for presenting student marks, employee details, product prices, schedules, and other structured data. Sometimes, you may want one table cell to cover two or more columns instead of occupying just one column. HTML provides a simple solution for this: the colspan attribute.

In this tutorial, you will learn what colspan means, how it works, and how to use it to merge columns in an HTML table. We will also explore a complete working example and common mistakes beginners should avoid.

What Is Colspan in HTML?

The colspan attribute is used with the HTML <td> and <th> elements to make a cell span across multiple columns.

For example, if you write colspan="2", the cell occupies the space of two columns. If you write colspan="3", the cell spans three columns.

Basic syntax:

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

In this example, the heading “Student Information” covers two columns.

How to Merge Columns Using Colspan

Follow these steps to merge columns in an HTML table:

1. Create a table using the <table> tag.
2. Add a row using the <tr> tag.
3. Create a table cell with <td> or a heading cell with <th>.
4. Add the colspan attribute and specify the number of columns to span.
5. Add the remaining rows and cells while keeping the table structure aligned.

Complete HTML Code Example

The following example demonstrates how to merge two columns in a table using colspan.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Colspan Example</title>

  <style>
    table {
      width: 70%;
      border-collapse: collapse;
      margin: 30px auto;
      font-family: Arial, sans-serif;
    }

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

    th {
      background-color: #e6f0ff;
    }
  </style>
</head>
<body>

  <table>
    <tr>
      <th colspan="2">Student Information</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Class</th>
    </tr>
    <tr>
      <td>Ali</td>
      <td>10th</td>
    </tr>
    <tr>
      <td>Sara</td>
      <td>9th</td>
    </tr>
  </table>

</body>
</html>

How This Code Works

• <!DOCTYPE html> declares the document as HTML5.
• <table> creates the table.
• <tr> defines each table row.
• <th> creates a header cell.
• <td> creates a regular data cell.
• colspan="2" makes the first heading span across two columns.
• border-collapse: collapse combines adjacent borders into a clean table layout.
• padding adds space inside each cell, while text-align: center centers the content.

Example: Merging Three Columns

You can also merge three columns by changing the value of the colspan attribute to 3.

<table border="1">
  <tr>
    <th colspan="3">Monthly Sales Report</th>
  </tr>
  <tr>
    <th>Product</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>5</td>
    <td>$500</td>
  </tr>
</table>

Here, the heading “Monthly Sales Report” spans the three columns below it. The number used in colspan should match the number of columns the cell needs to cover.

Difference Between Colspan and Rowspan

HTML provides two attributes for combining table cells: colspan and rowspan.

Use colspan when a cell needs to cover multiple columns. Use rowspan when a cell needs to cover multiple rows.

Common Mistakes to Avoid

1. Forgetting the quotation marks

Write colspan="2" for clear, conventional HTML syntax.

2. Using the wrong number

If a heading should cover three columns, use colspan="3" rather than colspan="2".

3. Adding too many cells

When a cell spans multiple columns, it already occupies those column positions. Do not add extra cells in the same row that would overlap the intended table structure.

4. Confusing colspan with CSS

colspan is an HTML attribute, not a CSS property. CSS can style the table, but the attribute controls how many columns a cell spans.

5. Forgetting accessibility

Use <th> for header cells and <td> for ordinary data cells. For complex tables, consider adding appropriate header associations so screen-reader users can understand the table.

When Should You Use Colspan?

The colspan attribute is useful in many situations, including:

• Creating a table title that spans the full table width.
• Grouping related column headings.
• Displaying a total or summary row.
• Making timetable headings cover several periods.
• Organizing financial reports and student result sheets.

Frequently Asked Questions

1. What does colspan mean in HTML?

colspan means column span. It allows a table cell to extend horizontally across two or more columns.

2. How do I merge two columns in HTML?

Add colspan="2" to the <td> or <th> element you want to expand across two columns.

3. Can I use colspan with a table heading?

Yes. You can use colspan with both <th> and <td> elements.

4. What is the difference between colspan and rowspan?

colspan spans columns horizontally, while rowspan spans rows vertically.

5. Is colspan a CSS property?

No. It is an HTML attribute. CSS is used to control the table’s appearance, such as borders, colors, spacing, and alignment.

At the end:

The HTML colspan attribute is a simple and effective way to merge columns in a table. By specifying a number such as colspan="2" or colspan="3", you can make a table cell span multiple columns and create clearer headings, summaries, and reports.

Practice with the examples in this tutorial, experiment with different column counts, and remember to keep the remaining cells aligned correctly. Once you understand colspan, creating organized HTML tables becomes much easier.