Тег COL
Описание
Тег <COL> задает ширину и другие атрибуты одной
или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать
содержимое таблицы, не дожидаясь ее полной загрузки. Тег <COL>
можно использовать совместно с тегом <COLGROUP>,
который задает группу колонок, обладающих общими параметрами.
Синтаксис
<table>
<col ...>
<tr><td>...</td></tr>
</table>
Параметры
- align
- Устанавливает выравнивание содержимого колонки по краю.
- span
- Количество колонок, к которым следует применять параметры.
- valign
- Задает вертикальное выравнивание содержимого колонки.
- width
- Ширина колонок.
Закрывающий тег
Не требуется.
Пример 1. Использование тега <COL>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table width="700" border="0" cellpadding="5"
cellspacing="0">
<col width="250">
<col width="450">
<tr>
<td bgcolor="#B0B28E" valign="top">
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 bgcolor="#CCCCCC" valign="top">
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>
Описание параметров тега COL
Параметр ALIGN
Описание
Задает выравнивание содержимого колонок по горизонтали. Этот параметр действует
на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются
тегом <TH>. Чтобы управлять выравниванием содержимого
разных элементов воспользуйтесь стилями или устанавливайте параметр align
для отдельных ячеек таблицы.
Синтаксис
<col align="left | center | right">
Аргументы
- left
- Выравнивание контента по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
Значение по умолчанию
left
Аналог CSS
text-align
Пример 2. Выравнивание в колонках
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table>
<col align="left">
<col span="3" width="50"
align="center">
...
</table>
</body>
</html>
Параметр SPAN
Описание
Определяет число колонок, к которым будут применяться заданные параметры.
Если этот атрибут отсутствует, то тег <COL> работает
для одной колонки. Допускается применять параметр span
к нескольким колонкам и таким образом формировать группы колонок с одинаковыми
характеристиками.
Синтаксис
<col span="число">
Аргументы
Целое положительное значение.
Значение по умолчанию
1
Пример 3. Использование параметра span
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table width="700" cellspacing="0" border="1"
bordercolor="black">
<col width="150">
<col
span="5" width="50"
align="center">
<col span="4" width="75" align="center">
<tr>
<td> </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
Описание
Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию
контент ячеек в колонке располагается по центру вертикали.
Синтаксис
<col valign="baseline | bottom | middle | top">
Аргументы
- baseline
- Выравнивание по базовой линии, при этом происходит привязка содержимого
колонки к одной линии.
- bottom
- Выравнивание по нижнему краю.
- middle
- Выравнивание по середине.
- top
- Выравнивание по верхнему краю строки.
Значение по умолчанию
middle
Пример 4. Выраванивание в колонках
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table width="700">
<col width="150">
<col
valign="top">
...
</table>
</body>
</html>
Параметр WIDTH
Описание
Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину,
то браузер будет пытаться «втиснуться» в заданные размеры за счет
форматирования текста. В случае, когда это невозможно, например, в колонке находятся
изображения, параметр width будет проигнорирован,
и новая ширина колонки будет вычислена на основе ее содержимого.
Синтаксис
<col width="значение">
Аргументы
Обычно применяется любое целое значение в пикселах или процентах от доступного
пространства. Альтернативный вариант основан на использовании символа *, который
обозначает всю доступную ширину. Допустимо использовать кратные значения, например
3*. Например, если для таблицы установлена ширина 600 пикселов, а для колонок
— 1*, 2*, то в пикселах это будет соответственно 200 и 400. При использовании
подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить
необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.
Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.
Аналог CSS
width
Пример 5. Ширина колонок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table cellpadding="10" border="1" bordercolor="red">
<col
width="20%">
<col width="80%">
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>
