Атрибут span тега <colgroup> — на скільки колонок діє
Атрибут span HTML тега <colgroup> визначає число колонок, до яких застосовуватимуться задані властивості. Якщо цей атрибут відсутній, то елемент <colgroup> працює для однієї колонки.
Допускається застосовувати атрибут span до кількох колонок і таким чином формувати групи колонок з однаковими властивостями.
автор: NagarD
Загальний опис
автор: NagarD
- Порада
-
Для того, щоб визначити різні властивості стовпчика в межах
автор: NagarD<colgroup>, використовуйте тег<col>всередині тега<colgroup>.
Синтаксис
<colgroup span="number">Атрибут span може отримувати єдине значення:
-
number -
Число груп колонок.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Три таблиці: у першій span="2" фарбує дві колонки, у другій той самий span="3" мовчки ігнорується через вкладені <col> (фон дістали лише дві колонки), у третій групі задано color, font-weight, width і фон — а доходять до комірок лише ширина й фон.
HTML
<table class="ok">
<caption>span="2" — група накрила дві перші колонки</caption>
<colgroup span="2" class="pink"></colgroup>
<colgroup class="green"></colgroup>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
</table>
<table class="bad">
<caption>span="3", але всередині два <col> — span ігнорується, фарбуються дві колонки</caption>
<colgroup span="3" class="pink"><col><col></colgroup>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
</table>
<table class="ok">
<caption>Групі задано color, font-weight, width і фон — доходять лише ширина й фон</caption>
<colgroup span="2" class="all"></colgroup>
<colgroup></colgroup>
<tr><td>текст лишився чорним</td><td>і не жирним</td><td>звичайна колонка</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
</table>CSS
table {
min-width: 420px;
margin-bottom: 24px;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
td {
padding: 6px 12px;
border: 1px solid #b9c6d8;
}
.pink {
background: #ffe0e0;
}
.green {
background: #e0f6e0;
}
.all {
width: 150px;
color: #d64545;
font-weight: 700;
background: #eef3fb;
}
.bad {
outline: 2px dashed #d64545;
outline-offset: 3px;
}
.bad caption {
color: #c0392b;
}span="2" розтягує одну групу на дві колонки — обидві блакитні, а третя лишилася поза групою.
HTML
<table>
<colgroup span="2" class="hl"></colgroup>
<tr><th>ISBN</th><th>Назва</th><th>Ціна</th></tr>
<tr><td>3476896</td><td>Мій перший HTML</td><td>53 грн</td></tr>
<tr><td>5869207</td><td>CSS без сліз</td><td>49 грн</td></tr>
</table>CSS
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #0172ad;
padding: 4px 10px;
}
.hl {
background: #eef6ff;
}Коментарі
Коментарів ще немає — будьте першим!