Построение сайта. Табличное решение
Простейший способ построения красивого сайта основан на тегах HTML. Все, что вы хотите видеть на ваших страничках, можно красиво разместить внутри структуры таблиц. Это вам гарантирует правильное (желаемое) отображение сайта в любых браузерах и облегчит читаемость, а значит ваши пользователи не сбегут к конкуренту :)
Итак с основ:
Все начинается с пары тегов TABLE:
в теле документа BODY.
Они имеют свои стандартные параметры ALIGN, BORDER, CELLSPACING, CELLPADDING, WIDTH, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы: Стандартными параметрами для строки являются ALIGN и VALIGN, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов - это теги самих ячеек: . С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: THEAD, TH, TBODY и TFOOT. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в HTML-документе. В самом простом варианте (с учётом всех вышеуказанных тегов)
табличный код выглядит вот так:
Ничего сложного тут нет, так в чём же подвох? Во-первых, в параметрах. Не все параметры стоит применять, так же, как и не все параметры из тех, что следовало бы, мы применяем. Так, например, для тега TR не обязательно применение параметров выравнивания. Однако они обязательны для применения с тегом TD. Также типичная ошибка, с тегами TR, TD и TH может не применяться параметр WIDTH, однако он очень важен, так как влияет на соответствие расположения ячеек в таблице относительно друг друга и таблицы в целом.
Таким образом, создавая таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту - для "стройности" дизайна), ширину строки и ячейки/ячеек, горизонтальное выравнивание таблицы и ячейки, а также расстояние между ячейками и внутриячеечные отступы. При этом ширина каждой ячейки в строке, если их несколько, должна быть соответственно указана так, чтобы их сумма соответствовала ширине строки. Однако если указать ширину ячеек, но опустить ширину строки, то может появиться неприятный эффект - "съедание" объектов (например, кнопок HTML), расположенных в ячейках.
При построении таблиц с объединёнными ячейками нельзя пропускать параметр COLSPAN, присутствующий в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в строках больше одной и указывает, на ширину скольких колонок растянется данная ячейка. Параметр, аналогичный ему и касающийся количества "перекрываемых" строк, называется ROWSPAN. Пропуск этих параметров, там, где они необходимы, является очень частой ошибкой и приводит к искажению получаемого в браузере изображения.
Кроме основных параметров, в табличных тегах могут применяться дополнительные, которые особенно не влияют на правильное форматирование таблицы. Это стандартные HTML-параметры фонового цвета, цвета рамки (основной, "светлой" и "темной"), параметры STYLE и CLASS каскадных таблиц стилей.
Во-вторых, подвох заключается в самих таблицах. В их жёсткой структуре. При "растягивании" таблицы меняется и вид информации заключённой в ячейку. Выход из этой ситуации один - метод "матрёшки". Таблицы можно просто вкладывать одна в другую и тогда информация будет зависеть только от размера и формата ячеек, в которых она находится, но не будет зависеть от размера и формата основной таблицы в целом.
Таблицы и графика.
Таблицы являются незаменимым инструментом любого Web-дизайнера для размещения графики на странице. Так, используя таблицу, можно сгруппировать отдельные графические файлы, выполняющие самостоятельные функции, в законченное изображение, например заголовок. Однако, размещение графики в ячейках таблицы тоже может сопровождаться совершением целого ряда ошибок.
Одной из самых распространенных ошибок является вставка рисунка в ячейку таблицы без употребления параметра выравнивания тега![]()
. Собственно, когда рисунок расположен в ячейке один и не сопровождается ни текстом, ни какими-либо иными объектами, это не важно. В противном случае, отсутствие выравнивания становится заметным и может испортить весь дизайн. Дело в том, что тег рисунка (изображения) не наследует параметров выравнивания ячейки, он только подчиняется им, как любой другой объект в ячейке. Поэтому, например, при любом выравнивании в ячейке, текст обязательно "уйдет" под изображение. Но вы же хотите, чтобы текст его "обтекал"? В данном случае, необходимо указать в теге IMG параметр выравнивания ALIGN равный LEFT или RIGHT. Тогда изображение будет мягко "окружено" текстом.
Также имеет смысл указать параметры вертикального и горизонтального отступов от изображения VSPACE и HSPACE, так как отступы, заданные для ячейки также не наследуются. В некоторых случаях, необходимо, чтобы часть текста выводилась сбоку от изображения, а остальная уходила под него. При этом, "водораздел" должен быть очень хорошо заметен. В этом случае, используются два варианта. Либо в теге
используется параметр CLEAR=LEFT или CLEAR=RIGHT соответственно, и в этом случае часть текста после тега
будет уходить под изображение, а в выравнивании последнего можно использовать свойство MIDDLE, либо, используя, опять таки, табличные ячейки, поместить изображение в одну, "боковой" текст в соседнюю, а "нижний" - соответственно, в ячейку, расположенную в нижестоящей строке и развернутую на всю эту строку (COLSPAN=2). Разумеется, последний способ громоздок, зато гарантировано, что подобное размещение правильно интерпретирует любой браузер, понимающий таблицы.
Второй распространенной ошибкой является несоответствие размеров ячеек с размерами вставляемого изображения. Это опасно, когда размеры изображения превышают размеры ячейки. В этом случае ячейка безжалостно растягивается, что, безусловно, влияет на расположение соседних элементов на странице. Например, использование графической линии в качестве разделительной черты, вместо
, без согласования с размерами ячейки-«носителя», может привести к искажению размеров всей таблицы.
Фон ячейки можно задать поместив внутри неё картинку, но гораздо практичнее использовать параметр BACKGROUND. В этом случае мы можем вставить в одну ячейку два различных самостоятельных изображения, одно поверх другого, создав иллюзию их послойного размещения. Одно будет задано параметром BACKGROUND тега , а другое тегом![]()
. Надо только не забыть, что размеры ячейки должны совпадать с размерами изображения (тогда не появится эффект "размножения" картинки или её "обрезания"), размещенного в фон, а самостоятельное изображение должно быть значительно меньше фонового, иначе теряется весь смысл подобного дизайна.
Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона...
Не используйте очень большие таблицы на страничке, если есть возможность, поделите таблицу на несколько более мелких таблиц. Это связано с тем, что содержимое таблицы не выводится на экран до тех пор, пока вся таблица не скачана. И у пользователя создается иллюзия медленной загрузки этой страницы, что нежелательно.
Итак с основ:
Все начинается с пары тегов TABLE:
Они имеют свои стандартные параметры ALIGN, BORDER, CELLSPACING, CELLPADDING, WIDTH, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы: Стандартными параметрами для строки являются ALIGN и VALIGN, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов - это теги самих ячеек: . С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: THEAD, TH, TBODY и TFOOT. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в HTML-документе. В самом простом варианте (с учётом всех вышеуказанных тегов)
табличный код выглядит вот так:
| Заголовок | ||
|---|---|---|
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Заключение | ||
Таким образом, создавая таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту - для "стройности" дизайна), ширину строки и ячейки/ячеек, горизонтальное выравнивание таблицы и ячейки, а также расстояние между ячейками и внутриячеечные отступы. При этом ширина каждой ячейки в строке, если их несколько, должна быть соответственно указана так, чтобы их сумма соответствовала ширине строки. Однако если указать ширину ячеек, но опустить ширину строки, то может появиться неприятный эффект - "съедание" объектов (например, кнопок HTML), расположенных в ячейках.
При построении таблиц с объединёнными ячейками нельзя пропускать параметр COLSPAN, присутствующий в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в строках больше одной и указывает, на ширину скольких колонок растянется данная ячейка. Параметр, аналогичный ему и касающийся количества "перекрываемых" строк, называется ROWSPAN. Пропуск этих параметров, там, где они необходимы, является очень частой ошибкой и приводит к искажению получаемого в браузере изображения.
Кроме основных параметров, в табличных тегах могут применяться дополнительные, которые особенно не влияют на правильное форматирование таблицы. Это стандартные HTML-параметры фонового цвета, цвета рамки (основной, "светлой" и "темной"), параметры STYLE и CLASS каскадных таблиц стилей.
Во-вторых, подвох заключается в самих таблицах. В их жёсткой структуре. При "растягивании" таблицы меняется и вид информации заключённой в ячейку. Выход из этой ситуации один - метод "матрёшки". Таблицы можно просто вкладывать одна в другую и тогда информация будет зависеть только от размера и формата ячеек, в которых она находится, но не будет зависеть от размера и формата основной таблицы в целом.
Таблицы и графика.
Таблицы являются незаменимым инструментом любого Web-дизайнера для размещения графики на странице. Так, используя таблицу, можно сгруппировать отдельные графические файлы, выполняющие самостоятельные функции, в законченное изображение, например заголовок. Однако, размещение графики в ячейках таблицы тоже может сопровождаться совершением целого ряда ошибок.
Одной из самых распространенных ошибок является вставка рисунка в ячейку таблицы без употребления параметра выравнивания тега
Также имеет смысл указать параметры вертикального и горизонтального отступов от изображения VSPACE и HSPACE, так как отступы, заданные для ячейки также не наследуются. В некоторых случаях, необходимо, чтобы часть текста выводилась сбоку от изображения, а остальная уходила под него. При этом, "водораздел" должен быть очень хорошо заметен. В этом случае, используются два варианта. Либо в теге
используется параметр CLEAR=LEFT или CLEAR=RIGHT соответственно, и в этом случае часть текста после тега
будет уходить под изображение, а в выравнивании последнего можно использовать свойство MIDDLE, либо, используя, опять таки, табличные ячейки, поместить изображение в одну, "боковой" текст в соседнюю, а "нижний" - соответственно, в ячейку, расположенную в нижестоящей строке и развернутую на всю эту строку (COLSPAN=2). Разумеется, последний способ громоздок, зато гарантировано, что подобное размещение правильно интерпретирует любой браузер, понимающий таблицы.
Второй распространенной ошибкой является несоответствие размеров ячеек с размерами вставляемого изображения. Это опасно, когда размеры изображения превышают размеры ячейки. В этом случае ячейка безжалостно растягивается, что, безусловно, влияет на расположение соседних элементов на странице. Например, использование графической линии в качестве разделительной черты, вместо
, без согласования с размерами ячейки-«носителя», может привести к искажению размеров всей таблицы.
Фон ячейки можно задать поместив внутри неё картинку, но гораздо практичнее использовать параметр BACKGROUND. В этом случае мы можем вставить в одну ячейку два различных самостоятельных изображения, одно поверх другого, создав иллюзию их послойного размещения. Одно будет задано параметром BACKGROUND тега , а другое тегом
Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона...
Не используйте очень большие таблицы на страничке, если есть возможность, поделите таблицу на несколько более мелких таблиц. Это связано с тем, что содержимое таблицы не выводится на экран до тех пор, пока вся таблица не скачана. И у пользователя создается иллюзия медленной загрузки этой страницы, что нежелательно.
