В своё время, только начиная изучать азы 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>. Надо только не забыть, что размеры ячейки должны совпадать с размерами изображения (тогда не появится эффект "размножения" картинки или её "обрезания"), размещенного в фон, а самостоятельное изображение должно быть значительно меньше фонового, иначе теряется весь смысл подобного дизайна. Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона... Конечно же, возможности таблиц не безграничны, но и не до конца раскрыты. Я попробовал описать лишь малую их часть в данной статье и, надеюсь, она принесет вам пользу. Удачи!
|