Иллюстрированный самоучитель по созданию сайтов › Основные средства языка HTML › Создание таблиц [страница - 39] | Самоучители по работе в Internet

Создание таблиц

Зачерненные квадраты турнирной таблицы сделаны просто – с помощью ячеек с черным цветом фона (BGCOLOR="black").

И, наконец, для отображения рамки вокруг пустой ячейки (левой верхней) туда был помещен неразрывный пробел ( ).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
    <TITLE>Турнирная таблица</TITLE>
</HEAD>
  
<BODY BGCOLOR="#FFFFB3" TEXT="02020" LINK="400080" VLINK="#400080" ALINK="H00080">
    <DIV ALIGN="center">
        <H1>ЧЕМПИОНАТ ГОРОДА ПО ХОККЕЮ</H1>
        <H3>ТАБЛИЦА РЕЗУЛЬТАТОВ</H3>
    </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%">Команда</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></B>
        </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>
            <TD>&laquo;УРОЖАЙ&raquo;</TD>
            <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">1:1</TD>
            <TD BGCOLOR="black"></TD>
            <TD ALIGN="center" BGCOLOR="white">1: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">1:2</TD>
            <TD ALIGN="center" BGCOLOR="white">5:5</TD>
            <TD ALIGN="center" BGCOLOR="white">2:11</TD>
            <TD ALI.GN="center" BGCOLOR="white">1: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;ОКАЗИЯ&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-таблиц, а результат, тем не менее, вполне приемлемый.

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