www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Теги ШТМЛ > Тег COL
Теги ШТМЛ
Все теги
!DOCTYPE
A
ABBR
ACRONYM
ADDRESS
AREA
B
BASE
BASEFONT
BDO
BGSOUND
BIG
BLOCKQUOTE
BODY
BR
BUTTON
CAPTION
CENTER
CITE
CODE
COL
COLGROUP
DD
DEL
DFN
DIV
DL
DT
EM
EMBED
FIELDSET
FONT
FORM
FRAME
FRAMESET
H1...H6
HEAD
HR
ШТМЛ
I
IFRAME
IMG
INPUT
INS
KBD
LABEL
LEGEND
LI
LINK
MAP
MARQUEE
META
NOBR
NOEMBED
NOFRAMES
NOSCRIPT
OBJECT
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
UL
VAR
WBR
XMP
Теги по типам
файл
Звук
Имаги
Объекты
Скрипты
Списки
Ссылки
Таблица
контент
Форматирование
Формы
Фреймы

Тег COL

Браузер Internet ExplorerInternet Explorer NetscapeNetтscape OperaОпера SafariSafari Файер фохMozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<table> <col ...> <tr><td>...</td></tr> </table>

Параметры

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

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

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

Пример 1. Использование тега <COL>

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 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.

Рис. 1

Рис. 1. Применение тега <COL> для разработки колонок

Описание параметров тега COL

Параметр ALIGN

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Задает выравнивание содержимого колонок по горизонтали. Этот параметр действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом <TH>. Чтобы управлять выравниванием содержимого разных элементов воспользуйтесь стилями или устанавливайте параметр align для отдельных ячеек таблицы.

Синтаксис

<col align="left | center | right">

Аргументы

left
Выравнивание контента по левоой стороне.
center
Выравнивание по центру.
right
Выравнивание по правой стороне.

Значение по умолчанию

left

Аналог CSS (ЦСС)

text-align

Пример 2. Выравнивание в колонках

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, параметр align</title>
 </head>
 <body>

  <table border="1" width="400">
   <col align="left">
   <col span="3" width="50" align="center">
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
  </table>

 </body>
</html>

Параметр SPAN

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег <COL> работает для одной колонки. Допускается применять параметр span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.

Синтаксис

<col span="число">

Аргументы

Целое положительное значение.

Значение по умолчанию

1

Пример 3. Использование параметра span

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, параметр span</title>
 </head>
 <body>

  <table width="700" cellspacing="0" border="1">
   <col width="150">
   <col span="5" width="50" align="center">
   <col span="4" width="75" align="center">
   <tr> 
    <td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
    <td>1998</td><td>1999</td><td>2000</td><td>2001</td>
    <td>2002</td><td>2003</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>

 </body>
</html>

Параметр VALIGN

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.

Синтаксис

<col valign="baseline | bottom | middle | top">

Аргументы

baseline
Выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии. Браузеры не поддерживают этот параметр.
bottom
Выравнивание по нижнему краю.
middle
Выравнивание по середине.
top
Выравнивание по верхнему краю строки.

Значение по умолчанию

middle

Пример 4. Выравнивание в колонках

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, параметр valign</title>
 </head>
 <body>

  <table width="700" border="1">
   <col width="150">
   <col valign="top">
   <tr>
    <td>1<Br>1<Br>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
  </table>

 </body>
</html>

Параметр WIDTH

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования контента. В случае, когда это невозможно, например, в колонке находятся Имаги, параметр width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.

Синтаксис

<col width="значение">

Аргументы

Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 600 пикселов, а для колонок — 1*, 2*, то в пикселах это будет соответственно 200 и 400. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Аналог CSS (ЦСС)

width

Пример 5. Ширина колонок

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег COL, параметр width</title>
 </head>
 <body>

  <table cellpadding="10" border="1" width="100%">
   <col width="20%">
   <col width="80%">
   <tr>
    <td> ... </td>
    <td> ... </td>
   </tr> 
  </table> 

 </body>
</html>

Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект