HTML-EXPRESS.COM ПРЕДСТАВЛЯЕТ ...

HTML - Тонкие рамки для таблиц

При помощи таблиц можно добится очень интересных визуальных эффектов при создании тонких рамок, почти одинаково интерпретируемых всеми броузерами. Рассмотрим для этого несколько примеров.

Рамка 1

В этом примере используются вложенные таблицы, то есть одна таблица в другой. В строке 1 мы открываем первую таблицу и наполняем её темным цветом, в данном случае чёрным (# 00 00 00). Один из параметров наружной таблицы - cellspacing или cellpadding - должен быть равен 0, а другой 1. В строке 4 мы открываем новую таблицу с белым фоном (# FF FF FF). Важным параметром вложенной таблицы является её ширина - width="100%". Таблицы следует закрывать в обратном порядке - сначала вложенную, затем наружную.

Вышеописанный вариант можно применить с целью создания рамки для всей страницы, но следует учесть, что для страниц с большим колличеством информации он не пригоден, так как браузер, прежде чем показать содержание таблицы, должен прочесть её до конца. Таким образом посетитель несколько секунд будет видеть просто пустой экран.

Рамка 2

В этом примере мы обходимся одной таблицей. Для создания рамки здесь используется специально для этого предназначенный параметр border, которому присваивается значение 1. Одновременно параметр cellspacing приравнивается к 0, иначе рамка будет выглядеть так:

параметр cellspacing = 1

параметр cellspacing = 2

параметр cellspacing = 3

Этот вариант проще первого, но, к сожалению, несовсем одинаково интерпретируется  Internet Explorer'ом и Netscape'ом.

Рамка 3

	Так это выглядит

Если два предыдущих варианта выводят на экран в разных броузерах рамки, хоть и минимально, но разной толщины, то третий пример интерпретируется распространёнными броузерами Internet Explorer 4.x/5.x/6, Netscape 4.x/6.x и Opera 6.x одинаково, что касается толщины рамки. Считаю уместным упомянуть, что больше всего проблем доставляет веб-дизайнеру Netscape 4.x. 
Но расмотрим подробнее третий вариант. В его основе лежит таблица из 9 клеток, представленная ниже:

Все клетки, кроме 5ой, закрашиваются чёрным цветом, пятая - белым. Фон самой таблицы в данном случае не важен. Затем к клеткам 1-3 и 7-9  добавлятся параметр height="1". Соответственно клетки 1, 3, 4, 6, 7, 9 делаются шириной в один пиксел (width="1"). Средние клетки 2, 5, 8 делаются максимально широкими (width="100%"). Фокус заключается в том, что в клетки, которые должны быть узкими или тонкими, или теми и другими, добавляется так называемый "модифицированный квадрат Малевича" - прозрачный gif-файл размером 1х1, иначе желаемый эффект достигнут не будет.

Для создания тонкой рамки вокруг таблицы с одной ячейкрй этот вариант является, несомненно, слишком сложным и обьёмным, несмотря на его совместимость со многими браузерами. Он применяется, в основном, для разметки страницы тонкими линиями. Для создания рамок можно также использовать таблицы стилей, но об этом в одном из следующих workshop'ов.