Атрибут span тега <col> — скільки колонок охопити
Атрибут span HTML тега <col> визначає число колонок, до яких застосовуватимуться задані властивості. Якщо цей атрибут відсутній, то елемент <col> працює для однієї колонки.
Допускається застосовувати атрибут span до кількох колонок і таким чином формувати групи колонок з однаковими властивостями.
Загальний опис
автор: NagarD
Синтаксис
<col span="number">Атрибут span може отримувати єдине значення:
-
number -
Число колонок.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута span теґа <col>
HTML
<p>З використанням атрибуту span</p>
<table border="1">
<colgroup>
<col span="2" style="background-color:blue" />
<col style="background-color:yellow"/>
</colgroup>
<tr>
<th>Смартфони</th>
<th>Ноутбуки</th>
<th>Планшети</th>
</tr>
<tr>
<td>Samsung S8</td>
<td>Lenovo G560</td>
<td>Samsung Galaxy Tab E </td>
</tr>
<tr>
<td>Samsung S8+</td>
<td>Asus VivoBook S</td>
<td>Samsung Galaxy Tab A</td>
</tr>
</table>CSS
table{
width:50%;
}
th{
padding:10px;
border: 1px solid grey;
}
th,td{
padding:10px;
border: 1px solid grey;
}Обидві таблиці мають однакове правило для колонки, різниця тільки в span. Заразом видно межу можливостей <col>: тло лягло, а color і padding із того самого правила не діють — комірки їх не успадковують.
HTML
<h3>1. <code><col span="2"></code> — правило на дві колонки</h3>
<table>
<colgroup>
<col>
<col span="2" class="hi">
</colgroup>
<tr><th>Товар</th><th>Ціна</th><th>Наявність</th></tr>
<tr><td>Клавіатура</td><td>1 250 грн</td><td>є</td></tr>
<tr><td>Миша</td><td>480 грн</td><td>немає</td></tr>
</table>
<h3>2. Те саме без <code>span</code> — правило на одну колонку</h3>
<table>
<colgroup>
<col>
<col class="hi">
</colgroup>
<tr><th>Товар</th><th>Ціна</th><th>Наявність</th></tr>
<tr><td>Клавіатура</td><td>1 250 грн</td><td>є</td></tr>
<tr><td>Миша</td><td>480 грн</td><td>немає</td></tr>
</table>CSS
h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
table { border-collapse: collapse; }
th, td { border: 1px solid #bbb; padding: .4em .7em; text-align: left; }
/* колонці дістанеться лише background-color — решта не діє */
.hi { background-color: #fff3c4; color: crimson; padding: 3em; }Коментарі
Коментарів ще немає — будьте першим!