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

HTMLJunior~1 хв читання

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

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

rowspan визначає, на скільки рядків вниз буде розтягуватися комірка. Якщо звичайна комірка займає один рядок, то з rowspan вона може об'єднувати два, три і більше.

Приклад:

html

<table border="1">
  <tr>
    <th>Name</th>
    <th>City</th>
  </tr>
  <tr>
    <td rowspan="2">Maria</td>
    <td>Warsaw</td>
  </tr>
  <tr>
    <td>Berlin</td>
  </tr>
</table>

Тут комірка з ім'ям «Maria» об'єднує два рядки і розташовується зліва від двох різних міст.

Пояснення:

Атрибут rowspan="2" каже браузеру: ця комірка повинна займати два рядки поспіль.
Аналогічно rowspan="3" - на три рядки, і т.д.

Приклад у підсумковій таблиці:

html

<table border="1">
  <tr>
    <th rowspan="2">Category</th>
    <th colspan="2">Metrics</th>
  </tr>
  <tr>
    <th>2024</th>
    <th>2025</th>
  </tr>
  <tr>
    <td>Income</td>
    <td>1.2M</td>
    <td>1.5M</td>
  </tr>
</table>

Тут rowspan="2" об'єднує комірку «Category» по вертикалі, а colspan="2" об'єднує заголовки по горизонталі.

Важливо:

Значення rowspan - ціле додатне число (наприклад, rowspan="3").
Типово - 1 (комірка не об'єднується).
Якщо задати занадто велике значення, може порушитися структура таблиці.

Різниця між `colspan` і `rowspan`:

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

Висновок:

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

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

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

Premium

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

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

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

#Приклад:

#Пояснення:

#Приклад у підсумковій таблиці:

#Важливо:

#Різниця між colspan і rowspan:

#Висновок: