ДВАДЦАТЬ ВТОРОЙ УРОК

Всеобщий психоз

Итак, мы научились с вами строить таблицы практически любой сложности. И это важно. Возможно, многие из вас будут удивлены и разочарованы, типа зачем вообще нужны эти таблицы, зачем им уделять так много времени? Типа, мы хотим делать веб-странички, а не строить разные там графики и таблицы. И вот что я на это вам скажу.

Конечно, поначалу таблицы и предназначались только для того, чтобы заполнять их скучными цифрами, сводками и никому не нужными процентами. Но нашелся вот один хороший человек (к сожалению, это была не я), который догадался, что раз в каждую ячейку можно поместить цифирьку, значит можно очень даже здорово запихнуть туда чего-то еще интересненькое и красивенькое... И пошло и поехало...

Что тут началось! Все дизайнеры просто с ума посходили! Начали пихать в ячейки кто текст, кто графику, а кто и то и другое вместе, и чего только они туда не пихали и не засовывали! Дай вот им волю, сами бы туда залезли! А один умник (к счастью, это была тоже не я) даже до того свихнулся, что засунул в ячейку целую таблицу, в ячейку новой таблицы - еще одну таблицу, и так он этим делом увлекся, что его до сих пор оттудова вытащить не могут! Вот ей богу, не вру! Н-да...завралась совсем.

В общем, вы поняли, что можно вытворять с обыкновенными ячейками, да? Теперь перед вами - безграничные возможности! Это вам не left или right, тут - полет фантазии!

Но сначала... я перечислю все атрибуты, которые можно использовать в ячейках. Очень во многом они совпадают с атрибутами таблицы, перечисленными в 20 уроке. Но есть некоторые отличия.


Атрибуты ячеек

align
выравнивает содержимое ячеек по центру (center), левому (left) или правому (right) краю
<TABLE border=1 width=200
<TR> <TD align=left>
содержимое ячейки выровнено по левому краю
</TD> </TR>
<TR> <TD align=center>
содержимое ячейки выровнено по центру
</TD> </TR>
<TR> <TD align=right>
содержимое ячейки выровнено по правому краю
</TD> </TR>
</TABLE>
содержимое ячейки выровнено по левому краю
содержимое ячейки выровнено по центру
содержимое ячейки выровнено по правому краю
(*)
background
указывает изображение, которым заполнится фон ячейки
<TABLE border=0 bgcolor=aqua>
<TR> <TD background="fon.jpg">
Ячейка с фоном </TD> </TR>
<TR> <TD>
Ячейка без фона
</TD> </TR>
<TR> <TD background="fon.jpg>
а эта тоже с фоном
</TD> </TR>
</TABLE>
Ячейка с фоном
Ячейка без фона
а эта опять с фоном

bgcolor
цвет фона ячейки

<TABLE border=0>
<TR> <TD bgcolor=red>
красный
</TD> </TR>
<TR> <TD bgcolor=yellow>
желтый...
</TD> </TR>
<TR> <TD bgcolor=green>
зеленый!
</TD> </TR>
</TABLE>
красный
желтый...
зеленый!
(*)
bordercolor цвет рамки для ячейки
<TABLE border=1>
<TR> <TD bordercolor=red>
красная рамка
</TD> </TR>
<TR> <TD bordercolor=yellow>
желтая рамка...
</TD> </TR>
<TR> <TD bordercolor=green>
зеленая рамка!
</TD> </TR>
</TABLE>
красная рамка
желтая рамка...
зеленая рамка!
(*)
height height
высота ячейки в пикселах
<TABLE border=1 bgcolor=#cccccc>
<TR> <TD height=20>
высота 20 пикселов!
</TD> </TR>
<TR> <TD height=40>
высота - 40 пикселов!
</TD> </TR>
<TR> <TD height=60>
высота - 60 пикселов!
</TD> </TR>
</TABLE>
высота - 20 пикселов!
высота - 40 пикселов!
высота - 60 пикселов!
(*)
width
ширина ячейки в пикселах или в процентах
<TABLE border=1 bgcolor=#cccccc>
<TR> <TD width=150 colspan=2>
ширина ячейки - 150 пикселов!
</TD> </TR>
<TR> <TD width=20%>
ширина ячейки - 20%
</TD> <TD width=80%>
ширина ячейки - 80%
</TD> </TR>
</TABLE>
ширина ячейки - 150 пикселов!
ширина ячейки - 20% ширина ячейки - 80%
(*)
valign
выравнивание содержимого ячейки по вертикали
<TABLE border=1 bgcolor=#cccccc>
<TR> <TD valign=top height=150>
содержимое ячейки выравнено по верхнему краю
</TD>
<TD valign=middle>
содержимое выравнено по середине ячейки
</TD> </TR>
<TR> <TD valign=bottom>
содержимое ячейки выравнено по нижнему краю
</TD> <TD valign=baseline>
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
</TD> </TR>
</TABLE>
содержимое ячейки выравнено по верхнему краю содержимое выравнено по середине ячейки
содержимое ячейки выравнено по нижнему краю Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.

Это самые необходимые атрибуты, которые вам нужны будут постоянно, есть еще и другие, не столь важные и которые вы можете прочитать в любом справочнике. А мы, наконец-то займемся делом. Будем впихивать и засовывать.


А кто не верблюд?

Для начала создадим таблицу, состоящую из двух ячеек, в левую ячейку поместим изображение, а в правую - просто текст. Думаю, это вы сделаете играючи!

<table border=1> <tr> <td> <img src="image/verblud.jpg" width=400 height=312> </td> <td> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </td> </tr> </table>

И у меня получилось вот так:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Но если вы думаете, что таблиц с вас достаточно, то и здесь вы глубоко заблуждаетесь! На следующем уроке мы, правда немного отдохнем от них, и займемся наконец изображениями в формате gif, научимся рисовать красивые кнопки... может даже приступим к анимации... чтобы уже после этого опять вернуться к нашим таблицам и начать делать почти профессиональный сайт.

А пока я буду пыхтеть над следующим уроком, не сидите сложа руки, а ковыряйтесь, ковыряйтесь и ковыряйтесь с таблицами, исследуйте их вдоль и поперек. Пусть они вам даже снятся ночами! Только смотрите не чокнитесь! А то ведь всякое бывает...


К списку всех уроков

(В. Ахметзянова, 2005 г)