Атрибут 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.
Значение по умолчанию
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>Тег 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
Как сделать таблицу в HTML? Атрибуты colspan, rowspan и другие.
В этом видео уроке мы начнем изучение нового интересного раздела, но сначала давайте вспомним, о чем мы говорили в прошлом видео.
В прошлый раз мы закончили изучение раздела по HTML-формам. В видео уроке мы поговорили про обработчик данных формы, с помощью которого научились собирать данные и отправлять их на наш E-mail.
Ну а сейчас приступим к изучению еще одного раздела, который посвящен таблицам. Таблицы в HTML играют далеко не последнюю роль, и бывает, что необходимо создать таблицу для публикации табличных данных. Но сразу начинают возникать вопросы, как это сделать и какие параметры можно использовать? Именно об этом мы и поговорим. Узнаем, как сделать таблицу в HTML? Изучим все атрибуты таблиц, атрибуты строк в таблице и атрибуты ячеек таблицы. Поговорим о двух, пожалуй, самых популярных атрибутах и в тоже время зачастую самых непонятных, это colspan и rowspan.
Кроме того, если говорить о важности таблиц в HTML, можно вспомнить, что раньше многие сайты использовали именно табличную верстку. Что говорит о том, что таблицы знать необходимо. Однако теперь сайты проще и правильнее верстать с использование блочной верстки. Но таблицы не потеряли своей значимости благодаря тому, что это самый удобный способ публикации табличных данных.
Как сделать таблицу в HTML? Теги HTML-таблицы.
Начнем естественно с самого начала. С создания HTML-таблицы. Вообще для создания таблицы используется три основных HTML-тега, это <table>
<tr> и <td>.HTML-тег <table> создает контейнер таблицы, в котором находятся строки и ячейки, а также сами данные, например текст.
HTML-тег <tr> создает строку в таблице.
И HTML-тег <td> создает ячейку таблицу, в которую непосредственно будут добавлены табличные данные, например текст.
Пример HTML-кода для создания простой HTML-таблицы (В примере создается таблица с использованием трех строк и трех колонок):
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Как Вы можете видеть все довольно просто. Однако при создании таблицы необходимо быть предельно собранным и внимательным, чтобы ничего не перепутать. Потому что выявить проблему в довольно однообразном HTML-коде довольно сложно.
Также стоит отметить, что я сразу указал атрибут border, который нужен для отображения границ таблицы. В этом случае указана ширина границы в один пиксель.
Теперь мы знаем, как сделать таблицу в HTML. А значит можно поговорить о параметрах, которые можно указывать для таблиц. Здесь стоит отметить, что параметры мы можем указывать, как для тега <table> отдельно, так и для тегов <td>.
Начнем с HTML-тега <table> и рассмотрим основные HTML-атрибуты, которые мы можем использовать, чтобы сделать таблицу удобнее.
Ширина таблицы в HTML.
Довольно популярный вопрос, связанный с таблицами это как указать ширину таблицы? На самом деле все довольно просто. Для указания ширины таблицы используется параметр width, как и для указания ширины для любых других элементов в HTML:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Здесь стоит напомнить, что в значении параметра width необходимо указать любое целое число. И не забудьте о том, что указываете количество пикселей. В нашем случае ширина будет равна 800 пикселей.
Отступы таблицы в HTML.
Еще один популярный вопрос касается указания отступов в таблице. Для указания отступов необходимо использовать два атрибута.
Для указания внутренних отступов (отступ текста от края ячейки) мы должны использовать атрибут cellpadding.
А для указания внешних отступов (отступ ячеек от границ таблицы и друг от друга) мы должны использовать атрибут cellspacing
Мы не будем рассматривать отдельные примеры для каждого атрибута, а просто рассмотрим один пример, в котором укажем и внутренние отступы таблицы и внешние:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
В этом примере мы указываем, что внешние и внутренние отступы таблицы будут равны 10 пикселям.
И рассмотрим еще пару примеров, в которых поговорим о выравнивании информации внутри ячеек и строк.
Горизонтальное выравнивание в HTML-таблице.
Для того чтобы выровнять текст внутри ячеек справа, слева или по центру достаточно воспользоваться атрибутом align. Но здесь стоит быть внимательным, так как этот атрибут мы можем применить как ко всей строке и выровнять текст с одной стороны ячейки во всей строке, так и отдельно для каждой ячейки.
В примере мы рассмотрим горизонтальное выравнивание текста во ВСЕЙ первой строке, и горизонтальное выравнивание во второй строке, но выровняем только первую ячейку второй строки. В первом случае выровняем текст по центру, а во втором справа:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Также стоит помнить, что по умолчанию текст выравнивается слева.
Вертикальное выравнивание в HTML-таблице.
Что касается вертикального выравнивания в таблице, то здесь все также как и при использовании горизонтального, только выравниваться все будет по вертикали и использоваться будет атрибут valign. В примере мы также выровняем всю первую строку по верхнему краю, а во второй строке выровняем только первую ячейку по нижнему краю:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Здесь также стоит отметить, что была добавлена высота (height — универсальный HTML-атрибут) для двух первых строк, чтобы мы смогли увидеть работу атрибута valign.
Конечно же, это не все атрибуты, которые мы можем применять к таблицам. Остальные параметры Вы сможете увидеть в видео уроке.
Но я не могу не вспомнить еще два атрибута, с которыми очень часто могут возникать проблемы и недопонимание. Для того что их рассмотреть мы не будем использовать параметры строк и ячеек, о которых говорили выше так как они будут мешать. Оставим только атрибуты для тега
Colspan.
Теперь погорим об объединении ячеек между собой. Для начала рассмотри атрибут colspan, который позволит нам объединять ячейки по горизонтали между собой.
Здесь стоит помнить, что данный атрибут применяется только к тегу <td>. Кроме того если применять атрибут так как он есть, мы увидим не только объединение ячеек, но и проблемы вытекающие отсюда. Например, если применить атрибут colspan как есть, например, к первой ячейке первой строки, мы объединим первую и вторую ячейку первой строки между собой. При этом первые и вторые ячейки второй и третей строки останутся на своих местах. Но при этом последняя (третья) ячейка первой строки будет выброшена, как бы за пределы. НЕ правильный пример:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 | |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 | |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 | |
В этом случае следует учитывать, что при объединении ячеек горизонтально в строке, в которой происходит объединение должно быть меньше ячеек. Например, если мы объединим две ячейки, как в нашем случае, то одну (последнюю) ячейку необходимо удалить. Или добавить по одной ячейке для остальных строк. В примере мы просто удалим лишнюю ячейку первой строки. Правильный пример:
| Ячейка 1-1 | Ячейка 1-2 | |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Именно из-за этих особенностей использование этих атрибутов вызывает много проблем и вопросов, особенно у новичков. Но если быть внимательным все должно получиться. Главное понять, как это работает.
Rowspan.
Rowspan также позволяет объединять ячейки между собой. Но объединение происходит по вертикали. Как если бы мы объединяли строки, а не ячейки.
В этом случае также возникают проблемы с лишней ячейкой, которую выбрасывает за пределы. Если мы применим атрибут, как есть для первой ячейки первой строки, тогда за пределы будет выброшена третья ячейка второй строки. Неправильный пример:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Эта проблема также решается удалением лишней ячейки или добавлением новых. Но здесь стоит учитывать, что при объединении двух ячеек, как в нашем случае происходит следующее: Все ячейки из первой строки остаются на местах. А во второй строке первая ячейка первой строки занимает место первой ячейки второй строки, из-за чего происходит сдвиг всех ячеек в сторону. И при этом последняя ячейка второй строки получается как бы лишней. Ну а самый простой вариант избавиться от проблемы удалить лишнюю ячейку. Правильный пример:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Также стоит учесть, что удаление вовсе необязательно, если правильно все рассчитать перед созданием таблицы.
Видео урок: Как сделать таблицу в HTML? Атрибуты colspan, rowspan и другие.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы познакомимся с еще одним тегом, который позволит добавить заголовок (подпись) для HTML-таблицы.
sdelaemblog.ru
Атрибут rowspan | HTML | WebReference
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.
Рис. 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.
Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 1 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью атрибута rowspan.
Синтаксис
<th rowspan="число">...</th>Значения
Любое целое положительное число больше 1.
Значение по умолчанию
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
HTML/Атрибут rowspan (Элемент td)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Параметр rowspan (Элемент td)</title> </head> <body> <h2>Пример использования атрибута "rowspan"</h2> <table border="1"> <thead> <tr> <th>Значение</th> <th>15 мая</th> <th>16 мая</th> <th>17 мая</th> <th>18 мая</th> </tr> </thead> <tbody> <tr> <th>№ 1</th> <td>10.08</td> <td>10.1</td> <td rowspan="3">---</td> <td>10.11</td> </tr> <tr> <th>№ 2</th> <td>11.16</td> <td>11.24</td> <td>11.23</td> </tr> <tr> <th>№ 3</th> <td>13.4</td> <td>13.28</td> <td>13.25</td> </tr> </tbody> </table> </body> </html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр rowspan (Элемент td)</title>
</head>
<body>
<h2>Пример использования атрибута "rowspan"</h2>
<table border="1">
<thead>
<tr> <th>Значение</th> <th>15 мая</th> <th>16 мая</th> <th>17 мая</th> <th>18 мая</th> </tr>
</thead>
<tbody>
<tr> <th>№ 1</th> <td>10.08</td> <td>10.1</td> <td rowspan="3">---</td> <td>10.11</td> </tr>
<tr> <th>№ 2</th> <td>11.16</td> <td>11.24</td> <td>11.23</td> </tr>
<tr> <th>№ 3</th> <td>13.4</td> <td>13.28</td> <td>13.25</td> </tr>
</tbody>
</table>
</body>
</html>
programmerbook.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