На главную

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

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » HTML/DHTML

Декор таблиц.

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

P-100/32/6,4/4SVGA/15" $300 Со склада

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

P-100/32/6,4/4SVGA/15" $300 Со склада
 

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

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

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

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

<TABLE BORDER="#" BGCOLOR="#DEE2EB"
CELLPADDING="#" CELLSPACING="#">

Где 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.

Модель
Цена
Срок доставки
P-200MMX/64/6,4/4-SVGA-LAGUNA/17"
$450
со склада
HPSJ6200/USB-SCSI/35mm.slide-module
$440
неделя

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

Модель
Цена
Срок доставки
P-200MMX/64/6,4/4-SVGA-LAGUNA/17"
$450
со склада
HPSJ6200/USB-SCSI/35mm.slide-module
$440
неделя

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

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

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

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

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

Виктор Вязьминов
MrDeSign

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100