Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить атрибут colspan?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Атрибут `colspan` в HTML використовується в тегах `<td>` або `<th>` для **об'єднання кількох стовпців таблиці в одну комірку**.

Тобто він визначає, **на скільки стовпців має розтягуватися ця комірка**.

---

### Основне призначення

Якщо в таблиці потрібно зробити одну комірку, яка охоплює кілька сусідніх колонок, використовують `colspan`.

---

### Приклад:

```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>
```

Тут комірка з текстом «Bread (2 loaves)» об'єднує **два стовпці**: «Item» і «Quantity».

---

### Приклад з числовим значенням:

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

Ця комірка об'єднає **три стовпці** в один широкий.

---

### Можна використовувати і в заголовках:

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

---

### Важливо:

- Значення `colspan` - це **ціле число** (наприклад, `colspan="2"`).
- Типове значення дорівнює **1** (комірка займає лише один стовпець).
- Якщо вказати неправильне значення, таблиця може "з'їхати" - порушиться вирівнювання стовпців.

---

### Різниця з `rowspan`:

| Атрибут | Що робить | Напрямок |
|---|---|---|
| `colspan` | Об'єднує стовпці | Горизонтально |
| `rowspan` | Об'єднує рядки | Вертикально |

---

### Висновок:

Атрибут `colspan` об'єднує кілька **стовпців** у таблиці, дозволяючи зробити одну широку комірку.
Він потрібен для оформлення підсумкових рядків, заголовків або будь-яких випадків, де дані займають кілька колонок.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати204 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.