Главная » Мастерская » Статьи » ТАБЛИЦЫ (HTML Уроки)

ТАБЛИЦЫ (HTML Уроки) - урок № 4
возвратимся к нашей простой небольшой таблице.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo

Новое свойство браузеров - способность определять цветные фоны для ячеек, строки или целой таблицы. Вы используете BGCOLOR точно так же как в метке <BODY>.

<TABLE BORDER=3 BGCOLOR="#FFCC66">

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo

<TABLE BORDER=3>

<TR BGCOLOR="#FF9999">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR BGCOLOR="#99CCCC">
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo

<TABLE BORDER=3>

<TR BGCOLOR="#FFCCFF">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD BGCOLOR="#FF0000">Larry</TD>
<TD>Curly</TD>
<TD BGCOLOR="#3366FF">Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo

Есть удобная таблица для выбора цветного фона.

Еще одно о цветных фонах таблицы ... <TD> bgcolor отменяет <TR> bgcolor, а <TR> bgcolor отменяет <TABLE> bgcolor. Например:

<TABLE BORDER=3 BGCOLOR="#FF6633">

<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo

Позвольте минуту для пояснений. Браузер должен интерпретировать команды, которые Вы даете ему, самым лучшим возможным способом. Если что-то не было определено так или иначе, большинство браузеров пробует найти привлекательное решение. Самое лучшее, что Вы можете сделать как автор, Вы должны определить столько, сколько можете, особенно те параметры, которые определяют желаемый вид вашей страницы. Также важно просмотреть вашу работу браузерами, которыми фактически пользуются ваши читатели. Так как большинство людей использует Netscape, хорошо начать с него. Вы можете также иметь копии пары других популярных браузеров, чтобы убедиться, что Ваша страница и в них выглядит правильно.

Другой аспект просмотра - разрешающая способность экрана. Кто-то работает на экране 1024x768, некоторые имеют и 800x600. Это простое различие может привести к серьезным проблемам с вашим проектом страницы. Есть небольшая утилита называемая QuickRes , которая может изменять разрешающую способность вашего экрана щелчком кнопки. Это не плохая идея просмотреть ваши страницы с различными разрешающими способностями.

Теперь мы поиграем с COLSPAN (Диапазон Столбца) и ROWSPAN (Диапазон Строки). Давайте уберем Tom из таблицы.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Rick
Larry Curly Mo

Это только оставило пустое пятно, а Rick сдвинулся и заполнил пустоту.

Если мы хотим, чтобы Ed действительно занял ячейку Тома и сделал ее частью своей области, мы должны использовать атрибут COLSPAN для этого.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Rick
Larry Curly Mo

Чтобы подчеркнуть, что браузер пробует найти привлекательное решение, давайте заставим Ed захватить два столбца, но мы поместим Tom обратно. Мы преднамеренно делаем это только, чтобы увидеть, как браузер обрабатывает это.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo

Хорошо... давайте уберем Тома снова.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Rick
Larry Curly Mo

Уберем Rick и разместим Ed в центре ячейки.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>Ed</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo

Все другое кодирование html, между прочим может быть использовано в ячейке. Мы будем делать Ed <STRONG> как в примере.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>Ed</STRONG></TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo

Сделаем связь с какой - либо местной страницей.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://www.doxx.tr.dn.ua">Ed</A></TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo

Теперь избавьтесь от всего этого наполнения, возвратите Tom и Rick и займемся <ROWSPAN>.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo

Поскольку Вы, возможно, предположили, что <ROWSPAN> - точно как <COLSPAN>, только строки вместо столбцов. Если мы удалим Larry и позволим Ed занять его ячейку, то в результате...

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Curly Mo

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

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Ed</TD>
<TD COLSPAN=2>Tom</TD>
</TR>

<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom
Curly Mo

[назад] [дальше]


Copyright ByWeb©
Hosted by uCoz