Создание таблиц
Зачерненные квадраты турнирной таблицы сделаны просто – с помощью ячеек с черным цветом фона (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"> </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>«POTOP»</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—11</TD> <TD ALIGN="center" BGCOLOR="#FF8484"> <B><BIG>7</BIG></B> </TR> <TR> <TD ALIGN="center">2</TD> <TD>«POTATOP»</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—20</TD> <TD ALIGN="center" BGCOLOR="#FF8484"> <B><BIG>6</BIG></B> </TD> </TR> <TR> <TD ALIGN="center">3</TD> <TD>«УРОЖАЙ»</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—14</TD> <TD ALIGN="center" BGCOLOR="#FF8484"> <B><BIG>5</BIG></B> </TD> </TR> <TR> <TD ALIGN="center">4</TD> <TD>«МЕЧТА»</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—14</TD> <TD ALIGN="center" BGCOLOR="#FF8484"> <B><BIG>4</BIG></B> </TD> </TR> <TR> <TD ALIGN="center">5</TD> <TD>«МЕЧТА& 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—22</TD> <TD ALIGN="center" BGCOLOR="#FF8484"> <B><BIG>4</BIG></B> </TD> </TR> <TR> <TD ALIGN="center">6</TD> <TD>«ОКАЗИЯ»</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—34</TD> <TD ALIGN="center" BGCOLOR="#FF8484"> <B><BIG>2</BIG></B> </TD> </TR> </TABLE></BODY> </HTML>Как видите, здесь использованы далеко не все возможности HTML-таблиц, а результат, тем не менее, вполне приемлемый.
Разумеется, только что рассмотренная таблица является “статичной”: при изменении, например, одного из результатов матчей нам придется вновь вручную подсчитывать шайбы и очки. Интересно сделать таблицу, которая могла бы это делать сама. Например, изначально будучи вообще пустой, она могла бы реагировать на постепенное внесение результатов матчей.