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

Таблицы в «оригинальном» понимании этого слова при составления 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) или процентах)
• 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>

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