Атрибут 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 HTML тега td
Атрибут rowspan определяет количество ячеек по вертикали, которые должны быть объединены.
Только браузер Firefox и Opera 12 (и более ранние версии) поддерживает значение rowspan=»0″, имеющее специальное значение.
Синтаксис атрибута
Значения атрибута
| Значение | Описание |
|---|---|
| число | Число ячеек по вертикали, которые следует объединить. Значение 0 указывает на то, что ячейка должна распространиться на всю секцию (thead, tbody или tfoot) |
Пример использования атрибута
HTML таблица с ячейкой, которая объединяет две строки:
Месяц Сумма Потрачено на праздники Январь $100 $50 Февраль $80
Атрибут rowspan
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.
Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 1 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью атрибута rowspan .
Синтаксис
Значения
Любое целое положительное число. Если значение установлено в 0, то ячейки объединяются до конца раздела таблицы ( , или ) или самой таблицы. Максимально допустимое значение равно 65534.
Значение по умолчанию
HTML 4.01 IE Cr Op Sa Fx
Тег TD, атрибут rowspan Ячейка 1 Ячейка 2 Ячейка 3
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибут rowspan
Атрибут / параметр rowspan (от англ. «row span» ‒ «охват строк») указывает количество табличных строк, охватываемых (занимаемых) данной ячейкой заголовка таблицы.
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | Tables |
| 4.01 | 11.2.6 Table cells: The TH and TD elements rowspan = number [CN]. DTD: Transitional Strict Frameset |
| 5.0 | 4.9.11 Attributes common to td and th elements . a rowspan content. |
| 5.1 | 4.9.11. Attributes common to td and th elements . a rowspan content. |
| XHTML | |
| 1.0 | Extensible HyperText Markup Language DTD: Transitional Strict Frameset |
| 1.1 | Extensible HyperText Markup Language |
Значения
В качестве значения данного атрибута указывается любое действительное неотрицательное целое число больше нуля. Так же этот атрибут может иметь нулевое значение означающее, что ячейка должна охватывать все оставшиеся строки в группе строк.
Значение по умолчанию: « 1 ».