ДВАДЦАТЫЙ УРОК
Таблицы
Да! Настал этот день! Сегодня мы будем запихивать себя и других в рамки! А то ведь никакого порядка! Все должны сидеть в клетках, тьфу... держать себя в рамках. И будет тогда тишь и гладь, да божья благодать.
Сейчас я выдам вам тайну построения таблиц. Очень просто! И легко! Как все гениальное! Нужно только указать начало и конец таблицы. Опять же без тегов никуда.
<TABLE> - начало таблицы, а </TABLE> - ее конец. Дальше - анархия. Итак, начнем:
И смотрим, что получилось (рис. 93):
Рис. 93. Первый блин комом. Вот что получилось!
А все почему? А потому, уважаемые граждане, что мы не указали ячеек! Ну не может таблица существовать без ячеек! Впрочем, как и общество. Хотя, конечно же, отсталые и дикие племена, да и некоторые несознательные граждане понятия не имеют про ячейки, но нам с ним не по пути! Мы люди современные, а потому ячейки нам необходимы как воздух и вода. Которые тоже, наверняка состоят из ячеек!
Единственное отличие таблицы от общества - это то, что общество не может состоять из одной ячейки, а вот таблица - запросто! И вот этот весь урок мы будем ее мусолить, впихивать туда, что в голову взбредет, короче, будем ее "иметь" и так и сяк и, извиняюсь за невольно вырвавшуюся грубость, мордой об косяк.
Итак, мы хотим сделать таблицу из одной ячейки. Но одного хотенья мало! Нужно добавить еще и пару тегиков. Каждую ячеечку мы любовно обернем тегом <TD>, а чтобы она еще не простыла и (не дай бог!) не свалилась в конце строки, подопрем ее тегами <TR>. И тогда код у нас будет такой:
Эта наша первая таблица |
Но, когда мы посмотрим, что получилось в браузере, то очень удивимся, потому как результат останется почти тем же (см. рис. 93). Но тут уж я над вами не пошутила и шутить не собиралась. Дело в том, что мы не указали нужны ли нам границы или нет. Мы вот возьмем и напишем браузеру письмо, что, мол нам очень даже нужны границы и не какие-то там тощие, в 1 пиксел, а шириной в пять пикселов, с размахом, так сказать! И сделаем это с помощью атрибута border вот так:
Это наша первая таблица |
И теперь побежим скорее смотреть, что у нас там выкинул наш строптивый браузер. А выкинул он вот что (рис. 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> |
|
||||
(*) bordercolor цвет рамки для всей таблицы |
<TABLE bordercolor=blue> |
|
||||
cellpadding свободное пространство вокруг содержимого каждой ячейки |
<TABLE cellpadding=10 border=1> |
|
||||
cellspacing свободное пространство между ячейками |
<TABLE cellspacing=10> |
|
||||
(*)
height устанавливает высоту таблицы в пикселах |
<TABLE height=100 bgcolor=yellow> |
|
||||
(*)
hspace промежуток в пикселах от таблицы слева и справа |
<TABLE hspace=15 border=5> |
|
||||
(*)
nowrap Запрещает перенос слов в ячейке |
<TABLE nowrap> <TABLE> |
|
||||
vspace оставляет промежуток сверху и снизу от таблицы в пикселах |
<TABLE vspace=10 border=1 bgcolor=aqua> |
|
||||
width ширина таблицы в пикселах или в процентах |
<TABLE width=200 bgcolor=pink border=1> |
|
Что ж, я думаю, вы поняли, что таблиц бояться не нужно. Пусть они вас боятся! А сейчас мы займемся размножением наших ячеек. Не все ж носиться с одноячеистой таблицей! Хотя к ней мы еще вернемся и не раз.
Таблицы, состоящие из нескольких ячеек
Как ни жалко выдвать мне свои секреты, все же с ближними надо делиться. Ведь столько вместе с вами пройдено... Итак, сейчас мы построим таблицу, состоящую из четырех ячеек сразу! Сразу предупреждаю, что каждая ячейка в отдельности заворачивается тегом <TD>, а каждая строчка начинается с тега <TR>, а заканчивается - </TR>:
1ячейка | 2ячейка | 3ячейка | 4ячейка |
Ну и вот результаты моего труда:
1ячейка | 2ячейка | 3ячейка | 4ячейка |
Если же мы хотим сделать таблицу из нескольких строк, в каждой строке по те же 4 ячейки, то это тоже просто сделать. Нужно только новую строку начинать <TR>, а заканчивать </TR>. Вот и все премудрости. Убедитесь сами:
1ячейка | 2ячейка | 3ячейка | 4ячейка |
5ячейка | 6ячейка | 7ячейка | 8ячейка |
9ячейка | 10ячейка | 11ячейка | 12ячейка |
И результат не замедлил сказаться:
1ячейка | 2ячейка | 3ячейка | 4ячейка |
5ячейка | 6ячейка | 7ячейка | 8ячейка |
9ячейка | 10ячейка | 11ячейка | 12ячейка |
Пока на сегодня все. Но если вы думаете, что я отстану от вас с таблицами, то глубоко заблуждаетесь. Ими мы будем заниматься еще несколько уроков. Пока не окосеете. Или не окосею я. Так что запаситесь очками!!!
Вот на такой серьезной ноте я вас и покидаю. Вам очередь занять к окулисту?
(В. Ахметзянова, 2005 г)