Html table rowspan: HTML td rowspan Attribute

Содержание

Атрибут rowspan — объединение рядов таблицы

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

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

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

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

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

<table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>

table, td, th {
 border: 1px solid black;
}

Пример .

Расширим Ячейку1 на два ряда

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

<table> <tr> <td rowspan="2">Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>

table, td, th {
 border: 1px solid black;
}

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

Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, давайте попробуем удалить одну из ячеек из второго ряда (и это не обязательно Ячейка4, которая находится непосредственно под нашей Ячейкой1, можно удалять любую, мы удалим ячейку с номером 5):

<table> <tr> <td rowspan="2">Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>table, td, th { border: 1px solid black; }

Пример .

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

А здесь давайте расширим нашу ячейку не на два ряда, а на 3, зададим ей

rowspan в значении 3. При этом удалим одну из ячеек из третьего ряда (ячейку 7, 8 или 9 — без разницы), чтобы таблица не развалилась:

<table> <tr> <td rowspan="3">Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 9</td> </tr> </table>table, td, th { border: 1px solid black; }

Пример . Расширим еще и Ячейку2 на

2 столбца

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

<table> <tr> <td rowspan="3">Ячейка 1</td> <td colspan="2">Ячейка 2</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 6</td> </tr> <tr> <td>Ячейка 7</td> <td>Ячейка 9</td> </tr> </table>

table, td, th {
 border: 1px solid black;
}

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

атрибут colspan,
который объединяет столбцы таблицы

HTML/Атрибут rowspan (Элемент th)

/html/th/rowspan:> Объединение строк_

Синтаксис

(X)HTML

<th rowspan="[значение]"> ... </th>

Описание

Атрибут / параметр rowspan (от англ. «row span» ‒ «охват строк») указывает количество табличных строк, охватываемых (занимаемых) данной ячейкой заголовка таблицы.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.	Раздел
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».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр rowspan (Элемент th)</title>
</head>
<body>
<h2>Пример использования атрибута «rowspan»</h2>
<table border=»1″>
<tbody>
<tr> <th rowspan=»3″>Умножение</th> <td> 2 * 0 </td> <td> = 0 </td> </tr>
<tr> <td> 2 * 1 </td> <td> = 2 </td> </tr>
<tr> <td> 2 * 2 </td> <td> = 4 </td> </tr>
</tbody>
</table>
</body>
</html>

Параметр rowspan (Элемент th)

HTML td rowspan Атрибут

❮ Тег HTML

Пример

HTML-таблица с ячейкой, занимающей две строки:

    9000 th>Экономия

Month	Экономия на отпуск!
Январь	100 долларов	$50
Февраль	80 долларов США	$50

Попробуйте сами »

Ниже приведены дополнительные примеры из серии «Попробуйте сами».

Определение и использование

Атрибут rowspan указывает количество строк, которые должна охватывать ячейка.

Поддержка браузера

Атрибут
рядов	Да	Да	Да	Да	Да

Синтаксис

Значения атрибутов

Значение	Описание
номер	Указывает количество строк, которые должна охватывать ячейка. Примечание. rowspan=»0″ сообщает браузеру о том, что ячейка должна охватывать последнюю строку раздела таблицы (thead, tbody или tfoot). Chrome, Firefox и Opera 12 (и более ранние версии) поддерживают rowspan=»0″.

Значение

Описание

номер

Указывает количество строк, которые должна охватывать ячейка. Примечание. rowspan=»0″ сообщает браузеру о том, что ячейка должна охватывать последнюю строку раздела таблицы (thead, tbody или tfoot). Chrome, Firefox и Opera 12 (и более ранние версии) поддерживают rowspan=»0″.

Дополнительные примеры

Пример

Использование rowspan=»0″:

Month	Saving	Скидки на отпуск!
Январь	100 долларов		100 долларов США
Февраль	80 долларов США

Попробуйте сами »

9002

❮ Тег HTML

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top7 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

HTML rowspan Атрибут

❮ Предыдущий Все атрибуты HTML Далее ❯

Определение и использование

Атрибут rowspan указывает количество строк, которые должна охватывать ячейка.

Применяется к

Атрибут rowspan может использоваться для следующих элементов:

Элементы	Атрибут
<тд>	рядов
<й>	рядов

Примеры

Td Пример

HTML-таблица с ячейкой, занимающей две строки:

Month	Экономия	Скидки на отпуск!
Январь	100$	50$
Февраль	80$	50$

Попробуйте сами »

Th Пример

HTML-таблица с ячейкой заголовка, состоящей из трех строк:

Месяц	Экономия	Экономия на отпуск!
Январь	100 долларов США
Февраль	8 долларов США

Попробуйте сами »

Поддержка браузера

Атрибут rowspan имеет следующую поддержку браузера для каждого элемента:

0	0	Элемент
тд	Да	Да	Да	Да	Да
-й	Да	Да	Да	Да	Да

❮ Предыдущий Все атрибуты HTML Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.

CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

2 Top 9 Справочник по HTML

Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

9002 FORUM | О

Атрибут rowspan — объединение рядов таблицы

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

Пример .

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

Пример .

Пример . Расширим еще и Ячейку2 на

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

HTML/Атрибут rowspan (Элемент th)

Синтаксис

Описание

Поддержка браузерами

Спецификация

Значения

Пример использования

HTML td rowspan Атрибут

Пример

Определение и использование

Поддержка браузера

Синтаксис

Дополнительные примеры

Пример

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

HTML rowspan Атрибут

Определение и использование

Применяется к

Примеры

Td Пример

Th Пример

Поддержка браузера

ВЫБОР ЦВЕТА

Лучшие учебники

2 Top 9 Справочник по HTML

Основные примеры

Добавить комментарий Отменить ответ

Рубрики

Рубрики