НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. W3Schools українською. Повний довідник тегів

En

HTML Тег <col>


Приклад

Установіть колір тла трьох стовпців за допомогою тегів <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>
Спробуйте самі »

Більше прикладів "Спробуйте самі" далі.


Визначення та використання

Тег <col> визначає властивості стовпця для кожного стовпця в межах елемента <colgroup>.

Тег <col> корисний для застосування стилів до цілих стовпців замість повторення стилів для кожної комірки, для кожного рядка.


Підтримка браузерами

Елемент
<col> Yes Yes Yes Yes Yes

Атрибути

Атрибут Значення Опис
span number Визначає кількість стовпців, які елемент <col> має охоплювати

Глобальні атрибути

Тег <col> також підтримує Глобальні атрибути в HTML.


Атрибути подій

Тег <col> також підтримує Атрибути подій в 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:130px">Month</th>
    <th style="width:80px">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
Спробуйте самі »

Пов’язані сторінки

HTML DOM довідник: Об’єкт Column


CSS налаштування за замовчуванням

Більшість браузерів будуть відображати елемент <col> з наступними значеннями за замовчуванням:

Приклад

col {
  display: table-column;
}
Спробуйте самі »