Секреты ШЕФ-ПОВАРА

Секрет тонкой рамки

Вспомнились мне отчего-то стародавние времена, когда научился я делать симпатичные тонкие рамки

Многим наверное пригодится сей секрет, поскольку таблицы выглядят очень аккуратно. Вот так например:

Повар любит рамки
Вася любит суп


Нравится? Да я тоже был счастлив, когда разобрался как это сделано.

Давайте-ка взглянем, что же внутри:


<table WIDTH=200 border=0 BGCOLOR="MAROON" 
CELLSPACING=0 CELLPADDING=1>
<tr>
<td>
<table BGCOLOR="white" border=0 width=200 
CELLSPACING=0 CELLPADDING=3>
<tr>
<td><B>Повар любит</B></td>
<td><B>рамки</B></td>
</tr>
<tr>
<td><B>Вася любит</B></td>
<td><B>суп</B></td>
</tr>
</table>
</td>
</tr>
</table>
			

Что же тут новенького для Вас?

Так, так. Вы заметили? Структура состоит из двух таблиц вписанных друг в друга. Причем внешняя таблица имеет фоновый цвет ( BGCOLOR ) такой, какого цвета Вы хотите сделать рамку. А уж зачем нужен фоновый цвет во внутренней таблице Вы наверное и сами догадались.

Что не догадались?

Ну тогда смотрите - меняем фоновый цвет внутренней таблицы. К примеру на желтый:

Повар любит рамки
Вася любит суп

Ну что разбираемся дальше? Вписать таблицу в таблицу каждый олух умеет, так ведь?

Где же спрашивается здесь секрет? А вот он!

Точнее, вот они. Волшебные... Нет не пузырьки, а операторы CELLSPACING и CELLPADDING

Что они умеют? CELLSPACING нужен для того, чтобы определить расстояние между ячейками в таблице, а CELLPADDING определяет отступ обьекта помещенного в ячейку от стенки этой самой ячейки.

Во внешней таблице значения этих операторов таковы:


<table WIDTH=200 border=0 BGCOLOR="MAROON" 
CELLSPACING=0 CELLPADDING=1>
<tr>
<td>...
			

Это значит что внутренняя таблица будет отступать от внешней ровно на один пиксел. Что впрочем мы и хотели. Если Вы хотите сделать потолще свою рамочку, увеличьте значение CELLPADDING.

Теперь самое время перейти к значениям CELLSPACING и CELLPADDING внутренней таблицы:


...
<table BGCOLOR="white" width=200 
CELLSPACING=0 CELLPADDING=3>
<tr>
<td><B>Повар любит...

CELLPADDING в данном случае определяет отступ текста от стенок ячеек. Не стоит делать его значение равным 0, выглядит не очень здорово, хотя все конечно остается на Ваше усмотрение. Кто из нас дизайнер, Вы или я? :)

Ну, а теперь самое интересное. Как истинный повар, я оставляю самые вкусные вещи на десерт.

Как насчет таблицы, где ячейки разделены линиями толщиной в один пиксел? Вот так:

Повар любит рамки
Вася любит суп

Нравится? Вот где нам пригодятся CELLSPACING и CELLPADDING внутренней и внешней таблиц.

Посмотрим что там внутри:


<table WIDTH=200 border=0 BGCOLOR="MAROON"
  CELLSPACING=0 CELLPADDING=0>
<tr>
<td>
<table width=200 border=0 CELLSPACING=1 
  CELLPADDING=3>
<tr BGCOLOR="yellow" ALIGN=CENTER>
<td><B>Повар любит</B></td>
<td><B>рамки</B></td>
</tr>
<tr BGCOLOR="yellow" ALIGN=CENTER>
<td><B>Вася любит</B></td>
<td><B>суп</B></td>
</tr>
</table>

Что же изменилось?

Ну конечно! CELLPADDING внешней таблицы стал теперь равен 0, а у внутренней CELLSPACING=1. А почему бы не оставить у внешней таблицы значение CELLPADDING таким, какое оно было прежде? Значения CELLSPACING и CELLSPACING внешней и внутренней таблиц в этом случае складываются и толщина внешней рамки тут же станет равной 2 пикселям:

Повар любит рамки
Вася любит суп

Да и совсем забыл сказать... Не забудьте удалить из тага <TABLE> внутренней таблицы оператор BGCOLOR иначе не выйдет у Вас никаких тонких линий между ячейками.

Этот оператор нужно расставить в таги <TR> внутренней таблицы, если Вы хотите задавать один цвет для всех ячеек одной строки, или в таги <TD>, если Вы задаете цвет для каждой ячейки отдельно.

На этом разрешите полдник считать оконченным.

Творческих Вам успехов в приготовлении Вашего супа.

PS: Не забывайте! CELLSPACING - расстояние между ячейками, CELLPADDING - расстояние между обьектом и стенкой ячейки. Кстати, что можно считать обьектом, как Вы думаете? :)





© 1998 WEBlink,  http://www.weblink.ru