Разделитель HR и его эмуляция

Старый добрый hr (horizontal rule) нередко используется для смыслового разделения контента. Но он зачастую плохо вписывается в дизайн конкретного сайта, поэтому уже давно у него существуют атрибуты noshade, size, align, color (детище Miscrosoft, нет в спецификации HTML 4) и width. Все перечисленные атрибуты являются deprecated, вместо них предпочтительно использовать CSS.

Тут возникают проблемы. Дело в том, что на данный момент даже самые последние браузеры по-разному, скажем, воспринимают задание цвета hr через CSS. Согласно докам на сайте Opera, цвет hr якобы определяется не свойством color (как в Internet Explorer 4+ и Netscape Navigator 6+), а свойством background. Ха, как бы не так! На практике оказалось, что Opera 5.x ни в какую не хочет окрашивать горизонтальный разделитель ни через свойство color, ни через background:

hr {
background:#CCCCCC;
color:#CCCCCC;
height:1px
}

Из всего вышеприведённого Opera правильно понимает только height:1px.

Но недавно мне подсказали, как заставить Opera 5.12 и выше окрасить-таки hr в нужный цвет. Делается это добавлением свойства border-top:

hr {
background:#CCCCCC;
border-top:1px solid #CCCCCC;
color:#CCCCCC;
height:1px
}

Полученный стиль правильно работает в Internet Explorer 4+, Netscape Navigator 6+, Opera 5.12 и выше. Совсем старым браузерам, разумеется, плевать на стилевое определение тега hr.

Ну ладно, с CSS похоже разобрались. Поскольку же эта заметка помещена в раздел «HTML», то я хочу привести несколько альтернативных вариантов задания разделителей. Работают они в более широком диапазоне браузеров.

Условие задачи: с помощью одного только HTML смастерить горизонтальный разделитель, который бы занимал 100% ширины окна, высота разделителя должна быть 1 пиксель, цвет — серый (#CCCCCC).

1й вариант решения:

<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#CCCCCC" height="1" nowrap="nowrap"><spacer type="block" height="1" /></td></tr></table>

2й вариант решения (в NN6 высота разделителя получается 2 px, а не 1):

<table width="100%" cellspacing="1" cellpadding="0" border="0"><tr><td bgcolor="#CCCCCC"><table cellspacing="0" cellpadding="0" border="0"><tr><td></td></tr></table></td></tr></table>

3й вариант решения:

<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td bgcolor="#CCCCCC"><img src="/img/null.gif" width="1" height="1" alt="" /></td></tr></table>