Logo    
Шквал(!) новостей на CitCity.ru Океан(!) софта на CITKIT.ru Форумы Поступления в библиотеку Учебный центр Курилка
CitForum    CITForum на CD Море(!) аналитической информации! :: CITFORUM.RU
IT-консалтинг Software Engineering Программирование Open Source СУБД Безопасность Internet Сети Операционные системы Hardware

23.01.2006

Google
WWW CITForum.ru

Новости мира IT:

Все новости на CitCity.ru

На правах рекламы
2000 г

Как оформить таблицу?

Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"

Давайте-ка займемся сегодня оформлением таблиц. Вам наверняка не нравится, как оформлены таблицы по умолчанию. То, что называется рамкой, практически никогда не вписывается дизайн. А их псевдотрехмерность просто ужасна!

Для изменения вида таблицы мы можем воспользоваться некоторыми параметрами, управляющими ее внешним видом:

  • bgcolor - цвет фона в таблице или ячейке;
  • border - толщина рамки таблицы;
  • cellspaсing - расстояние между ячейками;
  • cellpadding - расстояния от рамки до содержимого ячейки.

Обычная таблица

Начнем с обычной таблицы. Как видите, даже устанавливая атрибут border равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит из-за того, что при отрисовке таблицы используются псевдотрехмерные границы и реальная толщина рамки всегда больше указанной. В дополнение к цвету, которым нарисована таблица, используются еще два: цвет тени и цвет подсветки. В IE имеются атрибуты borderColor, borderColorDark и borderColorLight, которые позволяют контролировать три этих цвета. Установив borderColorDark и borderColorLight равными цвету фона, мы можем добиться толщины рамки в один пиксель, но ведь это будет работать только в IE - а значит, нам не подходит.

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

Таблица с тонкой рамкой

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

<table width="368" cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
</tr>
. . .
. . .
. . .
</table>
</td></tr></table>
       
       
       
       

Таблица с толстой рамкой

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

<table width="368" cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
</tr>
. . .
. . .
. . .
</table>
</td></tr></table>
       
       
       
       

Таблица с фоновой подсветкой ячеек

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

<table width=368 cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr>
<td bgcolor="#e0e0e0">&nbsp;</td>
<td bgcolor="#e0e0e0">&nbsp;</td>
<td bgcolor="#e0e0e0">& </td>
<td bgcolor="#e0e0e0">& </td>
</tr>
<tr>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
</tr>
. . .
. . .
. . .
</table>
</td></tr></table>
       
       
       
       

Таблица с горизонтальными линиями

А теперь попробуем сделать табличку, содержащую только горизонтальные разделительные линии. Предыдущий способ со вложенными таблицами не подойдет, т.к. при вложенных таблицах мы всегда получаем и горизонтальные и вертикальные линии рамки. При помощи CSS или атрибута frame в IE4 мы можем получить желаемое. Но ведь мы хотим, чтобы все гляделось еще и в Netscape, причем, желательно, начиная с третьих версий броузеров.

Выход заключается в том, чтобы в качестве горизонтальной разделительной линии использовать ячейку самой таблицы. Для этого мы воспользуемся атрибутом colspan, чтобы линия была по ширине всей таблицы, прозрачный пиксель для фиксации высоты ячейки в один пиксель и закрасим ячейку цветом разделительной линии. Все! Осталось только разместить данную конструкция между ячейками с данными.

<table width="368" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="4" bgcolor="#000000"><img src="1x1.gif"
width="1" height="1" border="0"></td></tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
. . .
. . .
. . .
<tr><td colspan="4" bgcolor="#000000"><img src="1x1.gif"
width="1" height="1" border="0"></td></tr>
</table>
1-1 1-2 1-3 1-4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4
4-1 4-2 4-3 4-4

Таблица без рамки

А можно сделать таблицу и вовсе без рамки. Для этого не нужно использовать ни вложенных таблиц, ни других трюков. Достаточно просто обнулить атрибут border и установить cellspacing равным желаемому просвету между ячейками. Теперь нужно закрасить все ячейки в желаемый цвет и - пожалуйста:

<table width="368" cellpadding="0" cellspacing="1" border="0">
<tr>
<td bgcolor="#e0e0e0">1-1</td>
<td bgcolor="#e0e0e0">1-2</td>
<td bgcolor="#e0e0e0">1-3</td>
<td bgcolor="#e0e0e0">1-4</td>
</tr>
. . .
. . .
. . .
</table>
 1-1  1-2  1-3  1-4
 2-1  2-2  2-3  2-4
 3-1  3-2  3-3  3-4
 4-1  4-2  4-3  4-4

Как видите, мы можем достаточно сильно менять внешний вид таблицы при помощи стандартных средств HTML 3.2. Варьируя толщину рамки, ее цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное - экспериментировать и тогда можно придумать совсем уж экзотические варианты.

Назад | Содержание | Вперед

 

 

Подписка на новости IT-портала CITForum.ru
(библиотека, CITKIT.ru, CitCity)

Самое интересное в деловой газете CitCity:

  • Мегатренды BI
  • Будущее СОА
  • Когда, как, что и зачем стоит интегрировать?

    Новые поступления в on-line библиотеку:

    19 января

  • Быстрые методы для объектных баз данных
  • Будущее Web - за семантикой
  • Управление данными XML: подходы к определению документов XML
  • Выбор и настройка Wi-Fi оборудования в домашних условиях

    12 января

  • Ссылочная целостность является важной для баз данных
  • Дилемма инкапсуляции и оптимизации запросов
  • Битва со списками или применение классов для вывода списков в PHP
  • Тестирование ATX-корпусов

    22 декабря

  • Управление данными XML: подходы к определению документов XML
  • Разъемы для оптики

    20 декабря

  • USB: вчера, сегодня и завтра
  • Программирование для системного реестра на С++

    15 декабря

    Обновлена книга Ю.А.Семенова "Телекоммуникационные технологии"
    Новые разделы:

  • Bluetooth
  • Адаптивные, кольцевые, высокоскоростные сети IEEE 802.17
  • Проект Internet2
  • Обзор некоторых видов сетевых атак
    Также внесены изменения во многие другие главы.

    13 декабря

  • Windows и Linux: что безопаснее?
  • Распределенные вычисления на FreePascal под Windows

    8 декабря

  • Введение в POSIX'ивизм
    А.Федорчук

    1 декабря

  • Oracle Application Server 10g Release 2. Краткий обзор новых характеристик
  • Защита информации и беспроводные сети
  • Технология "тонкий клиент" как инструмент повышения эффективности инвестиций в ИТ-инфраструктуру
  • Macromedia Flash. Модели микросхем.

    29 ноября

  • К вопросу защиты карточек пополнения счета мобильных операторов связи
  • Бои не в своей весовой категории (о системах, состоящих из 8 процессоров Opteron)
  • VDSL2 - "удлинитель оптики"
  • Медиасервер - закрома цифрового дома
  • HTPC: сердце цифрового дома

    24 ноября

  • Будущее за большими и сильными
    Интервью Сергея Кузнецова с Вадимом Розенбергом (корпорация Oracle)
  • Первый взгляд на Windows Vista
  • Стохастические генераторы псевдослучайных последовательностей. Глава из книги "Теория, применение и оценка качества генераторов псевдослучайных последовательностей"
  • Wi-Fi для офисного ПК
  • i-mode: все дело в контенте
  • Корпоративное планирование: взгляд в будущее
  • Как улучшить планирование с помощью современных приложений

    22 ноября

  • Система управления безопасностью: простые рецепты
  • Безопасность СУБД
  • Оптические системы хранения: а где прогресс?
  • Передача данных: второй или третий уровень?
  • Медиацентр своими руками (о barebone-системах)
  • 147 Гбайт: последний оплот Ultra 320 SCSI

    17 ноября

  • Контекстное меню для Netscape Navigator и Internet Explorer
  • Сортировка таблицы средствами JavaScript
  • Стоит ли отменять пространства имен XML?
  • Как добиться, чтобы внедренные системы СРМ и BI реально работали
  • Управление метаданными в корпорации
  • Архитектура MP3-плееров

    15 ноября

  • Технологии коммутации в сетях хранения данных
  • Корпоративные СХД в примерах, или Идеи напрокат
  • Виртуализация хранения данных на базе IP
  • Данные в сеть - продажи в гору

    В разделе Open Source:

  • Мобильная жизнь вне Windows (об особенностях установки и использования Linux на современных ноутбуках)
  • KDE: гений чистой красоты
  • Открытые средства коллективной работы

    10 ноября

  • Технология COM+ (Microsoft Transaction Server)
  • Промышленная автоматизация: движение от САПР к PLM
  • Уже не Wi-Fi, но еще не WiMAX
  • BPL: свет и Интернет - из одной розетки
  • X-Fi: имеющий уши да услышит
  • Точность - вежливость серверов

    8 ноября

  • Проблемы безопасности в беспроводных сетях
  • IPSec: панацея или вынужденная мера?
  • Защита информации в сети доступа
  • Рекомендации и выбор вида шифра для применения в сети доступа
  • Первая и последняя линии обороны

    1 ноября

  • Выбор пути доступа в реляционной системе управления базами данных
  • Оптимизация запросов в системах баз данных
  • Девять мифов о незащищенности ip-телефонии

    Архив новостей >>>



  • IT-консалтинг Software Engineering Программирование Open Source СУБД Безопасность Internet Сети Операционные системы Hardware

    Информация для рекламодателей PR-акции, размещение рекламы - pr@citforum.ru, тел. +7 495 4119920 Пресс-релизы - manager@citforum.ru
    Послать комментарий
    Информация для авторов
    Rambler's Top100 TopList liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня This Web server launched on February 24, 1997
    Copyright © 1997-2000 CIT, © 2001-2005 CIT Forum
    Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...