Объединение ячеек таблиц
Объединение ячеек таблиц лучше всего рассмотреть на примере простой таблицы, HTML-код которой приведен в листинге 5.10.
Это обычная таблица, ячейки которой пронумерованы — так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги и поддерживают два весьма примечательных необязательных атрибута. Первый — COLSPAN — объединяет ячейки по горизонтали, второй — ROWSPAN — по вертикали.
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.
1. Найти в коде HTML тег (), соответствующий первой из объединяемых ячеек (если считать ячейки слева направо).
2. Вписать в него атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
3. Удалить теги (), создающие остальные объединяемые ячейки данной строки.
Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.
Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.
Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.
1. Найти в коде HTML строку (тег ), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).
2. Найти в коде этой строки тег (), соответствующий первой из объединяемых ячеек.
3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
4. Просмотреть последующие строки и удалить из них теги (), создающие остальные объединяемые ячейки.
Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).
Обратим внимание, что мы удалили из второй строки тег , создающий шестую ячейку, поскольку она объединилась с первой ячейкой.
Объединение ячеек сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна, трудно было встретить таблицу без объединенных ячеек. Так или иначе, знать о нем не помешает.
Объединение ячеек
Смежные ячейки таблицы могут объединяться. Например, в таблице из нескольких столбцов все ячейки первой строки можно объединить и поместить в этой строке красивый заголовок таблицы. Возможно также объединение нескольких строк или создание пустой прямоугольной области.
Для объединения двух смежных ячеек в одной строке нужно использовать атрибут colspan тех же тегов, например,
Пример
В следующей таблице используется объединение столбцов и строк.
Заголовок на 3 столбца Заголовок на 1 строку Ячейка 1 Ячейка 2 Заголовок на 3 строки Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8
| Заголовок на 3 столбца | ||
|---|---|---|
| Заголовок на 1 строку | Ячейка 1 | Ячейка 2 |
| Заголовок на 3 строки | Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 | |
| Ячейка 7 | Ячейка 8 | |
Таблица будет иметь следующий вид.
Если вы хотите создать таблицу с объединениями столбцов и в то же время точно контролировать ширину каждого столбца, необходимо задать ширину по крайней мере одной ячейки в каждом столбце. Для полной уверенности найдите время и задайте ширину каждой ячейки в таблице. Когда объединения столбцов пересекаются, очень легко получить непредсказуемый результат
Создание таблицы в HTML
Таблицы в HTML имеют две функции. Первая — это собственно таблицы, то есть вывод информации в виде таблицы. А вторая — это вёртска страницы. Отдельные части контента размещаются в разных ячейках таблицы и таким образом оказываются в нужном месте страницы. Табличная вёрстка устарела и почти не используется.
Создание таблицы
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Вот код такой таблицы:
8
9
10
11
12
13
14
15
16
17
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Объединение ячеек таблицы
Создадим такую таблицу:
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| Объединённая ячейка | |
Код такой таблицы выглядит так:
18
19
20
21
22
23
24
25
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| Объединённая ячейка | |
Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек. Поэтому общее количество ячеек в этой строке будет меньше, чем в других, в данном случае, одна.
Теперь создадим такую таблицу:
| строка 1 ячейка 1 | Объединённая ячейка |
| строка 2 ячейка 1 |
27
28
29
30
31
32
33
34
| строка 1 ячейка 1 | Объединённая ячейка |
| строка 2 ячейка 1 |
Дополнительные табличные тэги
Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы.
— cодержит несколько первых строк таблицы для указания особого стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с самой первой строки.
— содержит несколько строк таблицы для указания особого стиля. Таких тегов в таблице может быть несколько.
— содержит строки таблицы, которые отобразятся в самом низу таблицы.
— определяет стиль для одной колонки таблицы, начиная с первой. То есть первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает по-разному в разных браузерах.
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2023 © basecourse.ru Все права защищены
Объединение различных строк html-таблицы
Моя задача-создать таблицу ( table ), показанную на фото нижe: 
Мне нужно использовать только html , а если это невозможно, то можно использовать минимальное количество css . У меня есть проблема, а именно при создании выделенных красным цветом полей в таблице: 
Как объединить ячейки разных строк в одну ячейку ?
Отслеживать
задан 9 дек 2020 в 18:42
215 1 1 серебряный знак 13 13 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
td, th
Header column 1 Header column 2 Header column 3 Header column 4 Row 2 - Item 1 Row 2 - Item 2 Row 2 - Nested Table 1 Row 2 - Item 4 Row 3 Nested Table 2 Row 3 - Item 2 Row 3 - Item 3 Row 4 - Item 1 Row 4 - Item 2 Row 4 - Item 3 Row 5 - Last row of outer table
Отслеживать
ответ дан 9 дек 2020 в 18:54
Mikalai Parakhnevich Mikalai Parakhnevich
4,448 1 1 золотой знак 14 14 серебряных знаков 27 27 бронзовых знаков
- html
- css
- table
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.