Иллюстрированный самоучитель по созданию сайтов

Анализ примера


Теперь, вооружившись полученными знаниями, давайте вернемся к таблице, представленной на рис. 2.13 и посмотрим, как же она сделана. В качестве основного цвета таблицы здесь выбран серебристый (#Е4Е4Е4), Атрибут WIDTH="100%" растягивает ее на всю ширину окна броузера, а значение CELLSPACING="0" “прижимает” ячейки друг к другу. С помощью значения CELLPADDING="2" обеспечивается наличие небольших “полей” в каждой ячейке.

В первой строке таблицы задается ширина столбцов. Ширина первого столбца с номерами хоккейных команд задана равной 20 пикселам, а всех столбцов с результатами матчей — 40 пикселам. Ширина столбца с названиями команд задана равной 20% от ширины окна. Ширина двух последних столбцов не задана вообще — им отводится все оставшееся место.

Во многих ячейках таблицы задан атрибут ALIGN="center", без которого выравнивание текста происходило бы по левому краю. Во всех ячейках с результатами встреч задан белый фон (BGCOLOR="white"), в ячейках с количеством очков и заброшенных/пропущенных шайб для лучшего визуального выделения использован другой цвет фона. Количество очков, как главная информация в каждой строке таблицы, выделено просто полужирным и чуть увеличенным шрифтом (с помощью тегов <В> и <ВЮ>). Для лучшего “разнесения” в разные стороны количества заброшенных и пропущенных шайб между ними использовано длинное тире — это специальный символ &mdash;.

Зачерненные квадраты турнирной таблицы сделаны просто — с помощью ячеек с черным цветом фона (BGCOLOR="black")“ И, наконец, для отобра-I жения рамки вокруг пустой ячейки (левой верхней) туда был помещен неразрывный пробел (&nbsp;).

Теперь давайте посмотрим на текст этой странички целиком:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>

<TITLE>TypHMpHan таблица</Тitle>

</HEAD>

<BODY BGCOLOR="#FFFFB3" TEXT="02020" LINK="400080" VLINK="#400080" ALINK="H00080">


<DIV ALIGN="center"

<Н1> ЧЕМПИОНАТ ГОРОДА ПО ХОККЕЮ</Н1>



<НЗ>ТАБЛИЦА РЕЗУЛЬТАТОВ</НЗ>

</DIV>

<TABLE ALIGN="center" BGCOLOR="#E4E4E4" WIDTH="100%" CELLSPACING="0" CELLPADDING="2" BORDER="3"> <TR>

<TD WIDTH="20" ALIGN="center">&nbsp;</TD>

<TD WIDTH="20%">Koмaндa</TD>

<TD WIDTH=Э40" ALIGN=Эcenter">1</TD>

<TD WIDTH="40" ALIGN="center">2</TD>

<TD WIDTH="40" ALIGN="center">3</TD>

<TD WIDTH="40" ALIGN="center">4</TD>

<TD WIDTH="40" ALIGN="center">5</TD>

<TD WIDTH="40" ALIGN="center">6</TD>

<TD ALIGN="center">Шайбы</TD>

<TD ALIGN="center">Очки</TD> </TR>

<TR>

<TD

ALIGN="center">1</TD>

<TD>&laquo;POTOP&raquo;</TD>

<TD

BGCOLOR="black"></TD> <TD

ALIGN="center"

BGCOLOR="white">6:4</TD> <TD

ALIGN="center"

BGCOLOR="white">2:3</TD> <TD

ALIGN="center"

BGCOLOR="white">7:3</TD> <TD

ALIGN="center"

BGCOLOR="white">2:1</TD> <TD

ALIGN="center"

BGCOLOR="white">0:0</TD> <TD

ALIGN="center"

BGCOLOR="#DFFFDF">17&mdash;11</TD>

<TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>7</BIG>

</TR> <TR>

<TD ALIGN=”center”2</TD>

<TD>&laquo;POTATOP&raquo;</TD>

<TD ALIGN=”center” BGCOLOR=”white>”4:6</TD>

<TD BGCOLOR=”black”></TD>



<TD ALIGN="center" BGCOLOR="white"5: 4</TD>

<TD ALIGN="center" BGCOLOR="white">5:3</TD>

<TD ALIGN="center" BGCOLOR="white">5:5</TD>

<TD ALIGN="center" BGCOLOR="white">2:2</TD>

<TD ALIGN="center" BGCOLOR="#DFFFDF">21&mdash;20</TD>

<TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>6</BIG> </B></TD>

</TR>

<TR>

<TD ALIGN="center">3</TD>

<ТD>&lаquo;УРОЖАЙ&raquo;</ТD>

<TD ALIGN="center" BGCOLOR="white">3:2</TD>

<TD ALIGN="center" BGCOLOR="white">4:5</TD>

<TD BGCOLOR="black"></TD>

<TD ALIGN="center" BGCOLOR="white">1:1</TD>

<TD ALIGN="center" BGCOLOR="white">11:2</TD>

<TD ALIGN="center" BGCOLOR="white">14:4</TD>

<TD ALIGN="center" BGCOLOR="#DFFFDF">33&mdash;14</TD>

<TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>5</BIG> </B></TD>

</TR>

<TR>

<TD ALIGN="center">4</TD>

<TD>&laquo;МЕЧТА&raquo;</TD>

<TD ALIGN="center" BGCOLOR="white">3:7</TD>

<TD ALIGN="center" BGCOLOR=="white">3 ; 5</TD>

<TD ALIGN="center" BGCOLOR="white">l:1</TD>

<TD BGCOLOR="black"></TD>

<TD ALIGN="center" BGCOLOR="white">l:1</TD>

<TD ALIGN="center" BGCOLOR="white"> 10 : 0</TD>

<TD ALIGN="center" BGCOLOR="#DFFFDF">18&mdash;14</TD>



<TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>4</BIG> </B></TD>

</TR>

<TR>

<TD ALIGN="center">5</TD>

<TD>&laquo;МЕЧТА& raquo;</TD>

<TD ALIGN="center" BGCOLOR="white">l:2</TD>

<TD ALIGN="center" BGCOLOR="white">5:5</TD>

<TD ALIGN="center" BGCOLOR="white">2:11</TD>

<TD ALI.GN="center" BGCOLOR="white">l: 1</TD>

<TD BGCOLOR="black"></TD>

<TD ALIGN="center" BGCOLOR="white">8:3</TD>

<TD ALING="'center"BGCOLOR="#DFFFDF">17&mdash;22</TD>

<TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>4</BIG> </B></TD>

</TR>

<TR>

<TD ALIGN="center">6</TD>

<TD>&laquo;OKA3ИЯ&raquo;</TD>

<TD ALIGN="center" BGCOLOR="white">0:0</TD>

<TD ALIGN="center" BGCOLOR="white">2:2</TD>

<TD ALIGN="center" BGCOLOR="white">4:14</TD>

<TD ALIGN="center" BGCOLOR="white">0 :10</TD>

<TD ALIGN="center" BGCOLOR="white">3 : 8</TD>

<TD BGCOLOR="black"></TD>

<TD ALIGN="center" BGCOLOR="#DFFFDF">9&mdash;34</TD>

<TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>2</BIG> </B></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Как видите, здесь использованы далеко не все возможности

HTML-таблиц а

результат, тем не менее, вполне приемлемый.

Разумеется, только что рассмотренная таблица является “статичной”: при изменении, например, одного из результатов матчей нам придется вновь вручную подсчитывать шайбы и очки.Интересно сделать таблицу, которая могла бы это делать сама. Например, изначально будучи вообще пустой, она могла бы реагировать на постепенное внесение результатов матчей.


Содержание раздела