Сколько бы ни хвалились производители суперплоских мониторов, всегда
есть сила, действующая в обратном направлении: это программисты,
которые никак не могут примирится с двумерностью экрана и на каждом
шагу скандируют: «даёшь 3D!».
Псевдотрехмерность
окружает нас везде: где надо и не надо. Если, к примеру, button по
определению должен выпирать из монитора, то в чем провинились
безобидные hr и table? Первый уже рассматривался в заметке № 12, теперь
поговорим о том, как на корню убить трехмерность последнего.
Способ первый
Воспользуемся
атрибутом cellspacing, создающим прозрачную рамку меж всех клеток
таблицы. Нужно лишь окрасить ее в определенный цвет, а сделать это
можно с помощью свойства bgcolor тэгов table и td:
<table bgcolor=black border=0 cellpadding=2 cellspacing=1 width=100>
<tr>
<td bgcolor=white> </td>
<td bgcolor=white> </td>
</tr>
<tr>
<td bgcolor=white> </td>
<td bgcolor=white> </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> </td> <td> </td> </tr> <tr> <td> </td> <td> </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
}
|
Копирование материалов разрешено,