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

...

Таблицы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

align выравнивает таблицу по левому (left) или правому (right) краю

Таблица выровнена по левому краю

Таблица выровнена по правому краю

(*) background
указывает изображение, которым заполнится фон таблицы

Таблица с фоновым изображением

bgcolor
цвет фона таблицы

А это просто голубой фон

border ширина рамки в пикселах

рамка равна 3 пикселам

(*) bordercolor цвет рамки для всей таблицы

Рамка - голубая. Работает не во всех браузерах. Я вот в експлорере ее в упор не вижу!

cellpadding
свободное пространство вокруг содержимого каждой ячейки

вокруг текста свободное пространство на 10 пикселов, видите?

cellspacing
свободное пространство между ячейками

первая ячейка

вторая ячейка

(*) height
устанавливает высоту таблицы в пикселах

Высота таблицы - 100 пикселов. Работает не во всех браузерах

(*) hspace
промежуток в пикселах от таблицы слева и справа

текст

таблица

текст

(*) nowrap
Запрещает перенос слов в ячейке

эти слова ни за что не перенесутся

vspace
оставляет промежуток сверху и снизу от таблицы в пикселах

Сверху и снизу свободное
пространство на 10 пикселов

width
ширина таблицы в пикселах или в процентах

Эта таблица шириной в 200 пикселей. Если сомневаетесь, можете проверить.

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

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

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

<html lang="ru"> <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 г)