В своё время, только начиная изучать азы web-дизайна, я столкнулся с
проблемой смехотворной, но знакомой каждому начинающему web-мастеру:
как расставить на странице все элементы так, чтобы они гармонично
сочетались и, при этом, не мешали друг другу.
Перейдя
с места в карьер, я стал использовать слои, но столкнулся с тем, что не
все браузеры их поддерживали, а значит, не могли правильно
отформатировать мои страницы. Это заставило меня уделить внимание
таблицам.
Опыт, приобретенный в дальнейшем, показал, что таблицы,
при всей банальной простоте своего построения, не так уж и просты.
Ошибиться в форматировании страницы с помощью таблиц также легко, как и
строить их. При этом, ошибки дают о себе знать неожиданно, как бы
исподтишка, в разных браузерах по-разному. И приходится тратить массу
времени для выявления и устранения ошибки, так, чтобы не породить новую.
Тема
данной статьи может вызвать снисходительную улыбку у того, кто считает
себя ассом в web-дизайне, тем не менее, я рассчитываю на внимание тех,
кто только начал свой путь на этом поприще, или всегда открыт для
восприятия накопленного другими опыта.
1. Таблицы как таковые.
Для
начала, напомню самое простое: как создается каркас таблицы. Все
начинается с пары тегов table: <table></table>. Они имеют
свои стандартные параметры align, border, cellspacing, cellpadding,
width, которые отвечают за выравнивание таблицы относительно окна
браузера, за наличие рамки у таблицы, за расстояние между ячейками
таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так
и в пикселях). Далее следует пара тегов, определяющих строку таблицы:
<tr></tr> Стандартными параметрами для строки являются
align и valign, отвечающие за выравнивание ячеек внутри строки по
горизонтали и по вертикали. Последняя пара тегов - это теги самих
ячеек: <td></td>. С теми же параметрами, что и у строки.
Кроме того, существуют еще и теги, позволяющие в самом коде делить
таблицу на соответствующие разделы: thead, th, tbody и tfoot. При этом,
ТН уже содержит в себе форматирование, позволяющее выделять жирным и
выравнивать по центру текст заголовка таблицы. Правда, всё это имеет
смысл, если таблица создается с целью именно показать таблицу в
html-документе. В самом простом варианте (с учётом всех вышеуказанных
тегов) табличный код выглядит вот так:
<table align=left border=1 cellspacing=0 cellpadding=4 width=100%>
<thead>
<tr align=center valign=top>
<th valign=top colspan=3>Заголовок</th>
</tr>
</thead>
<tbody>
<tr align=center valign=top>
<td align=center valign=top>Ячейка 1</td>
<td align=center valign=top>Ячейка 2</td>
<td align=center valign=top>Ячейка 3</td>
</tr>
</tbody>
<tfo ot>
<tr align=center valign=top>
<td align=center valign=top colspan=3>Заключение</td>
</tr >
</tfoot>
</table>.
Всё это проще простого, скажете Вы. И что здесь сложного и опасного?
Во-первых,
опасность в параметрах. Не все параметры стоит применять, так же, как и
не все параметры из тех, что следовало бы, мы применяем. Так, например,
для тега tr не обязательно применение параметров выравнивания. Однако
они обязательны (!) для применения с тегом td. Также типичная ошибка, с
тегами tr, td и th может не применяться параметр width, однако он очень
важен, так влияет на соответствие расположения ячеек в таблице
относительно друг друга и таблицы в целом.
Таким образом, создавая
таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту
- для "благозвучности" дизайна), ширину строки и ячейки/ячеек,
горизонтальное выравнивание таблицы и ячейки, а также расстояние между
ячейками и внутри-ячеечные отступы. При этом ширина каждой ячейки в
строке, если их несколько, должна соответственно быть указанна так,
чтобы их сумма соответствовала ширине строки. Однако если указать
ширину ячеек, но опустить ширину строки, то может появиться неприятный
эффект - "съедание" объектов (например, кнопок html), расположенных в
ячейках.
Прошу обратить внимание на параметр colspan, присутствующий
в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в
строках больше одной и указывает, на ширину скольких колонок растянется
данная ячейка. Параметр, аналогичный ему и касающийся количества
"перекрываемых" строк, называется rowspan. Пропуск этих параметров,
там, где они необходимы, является очень частой ошибкой и приводит к
искажению получаемого в браузере изображения.
Кроме основных
параметров, в табличных тегах могут применяться дополнительные, которые
особенно не влияют на правильное форматирование таблицы. Это
стандартные html-параметры фонового цвета, цвета рамки (основной,
"светлой" и "темной"), параметры style и class каскадных таблиц стилей.
Здесь важно не ошибиться с использованием цветов и стилей, чтобы ваша
таблица выглядела гармонично и не колола глаза пестротой и
неопрятностью дизайна. Также, нужно учитывать, что netscape navigator
по умолчанию использует для оформления рамки таблицы объемную линию. Он
может частично "покрасить" её в указанный вами цвет, но не признает
"светло-темного" варианта.
Во-вторых, опасность скрывается в самих
таблицах. Нередко, создавая дизайн страницы с помощью таблицы, мы
забываем, что ячейки намертво связаны друг с другом. Даже
colspan/rowspan не позволяют нам освободиться полностью от тех рамок, в
которые нас загоняют столбцы и строки таблицы. А ведь дизайн требует,
чаще всего, "вольного" расположения элементов на странице.
В этом
случае необходимо прибегнуть к "методу Матрёшки", при котором основная
таблица является всего лишь носителем других, функционально значимых
таблиц, в которых и располагаются элементы дизайна. На примере это
выглядит следующим образом:
<table align=center border=1 cellspacing=0 cellpadding=0 width=100%>
<tr align=center valign=top width=100%>
<td valign=top colspan=3>
<!-- Заголовок -- >
<table align=center border=1 bordercolor=red cellspacing=0 cellpadding=0 width=90%>
<tr align=center valign=top width=100%>
<td align=center valign=top width=100%>Таблица в заголовке</td></tr>
</table>
<!-- Конец Заголовка -- >
</td>
</tr>
<tr align=center valign=top width=100%>
<td align=center valign=top width=33%>
<! -- Ячейка 1 -- >
<table align=center border=1 bordercolor=blue cellspacing=0 cellpadding=0 width=90%>
<tr align=center valign=top width=100%>
<td align=center valign=top width=100%> Таблица в средней части</td></tr>
</table>
<! -- Конец Ячейки 1 -->
</td>
<td align=center valign=top width=34%>Ячейка 2</td>
<td align=center valign=top width=33%>Ячейка 3</td>
</tr>
<tr align=center valign=top>
<td align=center valign=top colspan=3>
<!-- Заключение -- >
<table align=center border=1 bordercolor=green cellspacing=0 cellpadding=0 width=90%>
<tr align=center valign=top width=100%>
<td align=center valign=top width=100%>Таблица в конце</td></tr>
</table>
<!-- Конец Заключения -- >
</td>
</tr>
</table>
Такой способ позиционирования элементов
на web-странице позволяет размещать объекты относительно произвольно,
так как функциональные таблицы "привязаны" только к размеру и формату
ячеек, в которых они находятся, но не зависят от размера и формата
основной таблицы в целом. Поэтому, при таком позиционировании, не
появляется эффекта растягивания, к примеру, колонки с кнопками и
ссылками вслед за удлинением центральной колонки web-страницы при
вставке в последнюю огромного размера текста.
Кроме того, такой
способ влияет, как ни странно, на форматирование абзацев текстовых
блоков на странице. Дело в том, что опыт показывает - netscape не
понимает выравнивание justify в ячейке таблицы. Для этого в ячейке ему
необходим тег <p align=justify>. Но он также отказывается
понимать <p align=justify>, если тег находится в ячейке, которая
оперирует параметром colspan. "Матрёшка" спасает положение. netscape не
переносит формат ячейки на таблицу, расположенную в ней, а
рассматривает последнюю как целиком самостоятельный элемент.
В
"методе Матрёшки" необходимо быть внимательным к тому, в каких единицах
вы задаёте размер таблиц - в процентах или в пикселях - и какое
выравнивание вы при этом задали. Опять таки, по причине своенравного
характера netscape'а. Иногда, размер внешней таблицы необходимо
указывать в пикселях, если вы хотите в последующем указать размеры
внутренних таблиц в процентах, а выравнивание обязательно должно быть
центральным. Иначе, может случиться так, что внутренняя таблица
растянется на огромное расстояние, безобразно исказив внешнюю таблицу и
весь дизайн страницы в целом. Вот простой пример:
1) <table align="center" width="100%">
2) <table align="center" width="600">
3) <table align="left" width="600">
4) <table align="left" width="100%">
В первых трёх вариантах, при указанных
условиях, ничего страшного не произойдет. Однако в четвёртом, таблицу
растянет так, что её правый край вы не сможете увидеть вовсе!
2. Таблицы и графика.
Таблицы
являются незаменимым инструментом любого web-дизайнера для размещения
графики на странице. Это уже аксиома. Так, используя таблицу, можно
сгруппировать отдельные графические файлы, выполняющие самостоятельные
функции, в законченное изображение, например заголовок.
Однако, размещение графики в ячейках таблицы тоже может сопровождаться совершением целого ряда ошибок.
Одной
из самых распространенных ошибок является вставка рисунка в ячейку
таблицы без употребления параметра выравнивания тега <img>.
Собственно, когда рисунок расположен в ячейке один и не сопровождается
ни текстом, ни какими-либо иными объектами, это не важно. В противном
случае, отсутствие выравнивания становится заметным и может испортить
весь дизайн.
Дело в том, что тег рисунка (изображения) не наследует
параметров выравнивания ячейки, он только подчиняется им, как любой
другой объект в ячейке. Поэтому, например, при любом выравнивании в
ячейке, текст обязательно "уйдет" под изображение. Но вы же хотите,
чтобы текст его "обтекал"? В данном случае, необходимо указать в теге
img параметр выравнивания align равный left или right. Тогда
изображение будет мягко "окружено" текстом.
Также имеет смысл
указать параметры вертикального и горизонтального отступов от
изображения vspace и hspace, так как отступы, заданные для ячейки также
не наследуются.
В некоторых случаях, необходимо, чтобы часть текста
выводилась сбоку от изображения, а остальная уходила под него. При
этом, "водораздел" должен быть очень хорошо заметен.
В этом случае,
используются два варианта. Либо в теге <br> используется параметр
clear=left или clear=right соответственно, и в этом случае часть текста
после тега <br> будет уходить под изображение, а в выравнивании
последнего можно использовать свойство middle, либо, используя, опять
таки, табличные ячейки, поместить изображение в одну, "боковой" текст в
соседнюю, а "нижний" - соответственно, в ячейку, расположенную в
нижестоящей строке и развернутую на всю эту строку (colspan=2).
Разумеется, последний способ громоздок, зато гарантировано, что
подобное размещение правильно интерпретирует любой браузер, понимающий
таблицы.
Второй распространенной ошибкой является несоответствие
размеров ячеек с размерами вставляемого изображения. Это опасно, когда
размеры изображения превышают размеры ячейки. В этом случае ячейка
безжалостно растягивается, что, безусловно, влияет на расположение
соседних элементов на странице. Например, использование графической
линии в качестве разделительной черты, вместо <br>, без
согласования с размерами ячейки-«носителя», может привести к искажению
размеров всей таблицы. Избежать этого, конечно же, можно только
согласованием размеров.
Кроме ошибок, часто допускается невнимание к
стандартным возможностям табличных тегов. Например, кто из вас серьезно
задумывался над возможностями параметров фона, которые, кстати,
поддерживаются и строками, и ячейками? Конечно, с помощью bgcolor можно
задать цвет таблицы, строки и ячейки, как вместе, так и по отдельности.
С помощью background можно вставить изображение в качестве фона. В этом
случае оно будет заполнять всю площадь ячейки, строки, таблицы. Тут-то
и начинается самое интересное.
Мы можем вставить в одну ячейку два
различных самостоятельных изображения, одно поверх другого, создав
иллюзию их послойного размещения. Одно будет задано параметром
background тега <td>, а другое тегом <img>. Надо только не
забыть, что размеры ячейки должны совпадать с размерами изображения
(тогда не появится эффект "размножения" картинки или её "обрезания"),
размещенного в фон, а самостоятельное изображение должно быть
значительно меньше фонового, иначе теряется весь смысл подобного
дизайна.
Таким же образом можно группировать изображение и текст,
что небесполезно при дизайне, например, ссылок (только в этом случае
шрифт должен быть фиксированной величины). Не бесполезно это и просто
при использовании относительно больших законченных изображений
(например, групповых фотографий) в качестве фона...
Конечно же,
возможности таблиц не безграничны, но и не до конца раскрыты. Я
попробовал описать лишь малую их часть в данной статье и, надеюсь, она
принесет вам пользу.
Удачи!
|
Копирование материалов разрешено,