Атрибут rowspan тега <th> — об'єднання рядків
Атрибут rowspan визначає об'єднання рядків у один стовпчик.
Встановлює число осередків, які повинні бути об'єднані по вертикалі. Цей атрибут має сенс для таблиць, що складаються з декількох рядків.
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
автор: с3сrowspan ="0"вказує браузеру, що об'єднати треба групу рядків. - Нотатка
-
Якщо
автор: с3сrowspanбільше за значення кількості рядків, то об'єднується максимально допустима кількість рівна кількості рядків таблиці.
Синтаксис
<th rowspan="number">Атрибут rowspan може отримувати єдине значення:
-
number -
Задає число рядків, яке осередок заголовка повинен охоплювати. Значення атрибута повинно бути невід'ємними цілим числом. Не рекомендується використовувати значення понад 65534, тому що вони можуть бути обрізані до цього числа. Значення за замовчуванням 1.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута rowspan теґа <th>
HTML
<p>Приклад використання атрибута "rowspan"</p>
<table border = "1">
<tr>
<th>Канцелярські товари</th>
<th rowspan = "2" colspan="2">Товари для дому</th>
</tr>
<tr>
<td>Ручка</td>
</tr>
<tr>
<td>Папір</td>
<td>Клей</td>
<td>Альбом</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;
}Найпростіший приклад використання HTML атрибута rowspan теґа <th>
HTML
<table>
<tr>
<th>Month</th>
<th rowspan="1">Savings</th>
<th rowspan="0">rowspan = 0</th>
<th rowspan="3">rowspan = 3</th>
<th rowspan="5">rowspan = 5</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>CSS
table,th{
border:1px solid #ff0000;
}Ліворуч правильно: у другому рядку першої комірки немає, бо її місце зайняла комірка з rowspan="2". Праворуч комірку залишили — і рядок з'їхав, а в таблиці з'явився зайвий стовпець.
HTML
<p><b>Правильно</b> — з'їдену комірку прибрано:</p>
<table>
<tr>
<th rowspan="2">Понеділок</th>
<td>09:00</td>
<td>Математика</td>
</tr>
<tr>
<td>11:00</td>
<td>Фізика</td>
</tr>
<tr>
<th>Вівторок</th>
<td>09:00</td>
<td>Хімія</td>
</tr>
</table>
<p><b>Помилка</b> — комірку в другому рядку залишили:</p>
<table class="broken">
<tr>
<th rowspan="2">Понеділок</th>
<td>09:00</td>
<td>Математика</td>
</tr>
<tr>
<td>зайва</td>
<td>11:00</td>
<td>Фізика</td>
</tr>
<tr>
<th>Вівторок</th>
<td>09:00</td>
<td>Хімія</td>
</tr>
</table>CSS
body {
font-family: system-ui, sans-serif;
font-size: 15px;
}
p {
margin: 20px 0 6px;
color: #555;
font-size: 14px;
}
table {
border-collapse: collapse;
font-size: 14px;
}
th,
td {
border: 1px solid #9aa4ad;
padding: 6px 12px;
text-align: left;
}
th {
background: #eef3f7;
}
.broken td:first-child {
background: #fdecea;
color: #c0392b;
}Коментарі
Коментарів ще немає — будьте першим!