Главная страница » HTML » 12. Объединение ячеек внутри строк и столбцов

12. Объединение ячеек внутри строк и столбцов

Объединение ячеек (колонок и строк) в HTML-таблицах — это важный прием, который помогает организовать и визуально улучшить представление табличных данных. В этом уроке мы подробно рассмотрим, как использовать атрибуты colspan и rowspan для объединения ячеек. Мы также обсудим распространенные ошибки и предложим тестовое задание для закрепления материала.

Основы объединения ячеек

Объединение ячеек по горизонтали (colspan)

Атрибут colspan используется для объединения нескольких ячеек в одну по горизонтали. Например, объединение двух ячеек в строке:

				
					<table>
  <tr>
    <th colspan="2">Объединенная ячейка</th>
  </tr>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

Объединение ячеек по вертикали (rowspan)

Атрибут rowspan используется для объединения нескольких ячеек в одну по вертикали. Например, объединение двух ячеек в столбце:

				
					<table>
  <tr>
    <th rowspan="2">Объединенная ячейка</th>
    <td>Ячейка 1</td>
  </tr>
  <tr>
    <td>Ячейка 2</td>
  </tr>
</table>

Комбинированное объединение ячеек

Можно комбинировать атрибуты colspan и rowspan для создания более сложных таблиц.

Пример

				
					<table>
  <tr>
    <th colspan="2" rowspan="2">Объединенная ячейка</th>
    <th>Заголовок 3</th>
  </tr>
  <tr>
    <td>Ячейка 2.1</td>
  </tr>
  <tr>
    <td>Ячейка 3.1</td>
    <td>Ячейка 3.2</td>
    <td>Ячейка 3.3</td>
  </tr>
</table>

Примеры таблиц с объединением ячеек

Пример 1: Объединение колонок

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Объединение колонок</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th colspan="3">Заголовок объединенной ячейки</th>
    </tr>
    <tr>
      <td>Ячейка 1.1</td>
      <td>Ячейка 1.2</td>
      <td>Ячейка 1.3</td>
    </tr>
    <tr>
      <td>Ячейка 2.1</td>
      <td>Ячейка 2.2</td>
      <td>Ячейка 2.3</td>
    </tr>
  </table>
</body>
</html>

Пример 2: Объединение строк

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Объединение строк</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th rowspan="2">Заголовок объединенной ячейки</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
    <tr>
      <td>Ячейка 2.1</td>
      <td>Ячейка 2.2</td>
    </tr>
    <tr>
      <td>Ячейка 3.1</td>
      <td>Ячейка 3.2</td>
      <td>Ячейка 3.3</td>
    </tr>
  </table>
</body>
</html>

Распространённые ошибки

Некорректное использование colspan и rowspan: Убедитесь, что значения атрибутов корректны и соответствуют количеству ячеек, которые вы хотите объединить.

Несоответствие количества ячеек в строках: При объединении ячеек следите за тем, чтобы общее количество ячеек в строках и столбцах совпадало. Иначе таблица может отображаться некорректно.

Отсутствие закрывающих тегов: Не забывайте закрывать все теги <td>, <th>, <tr>, и <table>.

Заключение

Объединение ячеек — это полезный прием для создания более структурированных и читаемых таблиц. Использование атрибутов colspan и rowspan позволяет легко комбинировать ячейки по горизонтали и вертикали. Важно правильно использовать эти атрибуты и избегать распространенных ошибок для создания качественных и профессионально выглядящих таблиц.

Тестовое задание

Создайте HTML-документ, который включает следующие элементы:

Таблицу с заголовками для четырех столбцов и четырех строк данных.
Во второй строке объедините ячейки второго и третьего столбцов.
В третьей строке объедините ячейки первого столбца и строки.
Примените CSS для добавления границ и отступов, а также сделайте заголовки столбцов с фоновым цветом.

Примерное решение:

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Объединение ячеек</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Заголовок 1</th>
        <th>Заголовок 2</th>
        <th>Заголовок 3</th>
        <th>Заголовок 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ячейка 1.1</td>
        <td>Ячейка 1.2</td>
        <td>Ячейка 1.3</td>
        <td>Ячейка 1.4</td>
      </tr>
      <tr>
        <td>Ячейка 2.1</td>
        <td colspan="2">Объединенная ячейка 2.2 и 2.3</td>
        <td>Ячейка 2.4</td>
      </tr>
      <tr>
        <td rowspan="2">Объединенная ячейка 3.1 и 4.1</td>
        <td>Ячейка 3.2</td>
        <td>Ячейка 3.3</td>
        <td>Ячейка 3.4</td>
      </tr>
      <tr>
        <td>Ячейка 4.2</td>
        <td>Ячейка 4.3</td>
        <td>Ячейка 4.4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.