Атрибут rowspan тега <td> — об'єднання по вертикалі
Атрибут rowspan визначає об'єднання рядків у один стовпчик.
Значення атрибута вказує на те, скільки рядків буде об'єднано.
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
автор: с3сrowspan ="0"вказує браузеру, що об'єднати треба групу рядків.
Синтаксис
<td rowspan="number">Атрибут rowspan може отримувати єдине значення:
-
number -
Визначає скільки рядків буде об’єднано.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута rowspan теґа <td>
HTML
<p>Приклад використання атрибута "rowspan"</p>
<table>
<caption>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td>Понеділок</td>
<td>8:00 - 16:00</td>
<td rowspan="2">12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td rowspan="3">9:00 - 17:00</td>
</tr>
<tr>
<td>Середа</td>
<td>11:00 - 19:00</td>
</tr>
<tr>
<td>Четверг</td>
<td rowspan="2">9:00 - 18:00</td>
</tr>
<tr>
<td>П'ятниця</td>
<td>9:00 - 13:00</td>
</tr>
</table>CSS
table,th,td{
border: 1px solid grey;
text-align:center;
}
td{
padding:10px;
}
th,td{
padding:10px;
}
caption{
font-size:20px;
}Дві однакові за задумом таблиці. У першій комірка «Понеділок» має rowspan="3", і в наступних двох рядках зайвого <td> немає — усе рівно. У другій цей <td> забули прибрати, і рядки поїхали праворуч на одну комірку. Зверніть увагу й на те, що текст у високій комірці стоїть посередині: так браузер робить типово.
HTML
<h4>Правильно: накриті комірки прибрано</h4>
<table>
<tr><th>День</th><th>Пара</th><th>Предмет</th></tr>
<tr><td rowspan="3">Понеділок</td><td>1</td><td>Математика</td></tr>
<tr><td>2</td><td>Фізика</td></tr>
<tr><td>3</td><td>Хімія</td></tr>
<tr><td>Вівторок</td><td>1</td><td>Історія</td></tr>
</table>
<h4>Помилка: комірки дня лишили в кожному рядку</h4>
<table class="broken">
<tr><th>День</th><th>Пара</th><th>Предмет</th></tr>
<tr><td rowspan="3">Понеділок</td><td>1</td><td>Математика</td></tr>
<tr><td>Понеділок</td><td>2</td><td>Фізика</td></tr>
<tr><td>Понеділок</td><td>3</td><td>Хімія</td></tr>
<tr><td>Вівторок</td><td>1</td><td>Історія</td></tr>
</table>CSS
h4 { margin: .8em 0 .3em; }
table { border-collapse: collapse; margin-bottom: 1em; }
td, th { border: 1px solid #999; padding: .35em .8em; }
th { background: #444; color: #fff; }
td[rowspan] { background: #fff2cc; }
.broken td:not([rowspan]) { background: #fdf3f2; }Коментарі
Коментарів ще немає — будьте першим!