Пример 1. Ширина колонки в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">< html > < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8"> < title >Две колонки</ title > </ head > < body > < table width="100%" cellspacing="0" cellpadding="5"> < tr > < td width="200" valign="top">Левая колонка</ td >< td valign="top">Правая колонка</ td > </ tr > </ table > </ body ></ html >

В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).

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

<!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 >Две колонки</ title > < style type="text/css"> #maket { width: 100%; /* Ширина всей таблицы в процентах */ } #maket TD { vertical-align: top; /* Вертикальное выравнивание в ячейках */ } TD#leftcol { width: 200px; /* Ширина левой колонки в пикселах */ } </ style > </ head > < body > < table cellspacing="0" cellpadding="0" id="maket"> < tr > < td id="leftcol">Левая колонка</ td >< td >Правая колонка</ td > </ tr > </ table > </ body ></ html >

Поля внутри колонок

Расстояние между колонками регулируется атрибутом cellpadding тега <table>. Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, свойство padding, можно легко регулировать значение отступа для каждой колонки (пример 3).

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

<!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 >Две колонки</ title > < style type="text/css"> #leftcol { padding-right: 10px; /* Поле справа от текста */ vertical-align: top; /* Выравнивание по верхнему краю ячеек */ width: 200px; /* Ширина колонки */ } </ style > </ head > < body > < table width="100%" cellspacing="0" cellpadding="0"> < tr > < td id="leftcol">Левая колонка</ td >< td >Правая колонка</ td > </ tr > </ table > </ body ></ html >

В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right, который добавляется к левой ячейке через идентификатор с именем leftcol.

Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили.

Пример 4. Поля в ячейках

<!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 >Две колонки</ title > < style type="text/css"> #maket TD { padding: 5px; /* Поля вокруг содержимого ячеек */ vertical-align: top; /* Выравнивание по верхнему краю ячеек */ width: 200px; /* Ширина колонки */ } </ style > </ head > < body > < table width="100%" cellspacing="0" id="maket"> < tr > < td id="leftcol">Левая колонка</ td > < td valign="top">Правая колонка</ td > </ tr > </ table > </ body ></ html >

Цвет фона колонок

Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5).

Пример 5. Цвет фона

<!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 >Две колонки</ title > < style type="text/css"> #maket { width: 100%; /* Ширина всей таблицы */ } TD { vertical-align: top; /* Вертикальное выравнивание в ячейках */ padding: 5px; /* Поля вокруг ячеек */ } TD#leftcol { width: 200px; /* Ширина левой колонки */ background: #ccc; /* Цвет фона левой колонки */ } TD#rightcol { background: #fc3; /* Цвет фона правой колонки */ } </ style > </ head > < body > < table cellspacing="0" id="maket"> < tr > < td id="leftcol">Левая колонка</ td > < td id="rightcol">Правая колонка</ td > </ tr > </ table > </ body ></ html >

В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).

Рис. 1. Колонки разного цвета

Разделитель колонок

Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6).