» Форма входа

»Мoy-weB ver.4.1

» Статистика

Главная » 2008 » Октябрь » 12 » Таблицы и границы

Таблицы и границы
12.Окт.2008 | 22:19:50

Таблицы и границы


Сколько бы ни хвалились производители суперплоских мониторов, всегда
есть сила, действующая в обратном направлении: это программисты,
которые никак не могут примирится с двумерностью экрана и на каждом
шагу скандируют: «даёшь 3D!».

Псевдотрехмерность
окружает нас везде: где надо и не надо. Если, к примеру, button по
определению должен выпирать из монитора, то в чем провинились
безобидные hr и table? Первый уже рассматривался в заметке № 12, теперь
поговорим о том, как на корню убить трехмерность последнего.

Способ первый


Воспользуемся
атрибутом cellspacing, создающим прозрачную рамку меж всех клеток
таблицы. Нужно лишь окрасить ее в определенный цвет, а сделать это
можно с помощью свойства bgcolor тэгов table и td:

<table bgcolor=black border=0 cellpadding=2 cellspacing=1 width=100>
<tr>
    <td bgcolor=white>&nbsp;</td>
    <td bgcolor=white>&nbsp;</td>
</tr>
<tr>
    <td bgcolor=white>&nbsp;</td>
    <td bgcolor=white>&nbsp;</td>
</tr>
</table>

Милостивый
читатель спросит: а почему нельзя поместить bgcolor=white сразу в тэг
tr, тем самым значительно сжав код? На что автор ответит: а потому,
деточка моя, что двоечник по рендерингу NN6 окрасит всю строку белым
цветом, и плакали наши вертикальные рамочки.

Тем не менее, код действительно получается громоздким, поэтому на подходе…

Способ второй


Идея
подсмотрена в исходниках Студии Лебедева и принципиально не отличается
от предыдущей: полностью включаем исходную таблицу во внешнюю, для
которой и прописываем нужный bgcolor.

<table bgcolor=black border=0 cellpadding=0 cellspacing=0 width=100><tr><td>
<table bgcolor=white border=0 cellpadding=2 cellspacing=1>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</td></tr></table>

Код
значительно полегчал, хвала кодерам Студии Лебедева. Но и этот способ
не лишен недостатков: попробуйте распечатать такую таблицу на принтере.
Получилось? Фигушки, потому что Internet Explorer по умолчанию не
печатает цвета и рисунки фона.

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

Способ третий


Действительно, что нам мешает указать каждой ячейке свойство border?

td{
border: solid black 1px
}

А
то, мои дорогие, что таким образом на месте соприкасания ячеек
получится рамка толщиной в два пикселя. По спецификации, эту проблему
должно решать свойство border-collapse со значением collapse. В этом
случае соседние границы должны «проглатывать» друг друга. Оставим это
счастье нашим внукам, потому что нынче ни один браузер это свойство не
поддерживает. Отсюда вытекает…

Способ четвертый


По-научному это называется разделением труда:

table.border{
border-color: black;
border-style: solid;
border-width: 0 1px 1px 0
}

table.border td, table.border th{
border-color: black;
border-style: solid;
border-width: 1px 0 0 1px
}

Всё
просто до безобразия. Каждая ячейка отвечает только за верхнюю и левую
рамки. Осталось лишь дорисовать длинные правую и нижнюю рамки. Это
возложено на свойство border самой таблицы.

Примечание
Александра Шуркаева. На самом деле, CSS свойство border-collapse
полностью (значения separate и collapse) поддерживается IE5+,
NN6/Mozilla, Opera 4+, что вполне оправдывает его использование. Учтите
только, что задавать свойство border-collapse необходимо при декларации
тега table, в то время как бордер задаётся при описании ячеек:

table.border{
border-collapse:collapse
}

table.border td, table.border th{
border:1px solid #CC0000
}
Категория: Статьй и уроки | Просмотров: 431 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]