Построение таблиц
Таблицы в "оригинальном" понимании этого слова при составления Web-страниц конечно же применяются для их прямого предназначения, но не так повсеместно как они используются при разметки страницы. С помощью них страница сайта делится на несколько частей, где количество частей не ограничено. Наряду с их большими возможностями позиционирования к дргуг к другу и широким выбором структурирования - способ разметки страниц таблицами делает лучшим на сегодняшний день инструментом для Web-дизайнера. Имеют место еще два способа заполнения страниц - с использованием программ-конструкторов и с помощью фреймов . Первые имея преимущества в простоте использования (объекты позиционируются пользователем визуально без знания языка HTML) имеют существенный недостаток - они создают страницы только под конкретное расширения экрана. На других расширениях страница будет выглядеть некорректно. С фреймами обстоят дела еще хуже - их не "видят" поисковые машины. Поэтому почти всегда применяют табличный метод, а Вам предлагаем подойти к этой теме с особым вниманием.
Теги таблиц
Тэгов для составления таблиц всего четыре. Их надо знать наизусть:
- <TABLE> - обозначает, что на странице будет составлена таблица.
- <TR> - формирует строку в таблице.
- <TD> - формирует ячейку в таблице.
- <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) или процентах)
- HEIDHT - высота таблицы (значение в пикселях (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>
- Сохранитесь и посмотрите в браузере в разных режимах расширения экрана.
Задание:
В составленной таблице поэкспериментируйте с текстом, по разному выравнивая его относительно различных ячеек и тоже самое повторите, но с таблицами.
