Html rowspan – Атрибут rowspan | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Атрибут rowspan | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	1.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек

В приведенной на рис. 1 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью атрибута rowspan.

Синтаксис

 <td rowspan="число">...</td>

Значения

Любое целое положительное число. Если значение установлено в 0, то ячейки объединяются до конца раздела таблицы (<thead>, <tbody> или <tfoot>) или самой таблицы. Максимально допустимое значение равно 65534.

Значение по умолчанию

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут rowspan</title>
 </head>
 <body>

   <table border="1" align="center" 
     cellpadding="4" cellspacing="0">
    <tr> 
     <td rowspan="2" bgcolor="#FBF0DB">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr> 
     <td>Ячейка 3</td>
    </tr>
   </table>

 </body>
</html>

htmlbook.ru

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

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

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

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

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

Для одной ячейки можно одновременно задать и атрибут colspan, и атрибут rowspan.

Примеры

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

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

<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>

Результат выполнения кода:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Пример . Расширим Ячейку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>

Результат выполнения кода:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 1	Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Пример . Расширим Ячейку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>

Результат выполнения кода:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 1	Ячейка 4	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Пример . Расширим Ячейку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>

Результат выполнения кода:

Ячейка 1	Ячейка 2	Ячейка 3
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

Пример . Расширим еще и Ячейку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>

Результат выполнения кода:

Ячейка 1	Ячейка 2
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

code.mu

Атрибут rowspan | HTML | WebReference

Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек

В приведённой на рис. 1 таблице содержатся две строки и две колонки, причём левые вертикальные ячейки объединены с помощью атрибута rowspan.

Синтаксис

<td rowspan="<число>">...</td>

Значения

Любое целое положительное число. Если значение установлено как 0, то ячейки объединяются до конца раздела таблицы (<thead>, <tbody> или <tfoot>) или самой таблицы. Максимально допустимое значение равно 65534.

Значение по умолчанию

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TD, атрибут rowspan</title>
 </head>
 <body>
   <table border="1" align="center" 
     cellpadding="4" cellspacing="0">
    <tr> 
     <td rowspan="2" bgcolor="#FBF0DB">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr> 
     <td>Ячейка 3</td>
    </tr>
   </table>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;

— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

webref.ru

Атрибут rowspan | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	1.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек

Синтаксис

 <th rowspan="число">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут rowspan</title>
 </head>
 <body>
 
   <table border="1" align="center"  
    cellpadding="4" cellspacing="0"> 
    <tr> 
     <th rowspan="2" bgcolor="#FBF0DB">ячейка 1</th>
     <td>ячейка 2</td>
    </tr>
    <tr> 
     <td>ячейка 3</td>
    </tr>
   </table>

 </body>
</html>

htmlbook.ru

seodon.ru | Теги HTML — Тег TD

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут rowspan, тега <TD>, задает количество ячеек таблицы объединенных в одну по вертикали, то есть он показывает, на сколько рядов, начиная с текущего, простирается ячейка в данном столбце. Высота такой ячейки будет равна сумме высот объединенных ячеек, поэтому число тегов <TD> в столбце обязательно надо уменьшить, чтобы он не начал выпирать. При этом необходимо четко понимать, что количество рядов в таблице не зависит от объединения ячеек и остается неизменным.

Значения

Значением атрибута rowspan является целое положительное число, указывающее количество объединенных ячеек.

Значение по умолчанию: 1.

Атрибут rowspan еще может иметь значение ноль (0). Оно означает объединение ячеек начиная с текущей и до конца столбца но поддерживает его только Firefox и Opera.

Синтаксис

<td rowspan="значение">...</td>

Обязательный атрибут: нет.

Пример HTML: применение атрибута rowspan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег TD, атрибут rowspan</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td rowspan="2">Ячейки 1 и 4</td>
    <td>Ячейка 2</td>
    <td rowspan="3">Ячейки 3, 6 и 9</td>
   </tr>
	
   <tr><td>Ячейка 5</td></tr>
   
   <tr><td>Ячейка 7</td><td>Ячейка 8</td></tr>
  </table>
 </body>
</html>

Результат примера

Результат. Применение атрибута rowspan.

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

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

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

Неверное применение атрибутов colspan и rowspan

Если ячейки в таблице объединяются не только по вертикали, но и по горизонтали (атрибут colspan), то следите чтобы они не перекрывались соседними ячейками — это является ошибкой. Допустим, у вас имеется ячейка, состоящая из двух объединенных по горизонтали и вы хотите объединить ее с ячейками из соседнего ряда (по вертикали). Тогда в соседнем ряду вам необходимо взять ячейку также состоящую из двух объединенных по горизонтали, причем она должна располагаться точно под верхней.

Пример HTML: Неверное применение colspan и rowspan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Неверное применение атрибутов colspan и rowspan</title>
 </head>
 <body>
  <table border="1">
   <tr><td>Ячейка 1</td><td rowspan="2">Ячейка 2</td><td>Ячейка 3</td></tr>
   <tr><td colspan="2">Ячейка 4 и 5</td><td>Ячейка 6</td></tr>
  </table>
 </body>
</html>

Результат примера

В данном примере происходит перекрытие ячеек — ошибка. Чтобы ее исправить надо либо объединить ячейки 1 и 2, либо разделить 4-ю и 5-ю ячейки.

spravka.seodon.ru

Теги HTML — Атрибут rowspan

Описание

Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек

Синтаксис

<th rowspan="число">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

Пример. Объединение ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут rowspan</title>
 </head>
 <body>
   <table border="1" align="center"
    cellpadding="4" cellspacing="0">
    <tr>
     <th rowspan="2" bgcolor="#FBF0DB">ячейка 1</th>
     <td>ячейка 2</td>
    </tr>
    <tr>
     <td>ячейка 3</td>
    </tr>
   </table>
 </body>
</html>

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
3	1	3.5	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
calendar.vpogiba.info
No related posts.

Html rowspan – Атрибут rowspan | htmlbook.ru

Атрибут rowspan | htmlbook.ru

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

Описание

Синтаксис

Значения

Значение по умолчанию

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

Примеры

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

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

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

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

Пример . Расширим еще и Ячейку2 на 2 столбца

Атрибут rowspan | HTML | WebReference

Синтаксис

Значения

Значение по умолчанию

Пример

Браузеры

Автор и редакторы

Атрибут rowspan | htmlbook.ru

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

Описание

Синтаксис

Значения

Значение по умолчанию

seodon.ru | Теги HTML — Тег TD

Значения

Синтаксис

Поддержка версиями HTML

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

Неверное применение атрибутов colspan и rowspan

Теги HTML — Атрибут rowspan

Описание

Синтаксис

Значения

Значение по умолчанию

Пример. Объединение ячеек

Браузеры: Настольные Мобильные ?

Браузеры

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

Рубрики

Рубрики