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

Создание таблиц в HTML. Все о HTML таблицах

В HTML для создания таблиц используются теги группы table. К ним относятся:

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: , и .

Далее необходимо определить строки и ячейки — структуру таблицы.

Пример простой таблицы HTML

Исходный код простой таблицы HTML

 
 
 
Ячейка 1 
Ячейка 2 
Ячейка 3 
 
Ячейка 4 
Ячейка 5 
Ячейка 6 
 
Ячейка 7 
Ячейка 8 
Ячейка 9 

Заголовки таблицы HTML

Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.

Пример HTML таблицы с заголовком th

Volkswagen AG	Daimler AG	BMW Group
Audi	Mercedes-Benz	BMW
Skoda	Mercedes-AMG	Mini
Lamborghini	Smart	Rolls-Royce

Исходный код таблицы HTML с заголовками th

 
 
 
Volkswagen AG 
Daimler AG 
BMW Group 
 
Audi 
Mercedes-Benz 
BMW 
 
Skoda 
Mercedes-AMG 
Mini 
 
Lamborghini 
Smart 
Rolls-Royce 

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan , у ячейки или , где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan , у ячейки или , где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

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

Исходный код таблицы HTML с объединенными ячейками

 
 
 
Nissan 
 
Модель 
Комплектация 
Наличие 
 
Nissan Qashqai 
VISIA 
+ 
 
TEKNA 
+ 
 
Nissan X-Trail 
ACENTA 
+ 
 
CONNECTA 
- 

Колонтитулы и подпись в HTML таблицах

HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.

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

По необходимости к таблице можно добавить подпись. Для этого используйте тег .

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Наличие	+	+	+
Мощность двигателя	0,9 (90 л.с.)	0,9 (90 л.с.)	1,5 (90 л.с.)
Топливо	бензин	бензин	дизель
Норма токсичности	Евро-6	Евро-6	Евро-5

Исходный код таблицы с колонтитулами и подписью

 
Комплектации Renault Sandero Stepway 
 
 
Характеристика 
SUTA 09H 6R 
SUTA 09HR6R 
SUTA 15H 5R 
 
 
Наличие 
+ 
+ 
+ 
 
 
Мощность двигателя 
0,9 (90 л.с.) 
0,9 (90 л.с.) 
1,5 (90 л.с.) 
 
Топливо 
бензин 
бензин 
дизель 
 
Норма токсичности 
Евро-6 
Евро-6 
Евро-5 

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

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

Оба тега могут определять стили для одной или нескольких колонок. Атрибут span , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Характеристика
1.5 (90 л.с.)	1.2 (115 л.с.)	1.5 (90 л.с.)	Мощность двигателя
дизель	бензин	дизель	Топливо
АКП6 (EDC)	АКП6 (EDC)	АКП6 (EDC)	Трансмиссия

Исходный код таблицы HTML c и

 
 
 
 
  
 
 
ZEN 2E2C AL A 
ZEN 2E2C J5 A 
INTENSE 2E3C AL A 
Характеристика 
 
1.5 (90 л.с.) 
1.2 (115 л.с.) 
1.5 (90 л.с.) 
Мощность двигателя 
 
дизель 
бензин 
дизель 
Топливо 
 
АКП6 (EDC) 
АКП6 (EDC) 
АКП6 (EDC) 
Трансмиссия 

Таблицы в макете страниц сайта

На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).

Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.

Источник

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

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.

Пример 12.4. Объединение ячеек по вертикали и горизонтали

       
 
Браузер
 
Internet Explorer
 
Opera
 
Firefox
 
 
6.0
7.0
7.0
8.0
9.0
1.0
2.0
 
 
Поддерживается
 
Нет
Да
Нет
Да
Да
Да
Да
 
 
  

Результат данного примера показан на рис. 12.6.

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

Источник

Как объединить ячейки в HTML-таблице горизонтально и вертикально: colspan и rowspan

Рассмотрим простой пример HTML-таблицы с двумя строками и двумя столбцами ( четыре ячейки ). Ее HTML-код выглядит следующим образом:

 
содержимое
содержимое
 
содержимое
содержимое
 

Далее, если нужно объединить две ячейки в верхней строке, используйте атрибут colspan=» « следующим образом:

 
содержимое
 
 
содержимое
содержимое
 

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

Можно осуществить объединение ячеек таблицы HTML в любой ее области с любым количеством столбцов. Одним из наиболее полезных применений объединения ячеек по горизонтали является создание заголовков таблицы. Если таблица имеет n столбцов, поместите атрибут colspan=»n» в первую ячейку верхнего ряда и удалите другие ячейки из этого ряда.

Как объединить ячейки в HTML-таблице по вертикали: rowspan

Рассмотрим простой пример HTML-таблицы с четырьмя ячейками, разделенными на две строки и два столбца. HTML-код :

 
содержимое
содержимое
 
содержимое
содержимое
 

Чтобы осуществить HTML table объединение ячеек по вертикали, добавьте для первой ячейки верхней строки атрибут rowspan=»2″ , а затем удалите одну из ячеек в нижнем ряду. HTML-код теперь будет выглядеть следующим образом:

 
stuff
содержимое
 
содержимое
 

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

Способы комбинирования rowspan и colspan для создания пользовательских HTML-таблиц с ячейками, которые охватывают несколько строк и столбцов

 
 
span 3 rows
 
span 3 columns
 
 
H
 
T
 
span 2 rows
 
 
M
 
L
 
 
span 4 columns
 
 
 
 
span 2 rows and 2 columns
 
T
 
 
A
 
 
E
 
L
 
B
 
 

Использование вертикально объединенных ячеек

Объединение ячеек по вертикали HTML в одном столбце можно использовать, если нужно создать заголовок для группы строк, примыкающих к этому столбцу. Это также может помочь разделить группы строк по типу.

При представлении данных на сайте в табличном формате, чем лучше вы организуете данные по подгруппам, тем проще пользователям анализировать и обрабатывать эти данные. Разделители пространства помогают нам анализировать вещи более эффективно. Также можно использовать для столбцов цветовой код, чтобы их было еще проще визуально идентифицировать:

Источник