Достоинства и недостатки. Таблица служит для отображения упорядоченных данных в строках и столбцах

Таблица служит для отображения упорядоченных данных в строках и столбцах, имеющих смысловую связь по горизонтали или вертикали. Отсюда следует главное достоинство: ячейки таблиц выравниваются по сетке, что позволяет простым и очевидным образом создать модульную сетку.

Ячейки таблиц идут в коде строго друг за другом, слева направо или справа налево в зависимости от направления языка, заданного CSS-свойством direction или его аналогом в HTML, атрибутом dir.

Это неотъемлемое свойство таблиц позволяет заполнить плоскость окна браузера и создавать «резиновые сайты». Но, как при малых, так и больших размерах окна просмотра браузера структура таблицы не меняется, она не может гибко адаптироваться под доступное пространство.

Раскладка

· Жёсткая

При table-layout: fixed ширина ячеек таблицы задаётся непосредственно, либо равномерно распределяется среди колонок. Таблица теряет возможность автоматического расчёта ширины с учётом заполненности ячеек. Переполнение ячеек обрабатывается в соответствии со значением свойства overflow. Спецификация оставляет браузерам возможность всегда использовать этот режим. Его могут применять мобильные браузеры, ограниченные в ресурсах для сложной обработки таблиц.

· Автоматическая

При table-layout: auto содержимое не может выйти за границы ячейки, и свойство overflow не имеет действия. При этом нельзя заставить таблицу всегда оставаться в заданных рамках. Из-за автоматического расчёта ширины, она не уменьшится, даже если есть overflow: hidden у элемента с неопределенной шириной внутри ячейки.

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

Страница 4

Margin

Краткая информация

Описание

Свойство margin задает поля (внешние отступы элемента) — отступы от внешней границы элемента до границ родительского элемента или до соседних элементов (рис. 1).

Рисунок 1 – Блочная модель

Строчные элементы реагируют только на горизонтальные отступы.

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом:

1. Поля будут установлены одинаково от каждого края элемента (margin: 10px).

2. Первое значение устанавливает поле от верхнего и нижнего края, второе — от левого и правого (margin: 5px 10px).

3. Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края (margin: 5px 10px 15px).

4. Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края (margin: 5px 10px 15px 20px).

Возможные значения – одно, два, три или четыре следующих значения: ширина (задается в стандартных единицах длины), процент % (задается процент от родительского элемента), auto (расстояние будет рассчитываться браузером автоматически).

Страница 5

Безусловно, позиционирование с использованием таблиц стилей – тема достаточно сложная, богатая многими нюансами и различными «подводными камнями» в части толкования правил CSS разработчиками разных программ просмотра. Но, с другой стороны, игра стоит свеч, поскольку отказ от верстки документов с использованием обычных таблиц и прочих «хитростей» вроде невидимых изображений, позволяет добиться гибкости в оформлении. А при умелом использовании возможностей CSS можно получать достаточно сложные эффекты, зачастую даже нереализуемые средствами XHTML, и все это – без нагромождений лишнего кода.

За назначение элементу той или иной схемы позиционирования в CSS 2 отвечают свойства position и float, причем первое служит для позиционирования в нормальном потоке, относительного и абсолютного, а второе – только для создания перемещаемых (плавающих) элементов.

Рассмотрим свойство position. Оно может принимать одно из значений, приведенных в таблице.

Свойство position

· Значение по умолчанию: static;

· Наследуемые значения: нет;

· Применяется: ко всем элементам;

· Совместимость: все.

Приложение Б