Вы здесь: Главная » HTML » Объединение ячеек и строк в таблице

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

Обычно таблицы в HTML используют в их привычном виде - т.е. когда количество столбцов одинаково в каждой строке. Но, предположим, необходимо объединить несколько столбцов в один, например, в шапке таблице.

Атрибуты colspan и rowspan для ячеек (td, th)

Для этого в одной из ячеек таблицы необходимо использовать атрибут colspan="цифра", где цифра показывает, сколько же столбцов мы намерены объединить.

Такая же ситуация с объединением строк - необходимо также использовать атрибут, но  rowspan="цифра". Цифра указывает на количество объединяемых строк.

Например, нам необходимо создать такую таблицу:

Видно, что в этой таблице есть объединение по строкам в самом верху, там, где столбцы "№ п/п" и "Название". Также сразу видно, что объединять нужно 2 строки, поэтому будем использовать атрибут rowspan="2".

Также нужно объединить 4 ячейки в одну с текстом "Цена". Такое же объединение по столбцам необходимо в самой нижней правой ячейке. Поэтому в этих 2-х местах в коде будем использовать атрибут colspan="4":

Если заняться подсчетом ячеек в каждой строке, то получается интересная ситуация:

  • в первой строке ячеек 3
  • во второй - 4
  • в третьей, четвертой и пятой строках - 6 ячеек
  • в последней, шестой - опять 3

Для чего был нужен такой подсчет? Дело все в том, что любой из атрибутов - colspan или rowspan как бы "съедает" ячейки во время объединения. Но colspan убирает их количество в текущей строке, а rowspan - в следующей.

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

Создадим таблицу  из 5 строк и 6 столбцов. В ячейках запишем номер строки.номер ячейки. Используйте аббревиатуру Emmet, а затем слегка подкорректируйте ее:

Получим такой код:

И такую таблицу:

Затем будем добавлять атрибуты rowspan и colspan, чтобы таблица изменилась:

В скобках показаны сокращенно атрибуты и их значения (r - rowspan, c - colspan).

Код таблицы с объединениями:

Для того чтобы иметь возможность отформатировать группы строк или столбцов, можно использовать дополнительные теги: <thead>, <tfoot>, <tbody>, а также <col> и <colgroup>, но о них читайте уже в следующей статье.

Автор: Админ

3 комментария

  1. Спасибо, все понятно, только стили забыл указать.

  2. Спасибо! Пригодилось совсем недавно.

  3. Спасибо. Все понятно написано.

Добавить комментарий для Сергей Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *