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

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

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

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

Задание:

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

вверх