Rambler's Top100 Старый русский почтовик! Оплата в WM! Самый активный, самый надежный!
Рыболовные туры в Финляндию
Рыбалка в Финляндии
с русскоговорящим гидом!
SEO sprint - Всё для максимальной раскрутки!
Форум русских рыболовов Финляндии

Рыбалка в Финляндии


на главную
Простейшие
таблицы
Дальше о
таблицах
Таблицы с
помощью CSS


Таблицы HTML.

Форматирование страниц.

   Предупреждая критику со стороны знающих людей и уберегая их от излишнего беспокойства и затрат времени, сразу оговорюсь, что таблицы не являются единственным средством форматирования страницы. Более того, они сейчас играют в этом плане все меньшее и меньшее значение, отступая перед новыми технологиями. Но это вовсе не означает, что их нельзя теперь уже употреблять в этом качестве.
   Предупреждая критику со стороны незнающих людей, сразу скажу, что в качестве средства для форматирования и оформления страницы, таблицы предоставляют ВЕБ-мастеру большие возможности. Способов и вариантов в данном случае такое множество, что все их просто невозможно описать не только в этой статье, но и вообще. Если не лень, посчитайте сами количество вариантов: у тегов TR и TD десятки параметров, у которых десятки значений, плюс возможность употреблять все это неограниченное число раз, и т.д., и т.п. Поэтому я приведу в этой статье лишь несколько простых примеров, как бы это можно было бы сделать, в надежде, что эти примерчики натолкнут Вас на ту единственно правильную мысль, которая поможет Вам сделать Вашу страничку неотразимой. Ну, или хотя бы просто удобной для пользователя.
   Примечание: в целях экономии места и времени я не буду приводить в статье куски ХТМЛ-кода, при помощи которых создавались эти таблицы. Я их просто выделю в самом документе примечаниями "пример", а Вы сможете посмотреть их, щелкнув по странице правой кнопкой мыши и выбрав "просмотр в виде HTML". Из тех же соображений я не буду описывать теги, которые уже встречались в статье Простейшие таблицы.
   Итак,

Вариант первый.

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

Заголовок страницы

А здесь будет информативная часть страницы.
   В этом примере мы построили таблицу из одной строчки с двумя столбцами, в один из которых можно поместить меню, а в другой (в данном примере - в правый) - информационную часть. Правую часть от левой мы отделили при помощи атрибута FRAME. Вернее, наоборот - с его помощью мы убрали рамку вокруг таблицы, оставив border только между столбцами. Атрибут FRAME тега TABLE показывает браузеру, какие стороны кадра, окружающего таблицу, будут видимы. Может принимать значения:
  • void - сторон нет.
  • above - только верхняя часть
  • below - только нижняя часть
  • hsides - только верхняя и нижняя части
  • vsides - только левая и правая части
  • lhs - только левая часть
  • rhs - только правая часть
  • box - все четыре части
  • border - все четыре части
Очевидно, что два последних значения употреблять нет смысла, так как по умолчанию, то есть, если атрибут frame не употребляется вообще, рамка рисуется вокруг всей таблицы.
   Замечу также, что совсем не обязательно делать эту таблицу на всю страницу. Можно, например, заголовок или название страницы поместить сверху таблицы, а еще что-то - ниже таблицы:

Здесь заголовок
(заголовок страницы, не таблицы)

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

   Дальше уже возможны варианты. Например, так:

Здесь заголовок
(заголовок страницы, не таблицы)

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

В данном случае мы применили еще один параметр тега TABLE - RULES, который указывает, какие перегородки между ячейками таблицы будут видимыми. Может принимать значения:
  • none - перегородки не отображаются.
  • groups - не отображаются только между группами строк (THEAD, TFOOT, TBODY) и между группами столбцов (COLGROUP, COL).
  • rows - не отображаются только между строками
  • cols - не отображаются только между столбцами
  • all - отображаются между строками и столбцами
   Или так:

Здесь заголовок
(заголовок страницы, не таблицы)

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

   Можно нарисовать более капитальную таблицу, где будет определено место под другие (или под все) элементы страницы. Пример:
Здесь могут быть счетчики, банеры, украшения
Здесь - меню

Здесь заголовок
(заголовок страницы, не таблицы)

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

форум русских рыболовов в Финляндии -
хотите порыбачить в Финляндии? - обращайтесь, организуем!
а здесь опять банеры или копирайт:

   При построении этой таблицы использовались атрибуты colspan и rowspan.
  • COLSPAN - определяет число столбцов, объединяемых одной ячейкой,
  • ROWSPAN - определяет число строк, объединяемых одной ячейкой.
Употребление этих атрибутов требует небольшой тренировки, чтобы понять, сколько столбцов и строк (в смысле, сколько пар тегов TR и TD) нужно оставить при объединении, а сколько убрать. Сделайте простенькую табличку 3 на 3, пронумеруйте ячейки, и - потренируйтесь:
12 3
1.22.2 3.2
1.3 2.3 3.3

   Ну, и наконец, можно сделать несколько таблиц. Их можно также раскрасить разными цветами или вставить в каждую из них свой фоновый рисунок. Например (рамки вокруг таблиц я оставляю исключительно для наглядности. Если Вы не хотите, чтобы рамка вокруг таблицы была видна на странице, поставьте значение параметра border=0):
Здесь может быть меню или счетчики или логотип Вашего сайта
Меню сайта может быть и здесь. А можно эту таблицу расположить справа. Как Вам больше нравится.

Здесь заголовок
(заголовок страницы, не таблицы)

Здесь, естественно, в этом случае будет инфа. Обратите внимание, что после вот этого самого текста, который Вы читаете в этот момент, стоит тег BR с параметром clear. Это для того, чтобы нижняя таблица расположилась ниже этого текста, а главное - ниже таблицы, которая слева. Такой ма-аленький нюансик, а помогает ...
Туточки тоже что - нибудь поместить. Можно, конечно, и не помещать. Можно вообще, эту последнюю таблицу не делать. А можно сделать две таких или три...

   Вот, приблизительно, так можно использовать таблицы для разметки страницы. А можно и не так. Можно по другому. Можно так, как Вам понравится. Дорогу осилит идущий, а поэтому - пробуйте, экспериментируйте, штудируйте спецификацию HTML4.0. Ну и мой сайт, конечно, тоже можно прочитать повнимательнее. На нем, в общем-то, уже много чего написано. Только вот судя по вопросам, которые Вы (или скажем так: некоторые из Вас :-) задаете, внимательно читают не все-е-е-е... (Шутка.)
   Пишите и задавайте ЛЮБЫЕ вопросы. Если смогу, отвечу. Не смогу - подскажу, где найти ответ. А если уже написано об этом - покажу, где написано.

Создать свой сайт


Рейтинг@Mail.ru liveinternet.ru: показано число посетителей за сегодня


Copyright © 2001 by Сергей Червонящий.
Все права защищены. Запрещено частичное или полное воспроизведение материалов сайта без согласования с автором.

Покупайте на OHO.ru:
Покупайте на OHO.ru: