Автор статьи: Головин Андрей
Недавно мне намекнули, что опыт по организации тонких рамок у таблиц несколько однобок. Действительно он позволяет делать тонкой только внешнюю рамку. В том же письме приводился пример таблицы с тонкими рамками между ячеек, но, к сожалению, это решение абсолютно не работало в Netscape.
Меня тут же посетила идея как это можно сделать. Для начала необходимо заготовить две, хорошо вам знакомых, картинки: однопиксельный гиф, нужного цвета (он и будет определять цвет получаемой границы) и однопиксельный прозрачный гиф (он нам пригодится для борьбы с Нетскейпом, так как тот норовит вставить фон там где не надо и убрать его там где, вобщем-то, хотелось).
Тому, у кого в кладовке нет этих замечательных картинок, предлагаю взять их тут: >цветной (1pix_gr.gif) и прозрачный (1pix_t.gif)
Теперь приступим непосредственно к созданию таблицы. Реализована она, как и первый вариант, с помощью двух таблиц, одна из которых будет вложена в другую. У первой в качестве фона зададим цветную однопиксельную картинку, а у второй – прозрачную. Затем у второй таблицы необходимо установить межячеечное расстояние и цвет фона (скажем, белый) у каждой ячейки индивидуально. Вот, что получилось у меня:
|
Вот код:
<TABLE WIDTH=”200″ CELLSPACING=”0″ CELLPADDING=”0″
BACKGROUND=”images/1pix_gr.gif” ALIGN=”CENTER”>
<TR><TD>
<TABLE WIDTH=”200″ <font color=red>CELLSPACING=”1″</font> CELLPADDING=”2″
BACKGROUND=”images/1pix_t.gif”>
<TR>
<TD BGCOLOR=”yellow”>Опля</TD>
<TD BGCOLOR=”yellow”>Опля</TD>
</TR>
<TR>
<TD BGCOLOR=”yellow”>Жареные</TD>
<TD BGCOLOR=”yellow”>Раки</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>
Еще одним достоинством этой реализации является то, что мы в любой момент можем поменять толщину границы, изменив выделенный атрибут. Например, поставив там тройку, получим вот такую таблицу:
|
