Об'єднання комірок таблиці в HTML

8.1 Об'єднання комірок по горизонталі

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

Атрибут colspan

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

Приклад використання:

Уяви, що у тебе є таблиця з трьома стовпцями, і ти хочеш, щоб перша комірка в рядку займала два стовпці. Ти використовуєш colspan="2", щоб об'єднати ці дві комірки. Це корисно для створення заголовків, які охоплюють декілька стовпців, або для об'єднання даних, які стосуються декількох категорій.

    
      <table border="1">
        <tr>
          <th>Ім'я</th>
          <th>Вік</th>
          <th>Місто</th>
        </tr>
        <tr>
          <td>Аліса</td>
          <td>25</td>
          <td>Лондон</td>
        </tr>
        <tr>
          <td colspan="2">Разом</td>
          <td>2 записи</td>
        </tr>
      </table>
    
  

8.2 Об'єднання комірок по вертикалі

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

Приклад використання:

Припустимо, що у тебе є таблиця з трьома рядками, і ти хочеш, щоб перша комірка у стовпці займала два рядки. Ти використовуєш rowspan="2", щоб об'єднати ці дві комірки. Це корисно для створення таблиць, де одна категорія даних стосується декількох рядків, таких як об'єднані заголовки або зведені дані.

    
      <table border="1">
        <tr>
          <th>Ім'я</th>
          <th>Проект</th>
          <th>Місто</th>
        </tr>
        <tr>
          <td rowspan="2">Аліса</td>
          <td>Проект А</td>
          <td>Лондон</td>
        </tr>
        <tr>
          <td>Проект Б</td>
          <td>Батумі</td>
        </tr>
      </table>
    
  

8.3 Пояснення роботи

Як працюють colspan і rowspan

Горизонтальне об'єднання (colspan): уяви, що ти створюєш таблицю розкладу, де один курс проводиться у декількох аудиторіях. Ти можеш об'єднати комірки за допомогою colspan, щоб вказати, що один курс охоплює два часи.

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

Практичні приклади

Створення заголовків, що охоплюють декілька стовпців: якщо у тебе є таблиця з різними категоріями даних, і ти хочеш створити заголовок, що охоплює декілька стовпців, використовуй colspan. Наприклад, заголовок "Інформація про співробітників" може охоплювати стовпці "Ім'я", "Вік" і "Відділ".

Об'єднання даних по вертикалі: якщо у тебе є дані, які потрібно об'єднати по вертикалі, наприклад, декілька записів для однієї й тієї ж людини чи об'єкта, використовуй rowspan. Наприклад, якщо у тебе є інформація про проект, і один проект займає декілька рядків (наприклад, фази проекту), об'єднай рядки за допомогою rowspan.

8.4 Приклади

Уяви, що у тебе є таблиця, яка показує співробітників і їхню участь у різних проектах:

• Співробітники: Іван, Марія, Петро.
• Проекти: Проект А, Проект B.

Ти хочеш об'єднати комірки, щоб показати, що Іван та Марія працюють у двох проектах одночасно:

    
<table border="1">
    <tr>
        <th>Ім'я</th>
        <th>Проект А</th>
        <th>Проект Б</th>
        <th>Місто</th>
    </tr>
    <tr>
        <td>Іван</td>
        <td colspan="2">Так</td>
        <td>Лондон</td>
    </tr>
    <tr>
        <td>Марія</td>
        <td colspan="2">Так</td>
        <td>Лондон</td>
    </tr>
    <tr>
        <td>Петро</td>
        <td>Так</td>
        <th>Ні</th>
        <td>Рим</td>
    </tr>
</table>
    
  

Або, якщо ти хочеш показати, що Іван працює над двома проектами:

    
      <table border="1">
        <tr>
          <th>Ім'я</th>
          <th>Проект</th>
          <th>Місто</th>
        </tr>
        <tr>
          <td rowspan="2">Іван</td>
          <td>Проект А</td>
          <td>Лондон</td>
        </tr>
        <tr>
          <!-- empty -->
          <td>Проект В</td>
          <td>Лондон</td>
        </tr>
        <tr>
          <td>Сергій</td>
          <td>Проект С</td>
          <td>Рим</td>
        </tr>
      </table>
    
  

Я спеціально розмістив коментар на місці комірки, яку «з'їло» розширення сусідньої. Так краще зрозуміло, де будуть відображатися решта.