Original of this document is on Crossroad server
http://www.cross.ru/rusweb/articles/html/tables.htm



Таблицы
не совсем для чайников


Общая информация о таблицах

Итак, таблицы. Это чрезвычайно удобное средство теперь используется везде и повсеместно. Вот и мы решили посвятить одну статью данному вопросу.

Итак таблица вставляется в HTML-документ тэгами <TABLE> и </TABLE>. Одна из самых катастрофических ошибок в редактировании HTML-документов является отсутствие закрывающего тэга </TABLE> Netscape Navigator , например, вообще отказывается выводить такую таблицу.
Параметры у тэга <TALBE> следующие:
  • BORDER - Ширина бордюра;
  • WIDTH - Ширина таблицы;
  • BGCOLOR - цвет фона под таблицей;

Между этими двумя тэгами могут располагаться следующие элементы:
  • <CAPTION> Название таблицы </CAPTION>. Параметр у тэга CAPTION всего один - ALIGN - расположение названия таблицы. Может принимать всего два значения - top ( над таблицей ) и bottom ( под таблицей )
  • <TR> Строчка таблицы </TR> - Одна строка таблицы. Может иметь следующие параметры:
    • ALIGN - Выравнивание внутри строки ( LEFT, RIGHT, CENTER );
    • VALIGN - Вертикальное выравнивание внутри строки таблицы ( TOP, BOTTOM, MIDDLE );
    • BGCOLOR - Цвет фона внутри строки.
  • <TD> Столбец таблицы </TD> - Одна столбец таблицы. Может иметь следующие параметры:
    • ALIGN - Выравнивание ( см. выше );
    • VALIGN - Вертикальноее выравнивание ( см. выше );
    • COLSPAN, ROWSPAN - Растягивание клетки на несколько столбцов, строк ( подробнее см. ниже );
    • BGCOLOR - Цвет фона под столбцом.


    Пример таблицы:
    <TABLE BORDER>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Результат:
    A B C
    D E F


  • <TH> Заголовок </TH> - Элемент таблицы с заголовком столбца или строки. Может иметь следующие параметры:
    • ALIGN - Выравнивание ( см. выше );
    • VALIGN - Вертикальноее выравнивание ( см. выше );
    • COLSPAN, ROWSPAN - Растягивание клетки на несколько столбцов, строк ( подробнее см. ниже );
    • WIDTH - Ширина названия;
    • BGCOLOR - Цвет фона под названием.

    Пример использования заголовков:
    <TABLE BORDER>
    <TR>
    <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH>
    </TR>
    <TR>
    <TD>A</TD> <TD>B</TD> <TD>C</TD>
    </TR>
    <TR>
    <TD>D</TD> <TD>E</TD> <TD>F</TD>
    </TR>
    </TABLE>

    Результат:
    Заголовок 1 Заголовок 2 Заголовок 3
    A B C
    D E F


    COLSPAN, ROWSPAN

    Нередко возникает ситуация, когда требуется растянуть одну клетку таблицы, например, на два столбца или на две строки и прочее. Для достижения подобного результата необходимо использовать два параметра тэгов TH, TR и TD. Рассмотрим использование этих параметров подробнее.

    Итак, параметр COLSPAN - есть указание броузеру раздвинуть клетку таблицы на несколько столбцов. Например: COLSPAN=2 - раздвинуть клетку таблицы на 2 столбца.

    Параметр ROWSPAN - вытянуть клетку ( строчку, столбец ) таблицы на 2-е строки.

    Примеры использования:
    <TABLE BORDER>
    <TR>
    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
    <TD>1</TD>
    <TD>2</TD>
    </TR>
    <TR>
    <TD>3</TD>
    <TD>4</TD>
    </TR>
    <TR>
    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
    <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
    </TR>
    <TR>
    </TR>
    </TABLE>

    Результат:
    A 1 2
    3 4
    C D


    Бордюры таблицы

    Выше был описан такой параметр тэга <TABLE> как BORDER. Этот параметр устанавливает ширину бордюра таблицы. Он может принимать любое значение от 0 до 10. Ширина бордюра равная 0 обозначает отсутствие оного. Я выделил описание этого параметра в отдельный параграф, так как с помощью него можно создать довольно интересные эффекты. Например:
    <TABLE ALIGN=center BORDER=5>
    <TR>
    <TD>
    <A HREF="http://www.cross.ru/index.htm"><IMG SRC="http://koi.cross.ru/menu/cross3small.gif"
    ALT="ПЕРЕКРЕСТОК" ALIGN=left WIDTH=300 HEIGHT=55 BORDER=0></A>
    </TD>
    </TR>
    </TABLE>

    Результат:
    ПЕРЕКРЕСТОК


    Параметр WIDTH

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

    Пример использования:
    <TABLE BORDER WIDTH="50%">
    <TR><TD WIDTH=80%>Таблица в 50% ширины от экрана. Столбец в 80% ширины таблицы</TD><TD>2</TD>
    </TR>
    <TR><TD>3</TD><TD>4</TD>
    </TR>
    </TABLE>


    Результат:
    Таблица в 50% ширины от экрана. Столбец в 80% ширины таблицы2
    34


    В дорожку

    Вот Вы и познакомились с приличным набором табличных тэгов. В добрый путь. Однако, не забывайте, что на этом пути существует множество подводных камней. В первую очередь они связаны с различными типами браузеров. Например, Internet Explorer совсем недавно научился корректно показывать таблицы, а Netscape Navigator сбрасывает установки шрифта и текста для таблицы ( т.е. внутри самой таблицы эти установки не сохраняют свои значения, а сбрасываются на значения по умолчанию ).



Original of this document is here Олег Бунин



© "Перекресток"

Популярность: 8, Last-modified: Thu, 27 Feb 1997 09:20:15 GmT