HTML: Объединение ячеек в таблице
Смежные ячейки в таблице могут объединяться по горизонтали или вертикали с целью размещения большего объема данных. Например, в таблице из четырех строк и четырех столбцов все ячейки в первой строке можно объединить и поместить в этой строке красивый заголовок. Возможно также объединение нескольких строк или столбцов.
Для объединения ячеек по горизонтали, то есть объединение идущих друг за другом ячеек в строке таблицы, используется атрибут colspan , в значении задается число смежных ячеек в строке, которое вы хотите объединить.
Для объединения ячеек по вертикали, то есть объединение расположенных друг под другом ячеек в столбце таблицы, используется атрибут rowspan , в значении задается число смежных ячеек столбца, которое вы хотите объединить:
Заголовок страницы Объединим две ячейки в строке таблицы:
| Имя | Телефон | |
|---|---|---|
| Петя Иванов | 123 45 67 | 234 56 78 |
Объединим две ячейки в столбце таблицы:
| Имя | Петя Иванов |
|---|---|
| Телефон | 123 45 67 |
| 234 56 78 |
С этой темой смотрят:
- Как сделать таблицу в html
- Добавление рамки и заголовка к таблице в html
- HTML тег
- Оформление таблиц
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
: элемент ячейки таблицы данных
HTML-элемент определяет ячейку таблицы которая содержит данные. Участвует в табличной модели.
| Категория контента | None. | |
|---|---|---|
| Допустимое содержимое | Содержимое поток. | |
| Пропуск тега | Начальный тег обязательный. Закрывающий тег может быть пропущен, если сразу за ним следует элемент | (en-US) или , или если больше нет данных в его родительском элементе. |
| Допустимые родители | Элемент | |
| Допустимые ARIA-роли | Любые | |
| DOM-интерфейс | HTMLTableDataCellElement (en-US) |
Атрибуты
Этот аргумент содержит краткое описание содержимого в ячейке. Некоторые устройства для чтения могут подставлять это описание перед самим содержимым ячейки.
Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте. Вместо этого рассмотрите возможность использования атрибута title.
Это перечисляемый атрибут указывает каким будет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения: left , center , right , justify и char (выравнивает текстовое содержимое по заданному символу с минимальным смещением, определяемым атрибутами char и charoff ). Используйте CSS свойство text-align вместо этого атрибута, так как он устарел.
Этот атрибут включает список строк разделённых пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок.
Примечание: Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут scope .
bgcolor Non-standard
Этот атрибут определяет цвет фона ячейки. Значением задаётся 6-значными шестнадцатеричными кодами как определено в sRGB, с префиксом ‘#’. Можно также использовать предопределённые цветовые строки.
Примечание: Не используйте этот атрибут, поскольку он нестандартный: элемент должен быть стилизован с помощью CSS. Чтобы получить аналогичный эффект как атрибут bgcolor, используйте CSS свойство background-color .
Этот атрибут используется для определения символа по которому происходит выравнивание в ячейке. Типичный случай когда для него задают значение периода (.) когда необходимо выровнять числовые или денежные значения. Если align не задан. то атрибут char игнорируется.
Этот атрибут атрибут включает количество символов на которое смещаются при выравнивании данные от установленного char атрибута.
Примечание: Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта.
Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно 1 . Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).
Этот атрибут содержит список срок разделённых пробелами, каждая соответствует id атрибуту (en-US) элементов которые использует этот элемент.
Этот атрибут содержит положительное целое число указывающее какое количество строк необходимо объединить. По умолчанию значение равно 1 ; Если его значение 0 , тогда его действие распространяется до конца табличной секции ( (en-US), (en-US), , даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.
Этот атрибут определяет вертикальное выравнивание текста в ячейке. Возможные значения атрибута:
- baseline , поместит текст ближе к нижней части ячейки, но выровняет его по базовой линии символов, а не нижней линии. Если все символы одного размера, тогда имеет такой же эффект как bottom .
- bottom , поместит текст как можно ближе к нижней части ячейки
- middle , выравнивает текст по центру ячейки
- и top , который будет выравнивать текст как можно ближе к верхней части ячейки.
Примечание: Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS-свойство vertical-align .
Примечание: Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS-свойство width .
Примеры
Спецификации
| Specification |
|---|
| HTML Standard # the-td-element |
Совместимость с браузерами
BCD tables only load in the browser
Как объединить ячейки таблицы в html
Для объединения ячеек таблицы в HTML используется атрибут rowspan или colspan .
Атрибут rowspan позволяет объединять ячейки по вертикали, то есть объединить несколько ячеек в одну ячейку, которая будет занимать несколько строк таблицы.
rowspan="2">Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5
В данном примере первая ячейка таблицы объединяется с ячейкой, расположенной ниже, и занимает две строки, а остальные ячейки таблицы остаются отдельными.
Атрибут colspan позволяет объединять ячейки по горизонтали, то есть объединить несколько ячеек в одну ячейку, которая будет занимать несколько столбцов таблицы.
Ячейка 1 colspan="2">Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7
В данном примере вторая ячейка таблицы объединяется с двумя соседними ячейками, расположенными правее, и занимает три столбца, а остальные ячейки таблицы остаются отдельными.
HTML — Урок 10. Работа с таблицами сложной структуры
Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:
| шапка сайта | |
| меню | контент |
| низ сайта | |
Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.
| шапка сайта | |
| меню | контент |
| низ сайта |
Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега . Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.
Этот столбец включает в себя два столбца.
Для нашего примера:
Заголовок документа
| шапка сайта | |
| меню | контент |
| низ сайта | |