Вы здесь: Главная » 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. Спасибо, все понятно, только стили забыл указать.

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

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