Html группировка ячеек таблицы

Атрибут colspan

Атрибут colspan управляет объединением столбцов HTML таблицы. Применяется к тегам th и td .

Принимаемое значение: целое число начиная с 1 .

Как пользоваться: добавляем данный атрибут к любой ячейке td или th . Если, к примеру, задать colspan в значение 2 — то ячейка, которой это задали, займет два столбца таблицы. При этом соседние ячейки справа никуда не денутся, наша расширившаяся ячейка их вытеснит и таблица развалится. Чтобы этого не произошло, нужно удалить одну из ячеек справа. Смотрите примеры для лучшего понимания.

Пример . Таблица без объединений

Давайте посмотрим на таблицу без объединений, с которой мы будем работать дальше:

Пример . Расширим Ячейку1 на два столбца

Давайте попробуем расширить Ячейку1 на два столбца, задав ей атрибут colspan в значении 2 . При этом она вытеснит ячейки справа и таблица развалится:

Пример . Расширим Ячейку1 на два столбца без разваливания таблицы

А теперь попробуем поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек справа от нашей (это Ячейка2 или Ячейка3 — без разницы):

Пример . Расширим Ячейку1 на 3 столбца без разваливания таблицы

Давайте расширим Ячейку1 на 3 столбца и зададим ей атрибут colspan в значении 3 . При этом удалим еще одну ячейку справа, чтобы таблица не развалилась:

Пример . Одновременно colspan и rowspan

Давайте попробуем объединить ячейки с номером 4 , 5 , 7 и 8 , воспользовавшись атрибутами colspan и rowspan (предыдущие объединения уберем из таблицы):

Смотрите также

Источник

HTML Урок 5. Создание таблицы в html

Результат:

Добавим границу для таблицы — атрибут border :

table border="1"> tr> td> содержание /td> /tr> /table>

Создания таблицы начинается с тега table (от англ. «таблица»). Тег tr служит для создания строки. В строке располагаются ячейки — тег td . Завершается таблица закрывающим тегом /table

Или пример таблицы посложнее:

Или пример таблицы посложнее:

Атрибуты тега TABLE

align	left — таблица влево; center – табл. по центру; right — табл. вправо.
width	400 50%
bоrdеr	ширина
bordercolor	цвета рамки
сеllspacing	ширина грани рамки
cellpadding	внутреннее расстояние до рамки
bgсоlоr	Цвет #rrggbb
bасkground	файл (фон таблицы)

Важно: Для ячеек-заголовка таблицы используется тег th вместо td . Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TR — строки

align	left , center , right	выравнивание по горизонтали
valign	top , middle , bottom , baseline	выравнивание по вертикали
bgcolor	цвет	задний фон
bordercolor	цвет	цвет границы

Атрибуты тега TD или TH — ячейки

align	left , center , right	выравнивание по горизонтали
valign	top , middle , bottom , baseline	выравнивание по вертикали
width	число или процент	ширина ячейки
bgcolor	цвет	цвет фона
background	файл	файл фона
bordercolor	цвет	цвет границы
nowrap	заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой

• Тег caption служит для создания заголовка таблицы
• Для группировки заголовочных ячеек используется тег thead
• Для группировки основного содержимого таблицы используется тег tbody
• Тег tfoot определяет нижнюю часть таблицы

Тег caption заголовка таблицы может иметь атрибут, определяющий расположение заголовка — align — со следующими значениями:
top — заголовок над таблицей,
bottom — заголовок под таблицей,
left — заголовок вверху и выровнен влево,
right — заголовок вверху и выровнен вправо. К сожалению не все значения «работают» во всех браузерах.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

table border="1"> caption>таблица/caption> thead> tr> th>Заголовок 1/th>th>3аголовок 2/th> /tr> /thead> tbody> tr> td>содержимое/td>td>содержимое/td> /tr> /tbody> tfoot> . /tfoot> /table>

.

таблица

Заголовок 1	3аголовок 2
содержимое	содержимое

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

Таблица с областями группировки

Столбец 1	Столбец 2	Столбец 3	Столбец 4
Строка2 Ячейка1	Строка2 Ячейка2	Строка2 Ячейка3	Строка2 Ячейка4
Строка3 Ячейка1	Строка3 Ячейка2	Строка3 Ячейка3	Строка3 Ячейка4
Строка4 Ячейка1	Строка4 Ячейка2	Строка4 Ячейка3	Строка4 Ячейка4

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

В происходит при помощи двух атрибутов тега td: COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.

Синтаксис COLSPAN:

table> tr> td colspan="2"> /td> /tr> tr> td> /td> td> /td> /tr> /table>

Синтаксис ROWSPAN:

table> tr> td rowspan="2"> /td> td> /td> /tr> tr> td> /td> /tr> /table>

Пример: создать таблицу по образцу на картинке. Использовать слияние ячеек

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

table border="1"> caption>Таблица с объединенными ячейками /caption> tr> th rowspan="2"> /th> th colspan="2">3аголовок 1/th> /tr> tr> th> Заголовок 1.1/th> th> Заголовок 1.2/th> /tr> tr> th> Заголовок 2/th> td> Ячейка 1/td> td> Ячейка 2/td> /tr> tr> th> Заголовок 3/th> td> Ячейка 3/td> td> Ячейка 4/td> /tr> /table>

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

	3аголовок 1
	Заголовок 1.1	Заголовок 1.2
Заголовок 2	Ячейка 1	Ячейка 2
Заголовок 3	Ячейка 3	Ячейка 4

Лабораторная работа №2: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:

Группировка ячеек: COLGROUP

Элемент colgroup позволяет создавать группы колонок с одинаковыми свойствами.

Пример: Создать таблицу по образцу

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

TABLE border="4"> colgroup > col span="2" width="30" style="background-color: green" /> col width="60" style="background-color: blue" /> /colgroup> colgroup style="background-color:red"> col span=2 width="120"/> /colgroup> TR> TD> 1-1 /TD>TD> 1-2 /TD>TD> 1-3 /TD>TD> 1-4 /TD>TD> 1-5/TD> /TR> TR> TD> 2-1 /TD>TD> 2-2 /TD>TD> 2-3 /TD>TD> 2-4 /TD>TD> 2-5 /TD> /TR> /table>

Атрибуты тега COLGROUP

1. bottom — по нижнему краю ячейки
2. middle — по центру ячейки (по умолчанию)
3. top — по верхнему краю ячейки

HTML вложенные таблицы

Таблицы со сложной структурой проще заменять на вложенные таблицы.

Пример: создайте вложенные таблицы по образцу:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

TABLE border="4" bgcolor="yellow"> tr> td>Таблица 1/td> td> TABLE> tr> td>Таблица 2/td>td>Ячейка 2-2/td> /tr> tr> td>Ячейка 3-2/td>td>Ячейка 4-2/td> /tr> /TABLE> /td> tr> td>Ячейка 3-1/td> td>Ячeйкa 4-1/td> /tr> /TABLE>

• Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
• Вставьте в левую нижнюю ячейку вложенную таблицу
• Фон ячеек вложенной таблицы сделайте серым

• Откройте задание, выполненное на прошлой лабораторной работе
• Добавьте в верхнюю ячейку еще одну вложенную таблицу
• Фон ячеек вложенной таблицы сделайте белым

Источник

Как правильно верстать HTML-таблицы: подробное руководство

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

Что же представляют собой HTML-таблицы и как их создать – во всем этом разбираемся в сегодняшней статье.

Как создать таблицу

Откройте HTML-документ и пропишите туда следующее:

Давайте попробуем добавить в наш тег немного информации – например, простой текстовый фрагмент «Моя первая таблица». В коде это будет выглядеть так:

А вот как этот фрагмент отображается в браузере:

Выглядит довольно странно, да? Мы вроде бы создали таблицу, а на экране видим лишь текст, который будто просто написан в теге . Все это потому, что нужно добавить строки и столбцы, а уже потом в них прописать текстовый фрагмент – только тогда таблица примет оригинальный вид. Но и это еще не все, предварительно нам нужно добавить обводку для таблицы, иначе чуда не произойдет.

Мы можем использовать CSS-стили либо просто прописать в HTML-файле тег и добавить в него следующее:

У нас появится маленькая точка внизу:

Как создать строки таблицы

В результате видим все ту же картину с маленькой точкой:

 
 
 
Моя первая таблица
 
А вот и столбец
 
 
 
А вот и новая строка
 
И еще один столбец
 
 
 
Третья строка!
 
И последний столбец!
 
 

Просто прописываем в теге пару строчек кода:

Чтобы получить ту таблицу, которую мы хотим видеть, необходимо совместить рамки. Для этого прописываем еще одну строчку кода в тег для table:

И, вуаля, перед нами отображается полноценная таблица с привычными границами:

Теперь наша таблица растянута:

Width со значением 100% растягивает таблицу на всю ширину страницы. Также вы можете указывать значения в пикселях, например width: 500px – в таком случае на любом экране таблица примет указанную ширину. Аналогичным образом можно присвоить и высоту – в пикселях или в процентах.

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

Мы также можем задать заголовок для столбцов и строк – в этом нам помогает тег . В такой ячейке обычно хранится атрибут для всех данных строк или столбцов. А к содержимому таких ячеек применяется определенный стиль – выделение жирным шрифтом и выравнивание по центру ячейки.

Данный тег лучше всего применять для выделения ячейки-заголовка. Если необходимо визуальное форматирование, то воспользуйтесь стилями для обычных ячеек.

Давайте для примера добавим тег с надписью «Заголовок» в еще одну строку таблицы:

 
 
Заголовок
 
 
 
Моя первая таблица
 
А вот и столбец
 
 
 
А вот и новая строка
 
И еще один столбец
 
 
 
Третья строка!
 
И последний столбец!
 
 

В итоге получаем следующее:

Обратите внимание, что заголовок выровнен не по всей таблице, а только по первому столбцу. Чтобы сделать его по центру – необходимо прописать дополнительный атрибут colspan, который объединяет столбцы. В нашем случае нужно связать два столбца, поэтому значение будет равно двум:

Вот как это выглядит на экране:

Данный атрибут мы можем добавлять к любым столбцам. Также есть еще один атрибут, который объединяет не столбцы, а строки – rowspan. Прописывается он аналогичным образом. Для примера давайте совместим вторую и третью строки второго столбца:

 
 
Заголовок
 
 
 
Моя первая таблица
 
А вот и столбец
 
 
 
А вот и новая строка
 
И еще один столбец
 
 
 
Третья строка!
 
 

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

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

С базовыми правилами создания таблицы мы разобрались, теперь давайте пойдем немного дальше – первым делом обсудим общий заголовок, который присваивается сверху или снизу таблицы. Он задается с помощью тега , а его размещение корректируется с помощью свойства caption-side: значение top – для вывода до таблицы, bottom – после.

Заголовок может потребоваться в следующих случаях:

• чтобы показать пользователям краткое содержимое таблицы – такой подход будет полезен, когда на странице много таблиц;
• тег влияет на оптимизацию страницы – его любят поисковики.

Давайте добавим в таблицу и посмотрим, что из этого выйдет. Для примера возьмем фразу «Таблица обо всем»:

С помощью стилей мы можем задать отступы либо изменить жирность заголовка – это поможет вам улучшить визуальную часть. Для отступов используйте CSS-стили margin или padding, а жирность задается свойством font-weight или тегом .

Группирование строк и столбцов таблицы

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

Еще один важный тег – . Он формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре. С его помощью можно задавать свойства столбцов для каждого столбца в пределах элемента .

Давайте добавим к уже существующей таблице данные теги:

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

Тело таблицы

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

Тело таблицы располагается после заголовка и шапки .

Шапка и подвал таблицы

Тегом мы можем задать заголовочную секцию таблицы. Чаще всего речь идет о первой строке, содержащей заголовки столбцов. В нем для ячеек используется тег . Контент в этой ячейке выравнивается по центру, а текст становится жирным.

Общая сводка по HTML-таблицам

Давайте закрепим полученную информацию. Вот теги, которые мы использовали при построении HTML-таблиц:

Чтобы добавить визуальные эффекты, используйте CSS-стили – с их помощью можно как увеличить размер обводки границ, так и задать цвет фона, размер и шрифт текста.

Создание HTML-таблицы – это дело нескольких минут. Главное – разобраться с базовыми понятиями и попрактиковаться на нескольких примерах. В последующем создание таблицы не будет вызывать у вас никаких проблем.

Источник