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>полезен для применения стилей ко всем столбцам вместо повторения стилей для каждой ячейки, для каждой строки.


Поддержка браузера

Element
<col> Yes Yes Yes Yes Yes

Атрибуты

Attribute Value Description
span number Specifies the number of columns a <col> element should span

Глобальные атрибуты

Тег <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: объект столбца


Настройки CSS по умолчанию

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

Пример

col {
  display: table-column;
}