Урок №7

Тема: таблицы.

Для чего нужны таблицы? Ответ на этот вопрос очевиден: для представления данных в табличном виде. Но не только.
До сих пор мы имели дело с документами, в которых существовал только один поток текста. На практике же порой хочется расположить текст в несколько колонок. В этом нам может помочь таблица.
В таблице может размещаться не только текст... ...но и
или картинки 		Таблицы позволяют достаточно точно контролировать расположение элементов на странице!

Чтобы разобраться в устройстве таблицы, расмотрим простой пример:
Таблица 1.
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Такая табличка реализуется следующим кодом: <TABLE BORDER="1" WIDTH="200" BGCOLOR="white">
<caption><font color="008000">Таблица 1.</font></caption>
<TR>
<TD><font color="008000">Ячейка 1</font></TD>
<TD><font color="008000">Ячейка 2</font></TD>
</TR>
<TR>
<TD><font color="008000">Ячейка 3</font></TD>
<TD><font color="008000">Ячейка 4</font></TD>
</TR>
</TABLE>
Таблица начинается с метки <TABLE> и заканчивается </TABLE>. Метка <TABLE> может включать следующие аттрибуты:
  • WIDTH="n" - определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;

  • ALIGN=LEFT - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);

  • BORDER="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;

  • BORDERCOLOR="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;

  • CELLSPACING="n" - определяет расстояние между рамками ячеек таблицы в пикселах;

  • CELLPADDING="n" - определяет расстояние в пикселах между рамкой ячейки и текстом;

  • BGCOLOR="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.

  • BACKGROUND="picture.gif" - заполняет фон таблицы изображением;

  • FRAME="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:

    • VOID - рамки нет (значение по умолчанию);
    • ABOVE - рисуется только граница сверху;
    • BELOW - только граница снизу;
    • HSIDES - границы сверху и снизу;
    • VSIDES - только границы слева и справа;
    • LHS - только левая граница;
    • RHS - только правая граница;
    • BOX - рисуются все четыре стороны;
    • BORDER - также все четыре стороны.
  • RULES="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения:
    • NONE - нет линий (значение по умолчанию);
    • GROUPS - линии будут только между группами рядов (THEAD, TFOOT, TBODY) и группами колонок (COLGROUP, COL) - о группах рассказано ниже;
    • ROWS - только между рядами;
    • COLS - только между колонками;
    • ALL - между всеми рядами и колонками.

Таблица может иметь заголовок - метки <CAPTION> и </CAPTION>. Располагаться он должен непосредственно после метки <TITLE ... >. Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы:

TOP - значение по умолчанию, заголовок над таблицей по центру;
LEFT - заголовок над таблицей слева;
RIGHT - заголовок над таблицей справа;
BOTTOM - заголовок под таблицей по центру.

Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь аттрибуты:

Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие ттрибуты:

Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован. Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:

<THEAD>...</THEAD> - здесь объединяются ячейки верхнего заголовка таблицы;

< TFOOT>...</TFOOT> - ячейки нижнего заголовка таблицы;

< TBODY>...</TBODY> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп TBODY).

Каждая группа должна содержать хотя бы один ряд TR. Группа TFOOT должна находиться до TBODY, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все группы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков. К сожалению, большинство браузеров пока не поддерживают эту функцию. Можно использовать группы рядов для рисования линий только между ними (а не между всеми рядами), или выборочного форматирования частей таблицы (горизонтальное, вертикальное выравнивание содержимого ячеек).

Столбцы таблицы также могут быть объединены в группы при помощи меток <COLGROUP> и <COL>. Метка COLGROUP позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута RULES элемента TABLES. Метка COL позволяет применить какие-либо аттрибуты (выравнивание и т.п.) к нескольким столбцам не объединяя их в структурную группу.

<COLGROUP> может содержать следующие аттрибуты:

<COL> содержит те же аттрибуты, что и <COLGROUP>. Если ширина столбцов задана и в COL, и в COLGROUP, то выбирается значение метки COL. Метка <COL> непарная, т.е. закрывающего тэга у нее нет.

Пример. Будет создана таблица шириной в 20 столбцов. Первый столбец будет 40 пикселов шириной с выравниванием влево. Второй - минимально возможной ширины с выравниванием по центру. Остальные 18 - шириной в 20 пикселов и выравниванием по центру.

.....Содержимое таблицы......

К сожалению, браузеры Netscape поддерживают далеко не все возможности таблиц. В результате таблица, которая отлично выглядит в Microsoft Explorer, в Netscape может оказаться вообще без рамок.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект   (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; - обязательно должен набираться строчными буквами и закрываться точкой с запятой).

Любая ячейка таблицы может содержать в себе еще одну таблицу.

Возможные ошибки в таблицах:

Содержание
Hosted by uCoz