Объединение ячеек таблицы в 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>
    
  

Я специально разместил комментарий на месте ячейки, которую «съело» расширение соседней. Так лучше понятно, где будут отображаться остальные.

1

Задача

Модуль 1: Web Core, 3 уровень, 7 лекция

Недоступна

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

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

Открыть

1

Задача

Модуль 1: Web Core, 3 уровень, 7 лекция

Недоступна

Сочетание colspan и rowspan

Сочетание colspan и rowspan

Открыть