Библиотека Интернет Индустрии I2R.ru

Насколько важен этот вопрос? Если ваша задача - просто разместить информацию на страничке, в том числе и в табличном варианте, то самая обыкновенная таблица со стандартными бордерами устроит и вас, и вашего зрителя.

Это вполне нормальное оформление информации, и во многих случаях его вполне достаточно. И совершенно минимальными средствами. Но если вы решитесь раскрасить даже подобный простенький вариант, то убедитесь, что это совсем не просто по причине разных трактовок свойств таблиц даже самыми распространенными броузерами. Даже более того, если IE показывает ячейки во всей их красе, то NN просто игнорирует пустые ячейки. (При анализе данных свойств таблиц я пользуюсь NN4 и IE4. В билды броузеров вникать вовсе не хочется)

На таком уровне оформления таблицы все бо-ме успешно. Но попробуйте убрать бордер и обозначить цвет таблицы. Скажу сразу, что прямо с этого момента вы должны контролировать свою работу обоими броузерами, если хотите добиться адекватного отображения информации. Я буду пользоваться картинками-скриншотиками для избежания путаницы как таковой вообще...

Чувствуете разницу? Вернее, чем это вам может угрожать... В чем же эта самая разница?

Декоративные свойства таблицы.

Декоративные свойства таблицы описываются параметрами

Где BORDER="#" - эта самая объемная рамочка вокруг таблицы,
BGCOLOR="#DEE2EB" - общий цвет фона таблицы,
CELLPADDING="#" - отступ между текстом внутри ячейки и границей самой ячейки,
CELLSPACING="#" - расстояние в пикселах между ячейками таблицы.

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

Искомая нами разница в том, что NN все декоративные свойства таблицы передает на свойства ячейки. Поэтому в первом примере видны ячейки (NN), и общий ровный фон (IE).

Декоративные свойства ячейки.

Тут тоже есть возможности, о реальном применении которых речь ниже.

<TD BGCOLOR="#990000" BORDERCOLOR="#0000CC">

В варианте работы с ячейками NN тоже имеет небольшие особенности. NN3 игнорирует ячейку, в которой отсутствует информация. Для избежания нарушения общего вида таблицы приходится вставлять в ячейку "рыбу", то есть ничего не значащую информацию под цвет фона ячейки. Это может быть символ, или пиксел empty.gif (1х1 прозрачный), да мало ли что можно туда воткнуть незаментно для глаза (но заметное для NN3).

Ну а теперь старые песни о главном

Как красиво оформить таблицу... Разумеется, понятие красоты в данном случае крепко привязано к визуальному стилю страницы. Но общие принципы таки есть.

Ну, во-первых, рамочки. Для IE это просто - задал цвет таблицы (в данном случае это и будет цвет рамочки), обозначил цвет ячеек - и все. Но в NN рамочка исчезнет. Есть очень простой способ - вложенные таблицы.

Создаем таблицу с параметрами

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
< TR BGCOLOR="#000000">
< TD>
  </TD>
< /TR>
< /TABLE >

И в нее (между тегами < TD>  </TD>) вкладываем нужную нам таблицу с заданными параметрами, но обязательно BORDER="0" CELLSPACING="1". Это и будет таблица с симпатичной черной рамочкой между ячейками, одинаковая и в IE, и в NN.

Если вы цвет рамочки сделаете не черным, а близким к цвету ячеек, но достаточно плотным по тону, то сможете еще больше акцентировать внимание на тексте при благополучном внешнем виде.

Во-вторых, цветовое решение таблицы. Основным ляпом здесь бывает либо дисгаромния цвета, либо резкие тона ячеек таблицы (либо то и другое в совместном варианте). Лекарством от этого может служить применение в таблицах в качестве фона одного цвета с небольшими тональными различиями.

Такие внешние приемы можно использовать при определении цвета для таблицы в фотошоповской палитре.

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

О декоре элементов таблицы пиксельными изображениями.

Тут опять же NN весьма своеобразно трактует поставленные перед ней задачи. Картинку, подгруженную как БГ в ячейку (Cell) она показывает должным образом, а вот если вы выполните то же самое в отношении всей таблицы - NN покажет ее как отдельное изображение в каждой ячейке. Загруженное в ячейку - покажет в ячейке. Так же прикольно ведет себя IE. Изображение на всю таблицу он так и показывает - на всю таблицу. А на ячейку он вообще чихал (всмысле не показывает картинку в ячейке...). Зато цвет ячейки кладет поверх картинки БГ в таблице (чего NN не делает). В общем есть над чем поломать голову при решении творческих задач.