0Pricing
HTML Academy · Урок

colspan и rowspan для объединения ячеек

Объединяйте ячейки по столбцам и строкам

«colspan и rowspan для объединения ячеек» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое объединение ячеек?

По умолчанию каждая ячейка таблицы занимает одну строку и один столбец. Объединение позволяет растянуть ячейку на несколько столбцов или строк:

  • colspan — объединение нескольких столбцов
  • rowspan — объединение нескольких строк

colspan

Атрибут colspan позволяет ячейке занимать несколько столбцов:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

Атрибут rowspan позволяет ячейке занимать несколько строк:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan и rowspan вместе

Можно объединить оба атрибута в одной ячейке:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Учёт объединённых ячеек

Если ячейка занимает несколько столбцов, не указывайте эти столбцы в объединённых строках:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Распространённые варианты объединения

Примеры объединения ячеек в реальных таблицах:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan для объединённых заголовков строк

Используйте rowspan для создания объединённых подписей групп строк:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 — ячейка на всю ширину

Значение colspan, равное 0, растягивает ячейку на все оставшиеся столбцы в группе столбцов (используется редко):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Объединение ячеек и доступность

Для сложных таблиц с объединёнными ячейками нужны атрибуты scope и headers, чтобы программы чтения с экрана правильно их обрабатывали:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Отладка проблем с объединением ячеек

Распространённые ошибки при объединении ячеек:

  • Слишком много или слишком мало ячеек в строке после объединения
  • rowspan выходит за пределы количества строк
  • Перекрывающиеся объединения (две ячейки претендуют на одну позицию)

Если таблица отображается неправильно, используйте браузерные DevTools, чтобы проверить её структуру.

CSS для объединённых ячеек

Стилизуйте ячейки, занимающие несколько столбцов или строк:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Печать и объединение ячеек

В современных браузерах объединённые ячейки печатаются правильно. Однако:

  • Если строки thead занимают несколько столбцов, они корректно повторяются на каждой напечатанной странице
  • rowspan внутри tbody не повторяется после разрыва страницы
  • Перед выпуском проверьте сложные таблицы в режиме предварительного просмотра печати

Проверка знаний

У Вас есть ячейка таблицы, которая должна занимать 3 столбца. Какой атрибут следует использовать?

Повторение: colspan и rowspan

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

  • colspan — ячейка занимает несколько столбцов
  • rowspan — ячейка занимает несколько строк
  • Учитывайте объединённые ячейки: не указывайте ячейки, которые охватывает объединение
  • Добавляйте scope="colgroup" для доступности заголовков, объединяющих столбцы
  • Используйте DevTools для отладки проблем с разметкой

Часто задаваемые вопросы

Урок «colspan и rowspan для объединения ячеек» бесплатный?

Да — полный текст урока «colspan и rowspan для объединения ячеек» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «colspan и rowspan для объединения ячеек»?

Объединяйте ячейки по столбцам и строкам Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «colspan и rowspan для объединения ячеек»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. table, tr, td и th
  2. Структура thead, tbody и tfoot
  3. colspan и rowspan для объединения ячеек
  4. Доступность таблиц: scope, summary и caption
← Назад к HTML Academy