Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Ноябрь, 2016

Применение таблиц

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

Создание декоративной рамки

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

Рис. 1. Прямоугольная рамка с закругленными углами

Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной границы до содержимого рамки. Представьте на месте пятого фрагмента любой текст и решите для себя, насколько близко располагается он к границе.

Замечание

Вообще-то отступы от текста до рамки не обязательно регулировать с помощью ширины рисунков, можно воспользоваться стилевым свойством padding, применяя его к ячейке с содержимым.

Рис. 2. Изображение, разрезанное на элементы

После разрезания рисунка на части получим девять фрагментов, но в итоге нам понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна, поскольку ее заменит содержимое рамки, текст, например.

Фрагменты 2 и 8 имеют слишком большую ширину, поэтому их можно несколько обрезать. Аналогично дело обстоит и с фрагментами 4 и 6, только их сокращаем по высоте. В результате получим восемь графических изображений представленных в табл. 1.

Табл. 1. Рисунки, необходимые для создания рамки

Рисунок Положение Имя файла
Левый верний угол 01.gif
Верхняя горизонтальная линия 02.gif
Правый верхний угол 03.gif
Левая вертикальная линия 04.gif
Правая вертикальная линия 06.gif
Левый нижний угол 07.gif
Нижняя горизонтальная линия 08.gif
Правый нижний угол 09.gif

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

Рис. 3. Таблица для создания рамки

Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с размерами соответствующих рисунков — уголков, вертикальных и горизонтальных линий и устанавливаться в пикселах. Также в этой таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой (пример 1).

Пример 1. Создание декоративной рамки

#content {  padding: 5px; }                         

Содержимое

В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки вставляются как обычные рисунки с помощью тега , а вот горизонтальные и вертикальные линии задаются с помощью фона ячейки (параметр background). Это позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в зависимости от содержимого. Иными словами, при замене width=»400″ на width=»100%», рамка будет отображаться по-прежнему корректно.

Замечание

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

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

Добавление тени

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

Рис. 4. Исходное изображение тени

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

Табл. 2. Рисунки, необходимые для создания тени

Рисунок Положение Имя файла
Вертикальная тень 01.gif
Горизонтальная тень 02.gif
Правый нижний уголок тени 03.gif
Правая верхняя заглушка 04.gif
Левая нижняя заглушка 05.gif

Заглушки необходимы для того, чтобы тень имела сглаженные края и выглядела законченной.

Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее устанавливается по желанию, а ширина правой колонки должна равняться ширине рисунка с тенью (01.gif). Высота нижних ячеек таблицы также должна совпадать с высотой рисунка тени (02.gif).

Рис. 5. Таблица для создания тени

Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с помощью параметра background тега

(пример 2).

Пример 2. Создание тени

#content {  padding: 5px;  background: #dd9; }

   

  

       

Великаны должны быть или большие, или их должно быть много, если они маленькие.

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

Результат данного примера показан на рис. 6.

Рис. 6. Добавление тени к блоку текста

Табличная верстка нынче совсем не в почете. Буквально на каждом углу кричат, что надо переходить к верстке с помощью слоев, потому что это соответствует стандартам, правильнее и вообще «прикольно». Почему слои лучше таблиц обычно не сообщают, так что приходится либо верить на слово, либо решать дилемму самостоятельно. Поэтому попытаемся объективно решить, что же представляют собой таблицы, где их следует применять, а где не стоит.

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

Преимущества таблиц

Таблицы довольно долго властвовали в области верстки, поскольку предлагали достаточно простые методы для размещения разных элементов на веб-странице при отсутствии явных конкурентов. Благодаря наличию большого числа параметров, особенно границе нулевой толщины, таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы. Удобство и широкие возможности верстки — вот основной реверанс в пользу таблиц. И на этом список не заканчивается, далее рассмотрены и другие плюсы таблиц.

Создание колонок

Одноколонная модульная сетка применяется на сайтах достаточно редко. Действительно, основной текст и ссылки по сайту удобнее располагать в разных колонках, разделяя их тем самым. Таблицы же хорошо выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.

«Резиновый» макет

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

«Склейка» изображений

Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.

Фоновые рисунки

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

Выравнивание элементов

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

Особенности браузеров

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

Недостатки таблиц

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

Долгая загрузка

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

Существуют и способы обхода этого свойства, в частности, разбиение одной большой таблицы на несколько таблиц поменьше, а также использование стилевого свойства table-layout.

Громоздкий код

Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров. В некоторых случаях для достижения желаемого результата приходится вкладывать одну таблицу внутрь другой, а это также влияет на размер «шелухи», т.е. кода, который не принимает непосредственного участия в отображении веб-страницы.

Плохая индексация поисковиками

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

Нет разделения содержимого и оформления

В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду веб-страницы и править его.

Несоответствие стандартам

В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.

Что же говорит спецификация относительно таблиц? А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.

Применение таблиц для верстки

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

Высота колонок должна быть одинаковой

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

Макет должен занимать всю высоту окна браузера, независимо от объема информации

С помощью таблицы можно добиться эффекта, что нижняя часть страницы («подвал») выравнивается по нижнему краю окна браузера. Это имеет смысл в том случае, если объема данных не хватает для увеличения высоты документа. В противном случае часть страницы будет «висеть» в середине окна. Естественно, для документа достаточного объема его отображение происходит как обычно.

Нет времени на сложную верстку

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

Если подходить критично к способам использования таблиц, то действительной причиной их популярности является консерватизм разработчиков, привычность и быстрота верстки сайтов с их помощью. Ясно одно — таблицы постепенно сдают свои позиции в пользу верстки слоями. Но пройдет еще несколько лет, прежде чем «табличные» сайты станут раритетом и исчезнут с простора Рунета.

Разрезание изображения на фрагменты с последующим их объединением в одну целую картинку — давний прием, вошедший в арсенал верстки веб-страниц. Предварительно подготовленный рисунок разрезают на части в графическом редакторе, сохраняют их как отдельные графические изображения, а затем соединяют их вместе с помощью таблицы.

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

Плюсы разрезания изображений

Создание ссылок

Отдельные рисунки при необходимости можно превращать в ссылки, причем для них можно назначать свое описание (параметр title) и альтернативный текст (параметр alt), который виден при отключении показа картинок в браузере или при наведении курсора мыши на изображение.

Эффект перекатывания

Набор отдельных фрагментов позволяет создавать rollover или эффект перекатывания — динамическое изменение одного рисунка на другой при наведении на него курсора мыши, и обратно на прежний, когда курсор уводится прочь.

Уменьшение объема файлов

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

Анимированный GIF

Использование анимированного GIFa для изображений большого размера чревато существенным увеличением объема файла. Но можно пойти на хитрость и заменить лишь часть изображения анимацией, а остальные фрагменты оставить статичными. При этом общий объем нескольких файлов будет гораздо меньше, чем анимирование одного изображения.

Особенности верстки

Изображения на веб-странице по своей природе прямоугольны, но, разрезав один рисунок на составляющие элементы, получим конструктор, из которого можно сложить другую фигуру. Это напоминает детские кубики, на одну из сторон которых наклеена картинка. Складывать подобные фигуры на веб-странице требуется в силу разных причин, например, вместо фрагмента изображения требуется добавить текст. Кроме того, некоторые рисунки можно заменить их фоновым аналогом и тогда конечное изображения, сохраняя свою целостность, будет занимать всю доступную область документа.

Психологический аспект

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

Подготовка изображения

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

Рис. 1. Исходное изображение

Теоретически, в данном случае можно обойтись и без разрезания, если использовать изображение-карту (теги и ). Однако этот вариант неприемлем в силу следующих соображений. По задумке разработчиков при открытии любого раздела, иконка ему соответствующая, трансформируется, что в целом меняет изображение целиком (рис. 2). Если применять изображение-карту, то придется заготовить шесть различных изображений (одну для главной страницы и еще пять для каждого раздела), а это скажется в итоге на объеме пересылаемых данных, скорости отображения сайта и качестве рисунков. Следует еще учесть, что представленное на рис. 1 изображение дано в уменьшенном масштабе, чем оно используется в действительности, поэтому объем одного файла получится достаточно большим.

Рис. 2. Вид изображения при открытии раздела «Байки»

Теперь требуется решить, как разрезать изображение. Вариантов здесь может быть несколько — в конечном итоге это зависит от воли автора, предназначения рисунка и его содержимого.

Разрезание изображения

Разрезание и «сборку» рисунка лучше доверить специализированной программе, в частности, это умеет делать Adobe Photoshop, Adobe ImageReady, Macromedia FireWorks и др. В дальнейшем для этой будем цели использовать Photoshop, так что все упоминания об инструментах и меню относится именно к этой программе.

Для удобства разрезания изображения вначале следует добавить направляющие линии, по которым затем и будет происходить разделение на фрагменты (рис. 3).

Рис. 3. Добавляем в изображение направляющие

Теперь используем инструмент Slice (, активация клавишей ) и по направляющим обводим требуемую прямоугольную область. Обозначенная область отмечается синей рамкой с номером фрагмента в левом верхнем углу. Размер областей можно изменять через специальный инструмент Slice Select — . Щелкаем мышью с этим инструментом по желаемому фрагменту — цвет рамки вокруг области становится желтым, а также изменяется тональность рисунка. После чего курсором мыши можно перемещать границы фрагмента за специальные маркеры по бокам и в углах области (рис. 4).

Рис. 4. Изменение области фрагмента

Замечание

Для быстрого переключения между инструментами Slice и Slice Select нажмите и удерживайте клавишу .

Во время изменения размеров фрагментов, следите за тем, чтобы области не пересекались друг с другом, и между ними не возникало промежутков. Хотя Photoshop сам отмечает подобные недочеты и принимает меры к их устранению, лучше держать все под своим контролем.

После предварительного анализа и применения инструмента Slice, получим 18 фрагментов (рис. 5).

Рис. 5. Разрезанное на фрагменты изображение

Опасаться того, что получилось много рисунков, не стоит из-за того, что часть фрагментов содержит пустое изображение (14, 16 и 15), а часть фрагментов, за исключением ширины, идентичны (3, 5, 7 и 9). Таким образом, число картинок сокращается, поскольку часть из них можно заменить одним прозрачным однопиксельным рисунком, устанавливая у него такие же размеры, как у исходного фрагмента.

Использование однопиксельного прозрачного рисунка в формате GIF достаточно распространенный прием при верстке веб-страниц. Действительно, объем файла минимален (всего 43 байта), картинку при этом можно масштабировать до любого размера, и сквозь нее виден фон.

Использование таблицы для склейки фрагментов

После того, как фрагменты обозначены, требуется сохранить все изображения на диск. Для этого выбираем пункт меню File > Save for Web… (+++) чтобы открыть панель оптимизации графики (рис. 6).

Рис. 6. Панель оптимизации изображений

С помощью инструмента Slice Select можно выбирать требуемый фрагмент и устанавливать для него персональные параметры вроде количества цветов, значение потерь качества, прозрачность и т.д. Допускается выделять сразу несколько фрагментов, удерживая клавишу , что позволяет устанавливать для них одинаковые параметры.

По окончанию работы с фрагментами нажимаем кнопку Save и указываем место на диске, куда будет сохранен HTML-документ. Рисунки сохраняются автоматически в папку images, а их имя образуется от имени HTML-файла с добавлением номера фрагмента. Например, сохраняемое имя будет splash.php, тогда первый фрагмент называется splash_01.gif, а последний — splash_18.gif. Кроме того, создается файл spacer.gif, который представляет собой уже упоминаемый прозрачный рисунок размером 1х1 пиксел. Он используется для правильного формирования изображений в таблице.

Настройки, по которым строится HTML-код и формируются имена изображений можно изменить, если при сохранении файла в разделе Settings выбрать пункт Other… (рис. 7).

Рис. 7. Выбор параметров для конечных файлов

В окне параметров можно выбирать папку, куда сохранять рисунки, способ формирования имен файлов, а также HTML-кода (рис. 8).

Рис. 8. Панель для выбора выходных настроек

Полученный в результате сохранения файлов HTML-код, после небольшого редактирования представлен в примере 1.

Пример 1. Таблица для склейки изображений

                                                                    

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

Чтобы получить требуемый результат, введем слой с фоновым рисунком и нашу таблицу наложим поверх него. Такое изображение представлено на рис. 9.

Рис. 9. Фоновый рисунок, рамка вокруг приведена для наглядности

Теперь создаем нужный слой, назовем его toplayer, и в стилях указываем его параметры (пример 2).

Пример 2. Слой для формирования полос

#toplayer {

background:  #aeae9b  url(«images/bgtop.gif»)  repeat-x; height: 235px; border-bottom: 2px solid #8f8f8f; } …

В данном примере параметры фона устанавливаются через универсальное свойство background, которое определяет путь к графическому файлу, цвет заливки и повторяемость рисунка. Хотя цвет фона в таких случаях можно не указывать раз есть фоновый рисунок, но на случай того, что пользователь отключил загрузку изображений, лучше это сделать. Высота слоя также не является обязательным параметром из-за того, что таблица внутри слоя имеет заданную высоту.

Остается заменить фрагменты с номерами 3, 4, 5, 6, 7, 8, 9 14, 15 и 16 на рисунок spacer.gif, сохранив исходные размеры изображений и удалить нижнюю строку таблицы, которая для главной страницы является лишней (пример 3). Использование файла spacer.gif позволяет сократить конечный код и уменьшить требуемое число графических файлов.

Пример 3. Окончательный код

#toplayer {  background: #aeae9b url(«images/bgtop.gif») repeat-x;  height: 235px;  border-bottom: 2px solid #8f8f8f; }

                                                        

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

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

Ширина колонок в пикселах

Ширина разных колонок зависит от используемого макета — фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. В примере 1 ширина макета задана как 750 пикселов, а колонки соответственно 150, 400 и 200 пикселов.

Пример 1. Фиксированная ширина колонок

TD {  vertical-align: top; }

Колонка 1 Колонка 2 Колонка 3

При определении ширины колонок следует принимать во внимание значение параметра cellpadding. На ширину ячеек этот аргумент не влияет, но зато уменьшает область, которая отводится под содержимое ячеек.

Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать». Это, по-английски говоря, not good (для тех, кто не понял, нехорошо), поскольку вид документов должен оставаться единым. Так что ширину колонок лучше все-таки задавать.

Ширина колонок в процентах

При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:

  1. ширина всех ячеек задана в процентах;
  2. сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.

В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 2). Причем в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.

Пример 2. Ширина колонок в процентах

TD { vertical-align: top; } #col1 {  width: 20%;  background: #fc0; } #col2 {  width: 40%;  background: #f0f0f0; } #col3 {  width: 40%;  background: #fc0; }

Колонка 1 Колонка 2 Колонка 3

Для удобства изменения вида колонок параметры в данном примере перенесены в стили.

Процентная запись для таблиц имеет ряд преимуществ — используется все свободное пространство веб-страницы, а сам макет подстраивается под ширину окна браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при достижении которого таблица уже не уменьшается и начинает отображаться горизонтальная полоса прокрутки. Такой минимальный размер зависит от содержимого таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200 пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения полей вокруг изображений.

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

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

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

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

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

TABLE {  width: 100%; } TD {  vertical-align: top; } #col1 {  width: 150px;  background: #fc0; } #col2 {  background: #afccdb; } #col3 {  width: 200px;  background: #fc0; }

Колонка 1 Колонка 2 Колонка 3

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

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

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

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

Пример 4. Вложенные таблицы

TABLE { width: 100%; } TD { vertical-align: top; } #col1 { width: 150px; background: #fc0; } #col2 { width: 60%; background: #afccdb; } #col3 { width: 40%; background: #fc0; } #col1, #col2, #col3 { padding: 5px; }

Колонка 1             

Колонка 2 Колонка 3

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

  • Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала все свободное пространство.
  • Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение параметров cellpadding и cellspacing. Поля можно устанавливать через атрибут padding, как показано в данном примере.
  • Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.
Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.0 5.5 6.0 6.0 7.0 8.0 6.0 7.0 8.0 1.0 1.7 1.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative, аргумент top отсчитывается от верхнего края исходного положения элемента.

Рис. 1. Значение параметра top

Синтаксис

top: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента.

Пример

#menu {  position: absolute;  left: 350px;  top: 50px;  width: 120px;  background: #e0e0e0;  border: 1px solid #000;  padding: 5px } #content {  position: absolute;  left: 0px;  top: 0px;  width: 400px;  background: #800000;  color: white;  padding: 5px } … …

Объектная модель

[window.]document.getElementById(«elementID»).style.top

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.0 5.5 6.0 6.0 7.0 8.0 6.0 7.0 8.0 1.0 1.7 1.0
Поддерживается Част. Част. Част. Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию baseline
Наследуется Нет
Применяется К встроенным элементам или ячейкам таблицы.
Аналог HTML

Част. поддерживается частично.

Описание

Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

Синтаксис

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты

Аргументы

baseline Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента. bottom Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех. middle Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. sub Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется. super Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним. text-bottom Нижняя граница элемента выравнивается по самому нижнему краю текущей строки. text-top Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. top Выравнивание верхнего края элемента по верху самого высокого элемента строки.

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

Пример

TEX и LATEX

Объектная модель

[window.]document.getElementById(«elementID»).style.verticalAlign

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.0 5.5 6.0 6.0 7.0 8.0 6.0 7.0 8.0 1.0 1.7 1.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам, за исключением встроенных незаменяемых элементов, колонкам и группам таблицы
Аналог HTML

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег ). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Браузеры по-разному реагируют на настройки высоты элемента. Если его содержимое превышает указанную высоту, то Internet Explorer и Opera проигнорируют значение параметра height и автоматически подстроят высоту под контент. Браузер Netscape (а также Mozilla и FireFox) оставит высоту элемента неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, в случае, когда в коде HTML они идут последовательно. Чтобы этого не произошло, можно добавить свойство overflow: auto к стилю элемента.

Синтаксис

height: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Аргумент auto устанавливает высоту исходя из содержимого элемента

Пример

.layer {  height: 50px;  width: 150px;  overflow: scroll;  background: #fc0;  padding: 7px;  border: 1px solid #333; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Объектная модель

[window.]document.getElementById(«elementID»).style.height

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.0 5.5 6.0 6.0 7.0 8.0 6.0 7.0 8.0 1.0 1.7 1.0
Поддерживается Нет Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента.

Рис. 1. Значение параметра right

Синтаксис

right: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. Аргумент auto не изменяет положение элемента.

Пример

#leftcol {  position: absolute;  top: 20px;  left: 20px;  width: 100px;  background: #fc3;  border: 1px solid #000;  padding: 10px; } #centercol {  position: relative;  background: maroon;  padding: 10px;  color: white;  margin: 20px 250px 0px 150px; } #rightcol {  position: absolute;  top: 20px;  right: 20px;  width: 200px;  background: #ccc;  border: 1px solid black;  padding: 10px; } … … …

Объектная модель

[window.]document.getElementById(«elementID»).style.right

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.0 5.5 6.0 6.0 7.0 8.0 6.0 7.0 8.0 1.0 1.7 1.0
Поддерживается Ошибки Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора равное нулю.

Параметр margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

margin: значение | auto {1,4}

Аргументы

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.

Табл. 1. Зависимость от числа аргументов

Число аргументов Результат
1 Отступы будут установлены для всех сторон элемента.
2 Первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент от левого и правого.
3 Первый аргумент задает отступ от верхнего края, второй  одновременно от левого и правого края, а третий  от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

BODY {  margin: 0px; } DIV.parent {  margin: 20%;  background: #fd0;  padding: 10px; } DIV.child {  border: 3px solid #666;  padding: 10px;  margin: 10px; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Объектная модель

[window.]document.getElementById(«elementID»).style.margin

Примечание

Параметр margin хорошо поддерживается для блочных элементов в браузере Internet Explorer 5, но в то же время для встроенных элементов игнорируется полностью.

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.0 5.5 6.0 6.0 7.0 8.0 6.0 7.0 8.0 1.0 1.7 1.0
Поддерживается Ошибки Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет

Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от нижнего края элемента

Синтаксис

margin-bottom: значение | auto

Аргументы

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

.layer1 {  background: #008B66;  color: white;  padding: 10px;  margin-bottom: -7px; } .layer2 {  margin-left: 40px;  background: #ccc;  padding: 10px; } Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Объектная модель

[window.]document.getElementById(«elementID»).style.marginBottom

Примечание

Параметр margin-bottom хорошо поддерживается для блочных элементов в браузере Internet Explorer 5, но в то же время для встроенных элементов игнорируется полностью.