Дорогой друг!

Справочник HTML переехал на новый сайт с коротким и простым адресом webref.ru. Там справочник регулярно обновляется и пополняется. Он актуальнее, лучше, полнее и содержит ряд интересных возможностей. На htmlbook.ru справочник HTML больше обновляться не будет и со временем закроется. Переходи на сайт webref.ru и пользуйся им на здоровье.

Тег <col>


Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <col> задает ширину и другие характеристики одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <col> можно использовать совместно с тегом <colgroup>, который задает группу колонок, обладающих общими характеристиками.

Синтаксис

HTML 
<table>
  <col атрибуты>
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML 
<table>
  <col атрибуты />
  <tr>
   <td>...</td>
  </tr>
</table>

Атрибуты

align
Устанавливает выравнивание содержимого колонки по краю.
char
Выравнивает содержимое колонки по заданному символу.
charoff
Сдвигает содержимое ячейки относительно заданного символа.
span
Количество колонок, к которым следует применять параметры.
valign
Задает вертикальное выравнивание содержимого колонки.
width
Ширина колонок.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег COL</title>
 </head>
 <body>

  <table width="400" border="0" cellpadding="5" cellspacing="0">
   <col width="150" valign="top">
   <col width="250" valign="top">
   <tr>
    <td style="background: #B0B28E">Lorem ipsum dolor sit amet, consectetuer 
     adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
     dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
     nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
     ea commodo consequat.
    </td>
    <td style="background: #CCCCCC">Lorem ipsum dolor sit amet, consectetuer 
     adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
     dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
     nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
     ea commodo consequat. 
    </td>
   </tr>
  </table>

 </body>
</html>

Результат данного примера показан на рис. 1. В браузерах Firefox, Safari и Chrome текст по верхнему краю ячейки выравниваться не будет (рис. 2).

Рис. 1

Рис. 1. Вид колонок в браузере Opera

Рис. 2

Рис. 2. Вид колонок в браузере Safari

Таблицы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.