АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Пример табличной верстки из трех колонок, сочетающей проценты и пикселы

Читайте также:
  1. II.Примерная тематика курсовых работ
  2. SWОT – анализ - пример
  3. Анализ реализации функций системы самоменеджмента на предприятии (на примере ООО «ХХХ»)
  4. Анализ рынка недвижимости на примере многоквартирного жилья в г Пермь
  5. Аналогичный ему по строению дикаин, примерно в 10 раз активнее кокаина. Сейчас широко применяются более сложные по структуре соединения (например, анилид тримекаин).
  6. В качестве примера рассмотрим один клинический случай.
  7. В Трудовом кодексе найдите примеры (не менее 10), иллюстрирующие реализацию принципов трудового права. Подберите решения Конституционного суда РФ, основанные на этих принципах.
  8. Величины всех парциальных давлений р и барометрического давления В в формулах (51-52) должны иметь одинаковую размерность (например бар или Па).
  9. Включите в каждую колонку таблицы по 2-3 собственных примера. Ответ аргументируйте.
  10. Второй пример.
  11. Входные данные примерной, авторской программы.
  12. Глава II. Пример взаимоотношений человека и группы в туристском предприятии «Стар-Тревел»

Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы.

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

Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем. При этом обязательно следует определить общую ширину всей таблицы.

<table width=100%>

<tr>

<td width=150 bgcolor= #fc0>Колонка 1</td> <td bgcolor= #afccdb>Колонка 2</td> <td width=200 bgcolor = #fc0>Колонка 3</td>

</tr>

</table>

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

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

 

 

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

 

<table width=100% cellspacing=0 cellpading=0>

<tr>

<td width=150 bgcolor= #fc0>Колонка 1</td>

<td>

<table width=100% cellspacing=0>

<tr>

<td width=60% bgcolor=#afccdb>Колонка 2</td>

<td width=40% bgcolor=#fc0>Колонка 3</td>

</tr>

</table>

</td>

</tr>

</table>

При создании подобного макета следует принимать во внимание следующие моменты.


1 | 2 | 3 | 4 | 5 |

Поиск по сайту:

Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.005 сек.)