Suggest an edit

Improve this article

Refine the answer for “What does the colspan attribute do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `colspan` attribute in HTML is used on `<td>` or `<th>` tags to **merge several table columns into one cell**.

In other words, it defines **how many columns a given cell should span**.

---

### Main purpose

When a table needs one cell that spans several adjacent columns, `colspan` is used.

---

### Example:

```html
<table border="1">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td colspan="2">Bread (2 loaves)</td>
    <td>$80</td>
  </tr>
</table>
```

Here the cell with the text "Bread (2 loaves)" merges **two columns**: "Item" and "Quantity".

---

### Example with a numeric value:

```html
<td colspan="3">Total: $1500</td>
```

This cell will merge **three columns** into one wide cell.

---

### It can also be used in headers:

```html
<th colspan="2">Contact information</th>
```

---

### Important:

- The `colspan` value is an **integer** (for example, `colspan="2"`).
- The default value is **1** (the cell occupies only one column).
- Specifying the wrong value can make the table "shift" - breaking the alignment of the columns.

---

### Difference from `rowspan`:

| Attribute | What it does | Direction |
|---|---|---|
| `colspan` | Merges columns | Horizontal |
| `rowspan` | Merges rows | Vertical |

---

### Conclusion:

The `colspan` attribute merges several **columns** in a table, allowing you to create one wide cell.
It is used for total rows, headers, or any case where data spans several columns.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts229 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.