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



Таблицы

Да! Настал этот день! Сегодня мы будем запихивать себя и других в рамки! А то ведь никакого порядка! Все должны сидеть в клетках, тьфу... держать себя в рамках. И будет тогда тишь и гладь, да божья благодать.

Сейчас я выдам вам тайну построения таблиц. Очень просто! И легко! Как все гениальное! Нужно только указать начало и конец таблицы. Опять же без тегов никуда.

<TABLE> - начало таблицы, а </TABLE> - ее конец. Дальше - анархия. Итак, начнем:

<HTML> <HEAD> <TITLE>Наша первая таблица</TITLE> </HEAD> <BODY> <TABLE> Это наша первая таблица </TABLE> </BODY> </HTML>

И смотрим, что получилось (рис. 93):


Рис. 93. Первый блин комом. Вот что получилось!

А все почему? А потому, уважаемые граждане, что мы не указали ячеек! Ну не может таблица существовать без ячеек! Впрочем, как и общество. Хотя, конечно же, отсталые и дикие племена, да и некоторые несознательные граждане понятия не имеют про ячейки, но нам с ним не по пути! Мы люди современные, а потому ячейки нам необходимы как воздух и вода. Которые тоже, наверняка состоят из ячеек!

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

Итак, мы хотим сделать таблицу из одной ячейки. Но одного хотенья мало! Нужно добавить еще и пару тегиков. Каждую ячеечку мы любовно обернем тегом <TD>, а чтобы она еще не простыла и (не дай бог!) не свалилась в конце строки, подопрем ее тегами <TR>. И тогда код у нас будет такой:

<HTML> <HEAD> <TITLE>Наша первая таблица</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD> Эта наша первая таблица </TD> </TR> </TABLE> </BODY> </HTML>

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

<HTML> <HEAD> <TITLE>Наша первая таблица</TITLE> </HEAD> <BODY> <TABLE border=5> <TR> <TD> Это наша первая таблица </TD> </TR> </TABLE> </BODY> </HTML>

И теперь побежим скорее смотреть, что у нас там выкинул наш строптивый браузер. А выкинул он вот что (рис. 94):


Рис. 94. Красота неземная!

И это не предел! Сейчас я перечислю все, что можно делать с таблицами! Я перечислю атрибуты, которые можно поместить в тег <TABLE...>. Но нужно иметь в виду, что некоторые атрибуты срабатывают не во всех браузерах. Такие атрибуты я помечу звездочкой.


 

Атрибуты таблиц

align выравнивает таблицу по левому (left) или правому (right) краю <TABLE align=left border=1>
Таблица выровнена по левому краю
<TABLE align=right border=1>
Таблица выровнена по правому краю
(*) background
указывает изображение, которым заполнится фон таблицы
<TABLE background="fon.jpg">
Таблица с фоновым изображением
bgcolor
цвет фона таблицы
<TABLE bgcolor=blue>
<TABLE bgcolor=#3300CC>
А это просто голубой фон
border ширина рамки в пикселах <TABLE border=3>
рамка равна 3 пикселам
(*) bordercolor цвет рамки для всей таблицы <TABLE bordercolor=blue>
Рамка - голубая. Работает не во всех браузерах. Я вот в експлорере ее в упор не вижу!
cellpadding
свободное пространство вокруг содержимого каждой ячейки
<TABLE cellpadding=10 border=1>
вокруг текста свободное пространство на 10 пикселов, видите?
cellspacing
свободное пространство между ячейками
<TABLE cellspacing=10>
первая ячейка вторая ячейка
(*) height
устанавливает высоту таблицы в пикселах
<TABLE height=100 bgcolor=yellow>
Высота таблицы - 100 пикселов. Работает не во всех браузерах
(*) hspace
промежуток в пикселах от таблицы слева и справа
<TABLE hspace=15 border=5>
текст
таблица
текст
(*) nowrap
Запрещает перенос слов в ячейке
<TABLE nowrap>
<TABLE>
эти слова ни за что не перенесутся
vspace
оставляет промежуток сверху и снизу от таблицы в пикселах
<TABLE vspace=10 border=1 bgcolor=aqua>
Сверху и снизу свободное
пространство на 10 пикселов
width
ширина таблицы в пикселах или в процентах
<TABLE width=200 bgcolor=pink border=1>
Эта таблица шириной в 200 пикселей. Если сомневаетесь, можете проверить.

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

 


Таблицы, состоящие из нескольких ячеек

Как ни жалко выдвать мне свои секреты, все же с ближними надо делиться. Ведь столько вместе с вами пройдено... Итак, сейчас мы построим таблицу, состоящую из четырех ячеек сразу! Сразу предупреждаю, что каждая ячейка в отдельности заворачивается тегом <TD>, а каждая строчка начинается с тега <TR>, а заканчивается - </TR>:

<HTML> <HEAD> <TITLE>Четыре ячейки</TITLE> </HEAD> <BODY> <TABLE border=5 bgcolor=aqua> <TR> <TD>1ячейка</TD> <TD>2ячейка</TD> <TD>3ячейка</TD> <TD>4ячейка</TD> </TR> </TABLE> </BODY> </HTML>

Ну и вот результаты моего труда:

1ячейка 2ячейка 3ячейка 4ячейка

Если же мы хотим сделать таблицу из нескольких строк, в каждой строке по те же 4 ячейки, то это тоже просто сделать. Нужно только новую строку начинать <TR>, а заканчивать </TR>. Вот и все премудрости. Убедитесь сами:

<TABLE border=5 bgcolor=aqua> <TR> <TD>1ячейка</TD> <TD>2ячейка</TD> <TD>3ячейка</TD> <TD>4ячейка</TD> </TR> <TR> <TD>5ячейка</TD> <TD>6ячейка</TD> <TD>7ячейка</TD> <TD>8ячейка</TD> </TR> <TR> <TD>9ячейка</TD> <TD>10ячейка</TD> <TD>11ячейка</TD> <TD>12ячейка</TD> </TR> </TABLE>

И результат не замедлил сказаться:

1ячейка 2ячейка 3ячейка 4ячейка
5ячейка 6ячейка 7ячейка 8ячейка
9ячейка 10ячейка 11ячейка 12ячейка

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

Вот на такой серьезной ноте я вас и покидаю. Вам очередь занять к окулисту?


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

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