HTML colspan Attribute

Introduction

In HTML, the colspan attribute is used within a table to define the number of columns a cell should span horizontally. This attribute is particularly useful when you want to create table structures with merged or extended cells, providing a flexible way to organize and present tabular data.

What You’ll Learn

Purpose of colspan

The primary purpose of the colspan attribute is to control the visual layout of tables by allowing a single cell to cover multiple columns. This can be beneficial for creating more visually appealing and readable tables.

📝 Syntax

Add colspan to a <td> or <th> element with a positive integer:

<td colspan="2">Spans two columns</td>
<th colspan="3">Section header</th>

Syntax Rules

• Valid on <td> and <th> elements inside a <table>.
• Value must be a positive integer ≥ 1.
• A spanned cell occupies multiple column slots; omit extra cells in that row.
• Each row’s effective column count must stay consistent across the table.

💎 Values

The colspan attribute accepts a numeric value, specifying the number of columns a cell should span. The value must be a positive integer greater than or equal to 1. If the value is set to 1, the cell spans only one column.

• colspan="1" — Default; single column (no merge).
• colspan="2" — Cell covers two adjacent columns.
• colspan="3" — Cell covers three columns, common for section headers.

<tr>
  <th colspan="3">Quarterly Report</th>
</tr>
<tr>
  <td>Jan</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>

Applicable Elements

Examples Gallery

Basic colspan merge and dynamic JavaScript colSpan adjustment.

<table border="1">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td colspan="2">Row 1, Cell 3 and 4 (colspan=2)</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
    <td>Row 2, Cell 4</td>
  </tr>
</table>

<td id="dynamicCell">This cell will span 3 columns</td>

<script>
  // Dynamically set colspan for a table cell
  document.getElementById("dynamicCell").colSpan = 3;
</script>

♿ Accessibility

• Use proper headers — Pair merged header cells with scope="colgroup" or scope="col" where appropriate.
• Keep structure logical — Screen readers rely on consistent row and column relationships.
• Do not over-merge — Excessive colspan can confuse assistive technology and sighted users alike.
• Caption your table — Use <caption> to describe the table purpose.
• Test with screen readers — Verify that merged cells still announce correct header associations.

💡 Best Practices

• Use the colspan attribute thoughtfully to enhance the visual structure of your tables without sacrificing clarity.
• Avoid excessive use of colspan as it may make your table more complex and harder to understand.
• Always test your tables across different browsers to ensure consistent rendering.