Построение таблиц

Построение таблиц

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

Теги таблиц

Тэгов для составления таблиц всего четыре. Их надо знать наизусть:

1. <TABLE> - обозначает, что на странице будет составлена таблица.
2. <TR> - формирует строку в таблице.
3. <TD> - формирует ячейку в таблице.
4. <TH> - указывает, где в таблице будет заголовок.

Открывающий и закрывающий тэг называется контейнером. Контейнеры <TD>содержание ячейки </TD> вставляются в контейнеры <TR>строка таблицы</TR> (и тех и других может быть сколько угодно), последние в свою очередь уже в <TABLE>таблица в целом</TABLE>. При необходимости тэг <TD> меняется на <TH>. Все просто, как "русская матрешка" . Вот пример :

<TABLE> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>

Вставлять таблицу внутрь другой таблицы нужно в контейнер <TD></TD> и никак иначе. Пример:

....другая таблица....<TD> <TABLE> вставляемая таблица</TABLE></TD>....другая таблица......

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

Атрибуты тега <TABLE>

Атрибуты для тэга <TABLE> нужны для определения внешнего вида таблицы (габариты, цвет, толщина линий), а также местонахождения таблицы на страницы. Ниже приведен их перечень:

• WIDTH - ширина таблицы (значение в пикселях (px) или процентах)
• HEIGHT - высота таблицы (значение в пикселях (px) или процентах)
• ALIGN - выравнивание таблицы на странице (значения: left, right, center)
• BORDER - толщина рамки таблицы (значение в px, возможно - ноль (невидимая рамка)
• BORDERCOLOR - определяет цвет рамки таблицы
• BGCOLOR - цвет фона таблицы
• BACKGROUND - задает таблице фоновое изображение
• CELLSPACING - расстояние между ячейками в таблице
• CELLPADDING - расстояние между границей ячейки и текстом

Атрибуты тега <TD>

Атрибуты ячеек таблиц имеют такие же названия и измерениями значений, что и таблицы с той лишь разницей что к ним не применяются два последних атрибута по списку (см. выше), зато добавлены атрибуты выравнивания ячейки по вертикали VALIGN с значениями top (верх), middle (середина) и botton (низ) и COLSPAN - объединение ячеек в группу с числовым значением равным количеству объединяемых ячеек.

Атрибуты тега <TR>

• WIDTH - ширина строки таблицы (значения в пикселях (px))
• HEIGHT - высота строки таблицы(значения в пикселях (px))
• RULES - вид внутренних линий (значения - all (всех), rows (горизонтальных), cols (вертикальных), none (никаких)
• FRAME - вид внешних линий (значения - box (всех), lhs (левой), rhs (правой), above (верхней), below (нижней), vsides (левой и правой), hsides (нижней и верхней), volid(никакой)
• COLGROUP - разделяющая линия между группами ячеек

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

В построение таблиц имеет место еще один тэг <TBODY>. Он предназначен для группировки элементов таблиц и является необязательным.

Теперь давайте для закрепления материала произведем простенькую разметку страницы с помощью таблицы. Откройте любой текстовой редактор. Если хотите, чтобы не было отступов от краев при разрешении экрана 800х600, то в тэге <BODY> запишите:

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Далее в контейнере <BODY> напечатайте следующее:

<TABLE width="780" height="580" border="0" align="center"

<TR><TD colspan=2 height="100" bgcolor="red" align="center">Заголовок</TD></TR>

<TR><TD width="200" bgcolor="gray">Меню</TR></TD>

<TR><TD width="580">Текст</TR></TD></TABLE>

Сохранитесь и посмотрите в браузере в разных режимах расширения экрана.

Задание:

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