Атрибут rowspan
Атрибут rowspan управляет объединением рядов в HTML таблице. Применяется к тегам th и td .
Принимаемое значение: целое число начиная с 1 .
Как пользоваться: добавляем данный атрибут к любой ячейке td или th . Если, к примеру, задать rowspan в значение 2 — то ячейка, которой это задали, займет два ряда по высоте таблицы. При этом ячейки из ряда ниже никуда не денутся, наша расширившаяся ячейка их вытеснит и таблица развалится. Чтобы этого не произошло, нужно удалить одну из ячеек из ряда ниже. Смотрите примеры для лучшего понимания.
Пример . Таблица без объединений
Давайте посмотрим таблицу без объединений, с которой мы будем работать дальше:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
table, td, th < border: 1px solid black; >
Пример . Расширим Ячейку1 на два ряда
А теперь давайте расширим Ячейку1 на два ряда, задав ей атрибут rowspan в значении 2 . Мы увидим, что она вытесняет ячейки из ряда под ней и таблица разваливается:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
table, td, th < border: 1px solid black; >
Пример . Расширим Ячейку1 на два ряда без разваливания таблицы
Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, давайте попробуем удалить одну из ячеек из второго ряда (и это не обязательно Ячейка4, которая находится непосредственно под нашей Ячейкой1, можно удалять любую, мы удалим ячейку с номером 5):
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 6 | |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
table, td, th < border: 1px solid black; >
Пример . Расширим Ячейку1 на 3 ряда без разваливания таблицы
А здесь давайте расширим нашу ячейку не на два ряда, а на 3 , зададим ей rowspan в значении 3 . При этом удалим одну из ячеек из третьего ряда (ячейку 7 , 8 или 9 — без разницы), чтобы таблица не развалилась:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 6 | |
| Ячейка 7 | Ячейка 9 |
table, td, th < border: 1px solid black; >
Пример . Расширим еще и Ячейку2 на 2 столбца
Давайте расширим еще и Ячейку2 на 2 столбца в дополнение к первой ячейке. Для этого Ячейке2 добавляем colspan в значении 2 . При этом удалим Ячейку3, чтобы таблица не развалилась:
| Ячейка 1 | Ячейка 2 | |
| Ячейка 4 | Ячейка 6 | |
| Ячейка 7 | Ячейка 9 | |
table, td, th < border: 1px solid black; >
Смотрите также
- атрибут colspan ,
который объединяет столбцы таблицы
Атрибут rowspan
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.
Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек
В приведённой на рис. 1 таблице содержатся две строки и две колонки, причём левые вертикальные ячейки объединены с помощью атрибута rowspan .
Синтаксис
Значения
Любое целое положительное число. Если значение установлено как 0, то ячейки объединяются до конца раздела таблицы ( , или ) или самой таблицы. Максимально допустимое значение равно 65534.
Значение по умолчанию
Пример
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 |
Браузеры
| 3 | 12 | 1 | 3.5 | 1 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Атрибут rowspan HTML тега
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.
Комбо: colspan + rowspan
Можно растягивать ячейку одновременно и по вертикали, и по горизонтали. Для этого нужно задать ячейке два атрибута: rowspan и colspan .
Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. Правда, вытесненных ячеек окажется больше. Например, ячейка с rowspan=»2″ и colspan=»2″ вытеснит три соседних ячейки.
Этот случай из тех, которые легче объяснить на примере, чем на словах. В этом задании вы растянете ячейку на два столбца и две строки и сами увидите, как поведёт себя таблица. В результате получится:
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим