Таблицы
не совсем для чайников
Общая информация о таблицах
Итак, таблицы. Это чрезвычайно удобное средство теперь используется везде и повсеместно. Вот и мы решили посвятить одну статью данному вопросу.
Итак таблица вставляется в HTML-документ тэгами <TABLE> и </TABLE>. Одна из самых катастрофических ошибок в редактировании HTML-документов является отсутствие закрывающего тэга </TABLE> Netscape Navigator , например, вообще отказывается выводить такую таблицу.
Параметры у тэга <TALBE> следующие:
Между этими двумя тэгами могут располагаться следующие элементы:
- <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 3 4
В дорожку
Вот Вы и познакомились с приличным набором табличных тэгов. В добрый путь. Однако, не забывайте, что на этом пути существует множество подводных камней. В первую очередь они связаны с различными типами браузеров. Например, Internet Explorer совсем недавно научился корректно показывать таблицы, а Netscape Navigator сбрасывает установки шрифта и текста для таблицы ( т.е. внутри самой таблицы эти установки не сохраняют свои значения, а сбрасываются на значения по умолчанию ).
Original of this document is here Олег Бунин