Таблица. Опыты с табличными рамками

Таблица

Один читатель обратился с такой проблемой: он захотел сделать таблицу с плоской однотонной рамкой, но получил не совсем то, чего хотел. Естественно, он использовал вот такую тривиальную конструкцию:<TABLE border=1 bordercolor=»#C0C0C0″ bordercolorlight=»#C0C0C0″ bordercolordark=»#C0C0C0″> <!— везде указывается какой-то один цвет —>

Возникли две проблемы: во-первых, ни в NetscapeNavigator, ни в InternetExplorer нельзя таким образом сделать рамку толщиной в 1 пиксель — при указании параметра BORDER равным 1 создается рамка толщиной 2 пикселя; во-вторых, в Нетскейпе даже таким хитрым способом нельзя избавиться от «рельефа» рамки.

Тут есть одно решение, хотя и не очень красивое.
1) Создаем таблицу (с одной ячейкой) с параметрами BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=»#000000″ (указываем значение цвета, которым мы хотим закрасить рамку);
2) В полученную таблицу вкладываем собственно основную таблицу с нужным количеством строк/столбцов и с параметрами BORDER=0 CELLSPACING=1 (здесь «1» — толщина будущей рамки);
3) Теперь для каждой ячейки вложенной таблицы укажем ее цвет, например <TD BGCOLOR=»#FFFFFF»>

В итоге получится что-то вроде этого:

Вот полный HTML-код этой таблицы:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»400″bgcolor=»#000000″> <tr> <td width=»100%»><div align=»center»><center> <table border=»0″ cellpadding=»5″cellspacing=»1″ width=»100%»> <tr> <td colspan=»3″ width=»100%» bgcolor=»#C0C0C0″> <p align=»center»>Название таблицы</p> </td> </tr> <tr> <td width=»33%» bgcolor=»#FFFFFF»><p align=»center»> Ячейка 1</p> </td> <td width=»33%» bgcolor=»#FFFFFF»><p align=»center»> Ячейка 2</p> </td> <td width=»34%» bgcolor=»#FFFFFF»><p align=»center»> Ячейка 3</p> </td> </tr> </table> </center></div></td> </tr> </table>

bgcolor=»#000000″ — цвет рамки;
cellspacing=»1″- толщина рамки

Для InternetExplorer можно и не прибегать к использованию вложенных таблиц, ограничившись лишь указанием различного цвета для фона таблицы и фона ячеек, однако в Netscape в этом случае промежутки между ячейками будут заполнены не фоновым цветом таблицы, а фоном самой страницы, т.е. будут «прозрачными». Приведенный же выше пример более универсален и лишь кажется громоздким.

Читать также:  Цвета в HTML
Оцените статью
Новостной портал
Добавить комментарий