Создание и оформление колонок в таблице

Одним из тэгов, незаслуженно позабытым некоторыми web-дизайнерами, является тэг <COL>. Он задает ширину и некоторые другие атрибуты колонок таблицы. Интересная особенность: при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Но интересен этот тэг не только этим. С помощью него можно значительно упростить визуальное оформление таблицы и сократить html-код.

Предположим, вам нужно указать фон для ячеек таблицы. Если это необходимо сделать для ячеек, находящихся в одном ряду, то тут всё просто, задаём класс для <TR> и в стилях указываем цвет фона. А что если нужно указать фон для ячеек в колонке? Очень часто начинающие web-дизайнеры указывают класс каждой ячейке в колонке, хотя в этом нет необходимости если используется тэг <COL>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="1">
   <col style="background:red" />
	<tbody>
		<tr>
		<td>#1</td><td>#2</td><td>#3</td>
		</tr>
		<tr>
		<td>#4</td><td>#5</td><td>#6</td>
		</tr>
		<tr>
		<td>#7</td><td>#8</td><td>#9</td>
		</tr>
	</tbody><tbody>
</tbody></table>

Так же можно указать ширину колонки и выравнивание текста по горизонтали.

1

<col style="background:red; text-align:center; width:250px" />

В дополнение к этому, указав атрибут span для <COL> можно определить число колонок, к которым будут применяться заданные параметры или другими словами сколько ячеек объединит одна колонка.

<col span="2" style="background:red; text-align:center; width:250px" />

Internet Explorer приподнёс сюрприз: помимо документированных возможностей он поддерживает изменение цвета шрифта колонки.

<col style="background:red; text-align:center; width:250px; color:#fff" />

Другие браузеры этого не делают, что с одной стороны логично, так как ячейки таблицы не «вложены» в колонки, а «лежат» сверху, поэтому не должны наследовать стили. C другой стороны, выравнивание текста всё же происходит. Поэтому я всё же думаю, что поведение браузера IE в данном случае не более чем приятная «фича».

Дабы понять логику построения и визуального отображения таблицы в браузере взгляните на эту схему.

Колонки <COL> можно также группировать в группы колонок <COLGROUP>, обладающих общими параметрами.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<table border="1">
   <colgroup style="background:yellow" />
   <col />
   <col style="background:blue;" />
   <col style="background:red;" />
	<tbody>
		<tr>
			<td>#1</td><td>#2</td><td>#3</td>
		</tr>
		<tr>
			<td>#4</td><td>#5</td><td>#6</td>
		</tr>
		<tr>
			<td>#7</td><td>#8</td><td>#9</td>
		</tr>
	</tbody><tbody>
</tbody></table>

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