Skip to main content

Що робить атрибут colspan?

Атрибут 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 об'єднує кілька стовпців у таблиці, дозволяючи зробити одну широку комірку. Він потрібен для оформлення підсумкових рядків, заголовків або будь-яких випадків, де дані займають кілька колонок.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.