HtmlHow-ToBeginner · 3 min read

How to Use Colspan in HTML Tables: Simple Guide

Use the colspan attribute inside a <td> or <th> tag to make a cell span across multiple columns in an HTML table. Set colspan to the number of columns you want the cell to cover.

📐

Syntax

The colspan attribute is added inside a table cell tag like <td> or <th>. It takes a number value that tells the browser how many columns the cell should stretch across.

<td colspan="number">: A table data cell spanning multiple columns.
<th colspan="number">: A header cell spanning multiple columns.

html

<table>
  <tr>
    <td colspan="2">Cell spanning 2 columns</td>
    <td>Normal cell</td>
  </tr>
</table>

Output

A table row with one cell spanning two columns and one normal cell.

💻

Example

This example shows a table where the first row has a cell that spans three columns, creating a header that stretches across the entire table width.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colspan Example</title>
  <style>
    table { border-collapse: collapse; width: 50%; }
    th, td { border: 1px solid #333; padding: 0.5rem; text-align: center; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th colspan="3">Monthly Sales Report</th>
    </tr>
    <tr>
      <th>Product</th>
      <th>January</th>
      <th>February</th>
    </tr>
    <tr>
      <td>Apples</td>
      <td>150</td>
      <td>200</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>100</td>
      <td>180</td>
    </tr>
  </table>
</body>
</html>

Output

A table with a header cell spanning all three columns and rows showing product sales for January and February.

⚠️

Common Pitfalls

Common mistakes when using colspan include:

Setting colspan to a number larger than the total columns in the table row, which breaks the layout.
Forgetting to adjust other cells in the same row, causing uneven columns.
Using colspan on rows that have inconsistent column counts, which can confuse browsers.

Always count your columns carefully and test your table in a browser.

html

<!-- Wrong: colspan exceeds total columns -->
<table border="1">
  <tr>
    <td colspan="5">Too wide</td>
    <td>Extra cell</td>
  </tr>
</table>

<!-- Right: colspan fits total columns -->
<table border="1">
  <tr>
    <td colspan="3">Correct width</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Output

First table breaks layout because colspan is too large; second table displays correctly with colspan matching columns.

📊

Quick Reference

Attribute	Description	Example
colspan	Makes a cell span multiple columns		Spans 2 columns
Used in	Inside	or	tags	Header
Value	Number of columns to span (integer)	colspan="4"
Default	1 (no spanning)	No colspan attribute

✅

Key Takeaways

Use the colspan attribute inside or to merge cells horizontally.

Set colspan to the exact number of columns you want the cell to cover.

Ensure colspan does not exceed the total columns in the table row.

Adjust other cells in the row to keep the table layout consistent.

Test your table in a browser to confirm the layout looks correct.