Сочетание процентов и пикселов

Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы. Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы (рис. 1).

Рис. 1. Ширина средней колонки определяется браузером

Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем (пример 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"> TABLE { width: 100%; /* Ширина таблицы */ } TD { vertical-align: top; /* Выравнивание по верхнему краю ячейки */ } #col1 { width: 150px; /* Ширина первой колонки */ background: #fc0; /* Цвет фона первой колонки */ } #col2 { background: #afccdb; /* Цвет фона второй колонки */ } #col3 { width: 200px; /* Ширина третьей колонки */ background: #fc0; /* Цвет фона третьей колонки */ } </ style > </ head > < body > < table cellpadding="5" cellspacing="0"> < tr > < td id="col1">Колонка 1</ td > < td id="col2">Колонка 2</ td > < td id="col3">Колонка 3</ td > </ tr > </ table > </ body ></ html >

Во втором варианте ширина двух колонок устанавливается в процентах, а третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.

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

Рис. 2. Применение вложенных таблиц

Вначале создаем таблицу заданного размера и с двумя ячейками. Левая ячейка будет выступать в роли первой колонки, и для нее устанавливаем требуемую ширину в пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них определяем ширину в процентах (пример 4).