HTML Тег <colgroup>
Приклад
Установіть колір тла трьох стовпців за допомогою тегів <colgroup> та <col>:
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <colgroup> визначає групу з одного або кількох стовпців у таблиці для форматування.
Тег <colgroup> корисний для застосування стилів до цілих стовпців замість повторення стилів для кожної клітинки, для кожного рядка.
Нотатка: Тег <colgroup> має бути дочірнім для елемента <table>, після будь-якого елемента <caption> і перед будь-якими елементами <thead>, <tbody>, <tfoot> та <tr>.
Порада: Щоб визначити різні властивості для стовпця в <colgroup>, використовуйте тег <col> із тегом <colgroup>.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <colgroup> | Так | Так | Так | Так | Так |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| span | number | Визначає кількість стовпців, які має охоплювати група стовпців |
Глобальні атрибути
Тег <colgroup> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <colgroup> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Вирівняти текст у стовпцях таблиці (за допомогою CSS):
<table style="width:100%">
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td style="text-align:right">$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td style="text-align:right">$47</td>
</tr>
</table>
Спробуйте самі »
Приклад
Вертикальне вирівнювання тексту в стовпцях таблиці (за допомогою CSS):
<table style="height:200px">
<tr>
<th>Month</th>
<th style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Вкажіть ширину стовпця таблиці (за допомогою CSS):
<table>
<tr>
<th style="width:200px">Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Спробуйте самі »
Пов’язані сторінки
HTML DOM довідник: ColumnGroup Object
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <colgroup> з наступними значеннями за замовчуванням:
