Сколько бы ни хвалились производители суперплоских мониторов,
   всегда есть сила, действующая в обратном направлении: это
   программисты, которые никак не могут примирится с двумерностью
   экрана и на каждом шагу скандируют: «даёшь 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 самой таблицы.