Лекции.Орг


Поиск:




Категории:

Астрономия
Биология
География
Другие языки
Интернет
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Механика
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Транспорт
Физика
Философия
Финансы
Химия
Экология
Экономика
Электроника

 

 

 

 


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




Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы. Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы (рис. 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).





Поделиться с друзьями:


Дата добавления: 2015-10-19; Мы поможем в написании ваших работ!; просмотров: 448 | Нарушение авторских прав


Поиск на сайте:

Лучшие изречения:

Большинство людей упускают появившуюся возможность, потому что она бывает одета в комбинезон и с виду напоминает работу © Томас Эдисон
==> читать все изречения...

2617 - | 2281 -


© 2015-2025 lektsii.org - Контакты - Последнее добавление

Ген: 0.009 с.