HTML Table Colspan - Web4learners

The HTML colspan attribute is used to make a table cell span across two or more columns. It allows you to combine multiple columns into a single cell, which is useful when creating grouped headings, summary rows, and structured reports.

You can use colspan with the <td> and <th> elements in an HTML table. The value specifies how many columns the cell should occupy.

In this tutorial, you will learn how to use the HTML colspan attribute, create merged table cells, combine column headings, and build tables with practical examples.

What Is HTML Colspan?

The colspan attribute specifies the number of columns a table cell should span. It is commonly used when a heading or piece of information needs to cover multiple columns.

For example, you can use colspan="2" to make a header cell extend across two columns.

<table>
  <tr>
    <th colspan="2">Student Information</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>21</td>
  </tr>
</table>

In this example, the Student Information heading spans two columns because its colspan value is 2.

HTML Colspan Syntax

The colspan attribute is written inside a <td> or <th> opening tag.

The basic syntax is:

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

You can also use it with a header cell:

<th colspan="number">Heading</th>

Replace number with the number of columns the cell should occupy.

For example, colspan="3" makes the cell span three columns.

HTML Colspan Example

The following example demonstrates how to combine three columns into one heading cell.

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

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

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

    th {
      background-color: #0878d1;
      color: white;
    }
  </style>
</head>
<body>

  <h2>Student Marks</h2>

  <table>
    <tr>
      <th colspan="3">Student Information</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Course</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>21</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>22</td>
      <td>CSS</td>
    </tr>
  </table>

</body>
</html>

The first row contains a single header cell that occupies three columns. The second row contains the three individual column headings.

The CSS styles the table with borders, padding, and a blue header background. These styles are optional and do not affect how colspan works.

HTML Colspan with Two Columns

You can use colspan="2" when a cell needs to occupy two columns.

<table>
  <tr>
    <th colspan="2">Product Details</th>
  </tr>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>₹800</td>
  </tr>
</table>

The Product Details heading spans two columns. This is useful when you want to add a common heading above related information.

HTML Colspan with Three Columns

To make a cell span three columns, set the attribute value to 3.

<table>
  <tr>
    <th colspan="3">Employee Report</th>
  </tr>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Rahul</td>
    <td>IT</td>
  </tr>
</table>

Here, the Employee Report heading extends across the three columns defined in the table.

HTML Colspan for Table Headings

The colspan attribute is often used with <th> to create a heading that groups several columns together.

<table>
  <tr>
    <th rowspan="1">Student</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>English</th>
    <th>Maths</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>85</td>
    <td>92</td>
  </tr>
</table>

In this example, the Marks heading spans two columns. This groups the English and Maths columns under one heading.

The rowspan="1" attribute on Student is unnecessary because a cell already spans one row by default. You can simply write <th>Student</th> instead.

HTML Colspan for Table Totals

The colspan attribute is useful for creating summary rows in tables. For example, you can combine the first two columns and display a total in the last column.

<table>
  <tr>
    <th>Product</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>2</td>
    <td>₹1,600</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>3</td>
    <td>₹1,200</td>
  </tr>
  <tr>
    <th colspan="2">Total</th>
    <td>₹2,800</td>
  </tr>
</table>

The Total cell spans the first two columns, while the final cell displays the total price.

This approach is commonly used in invoices, shopping carts, and financial reports.

HTML Colspan with CSS Styling

You can combine colspan with CSS to make grouped headings and summary rows easier to identify.

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

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

  th {
    background-color: #0878d1;
    color: white;
  }

  .summary {
    background-color: #e8f2ff;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th colspan="3">Sales Report</th>
  </tr>
  <tr>
    <th>Product</th>
    <th>Quantity</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>2</td>
    <td>₹1,00,000</td>
  </tr>
  <tr class="summary">
    <td colspan="2">Total Sales</td>
    <td>₹1,00,000</td>
  </tr>
</table>

The colspan attribute controls how cells span columns, while CSS controls their appearance. The summary class highlights the total row.

Difference Between Colspan and Rowspan

The colspan and rowspan attributes both allow table cells to occupy more than one grid position, but they work in different directions.

Feature	`colspan`	`rowspan`
Purpose	Spans multiple columns	Spans multiple rows
Direction	Horizontal	Vertical
Example	`colspan="2"`	`rowspan="2"`
Common use	Grouped headings and totals	Shared labels across rows

Use colspan when a cell needs to extend horizontally across columns. Use rowspan when it needs to extend vertically across rows.

Common HTML Colspan Mistakes

Avoid these common mistakes when using colspan:

Forgetting to specify the number of columns the cell should span.
Using a colspan value that does not match the intended table structure.
Adding extra cells to a row without accounting for columns already occupied by a spanning cell.
Confusing colspan with rowspan.
Using merged cells unnecessarily, making complex tables harder to understand.
Assuming colspan automatically styles the cell. CSS is still required for colors, borders, and spacing.

HTML Colspan Best Practices

Follow these practices when creating tables with colspan:

Use meaningful headings for grouped columns.
Set the correct number of columns for each spanning cell.
Keep the table structure consistent across rows.
Use CSS to style grouped headings and summary rows.
Avoid excessive cell merging when a simpler table structure would be easier to understand.
Consider accessibility when creating tables with multiple levels of headings.

HTML Colspan Exercises

Practice the following exercises to improve your understanding of the colspan attribute.

Exercise 1: Create a table with three columns and a heading that spans all three columns.

Exercise 2: Create a product table where the Product Details heading spans two columns.

Exercise 3: Create a student marks table with a Marks heading spanning the English and Mathematics columns.

Exercise 4: Create an invoice table with a Total cell spanning the first two columns.

Exercise 5: Use CSS to style a table with grouped headings, borders, padding, and a highlighted total row.