HTML Объединение ячеек

В таблицах HTML предусмотрена возможность объединения ячеек по вертикали и горизонтали, что позволяет визуально выделять заголовки или объединять данные. Это достигается с помощью специальных атрибутов: colspan и rowspan.

NAME

APRIL

2022

FIESTA
FIESTA

Горизонтальное объединение ячеек (Colspan)

Атрибут colspan позволяет одной ячейке занять несколько столбцов. Количество столбцов, которые охватывает ячейка, указывается числовым значением в атрибуте colspan.

Пример:

<table>
  <tr>
    <th colspan="2">Имя</th> <!-- объединяет два столбца -->
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Джилл</td>
    <td>Смит</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Ива</td>
    <td>Джексон</td>
    <td>57</td>
  </tr>
</table>

Примечание: Значение атрибута colspan отражает количество столбцов, на которые распространяется данная ячейка.

Вертикальное объединение ячеек (Rowspan)

Атрибут rowspan позволяет одной ячейке занимать несколько строк подряд. Значение атрибута указывает, сколько строк покрывает данная ячейка.

Пример:

<table>
  <tr>
    <th>Имя</th>
    <td>Джилл</td>
  </tr>
  <tr>
    <th rowspan="2">Телефон</th> <!-- занимает две строки -->
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>

Примечание: Значение атрибута rowspan показывает количество строк, на которые растягивается ячейка.

Атрибуты colspan и rowspan играют важную роль в формировании аккуратных и читаемых таблиц, особенно при оформлении заголовков или группировке данных. Грамотное использование этих атрибутов сделает вашу таблицу более организованной и привлекательной для пользователей.