Практика использования CSS3 для оформления таблиц

Все дискуссии о использовании таблиц в веб дизайне заканчиваются одним выводом: если вы имеете дело с выводом табулированных данных, то лучшим инструментом для их представления будут таблицы.

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

В данном уроке мы представим практичный стиль для таблиц с использованием CSS3. А jQuery будет использоваться для обеспечения обратной совместимости со старыми браузерами.

И что хорошее есть  в данном оформлении?

В данном уроке вы увидите, как можно сочетать CSS3 и таблицы для получения отличного результата:

  • скругленные углы без использования изображений;
  • очень простое обновление данных - никаких дополнительных идентификаторов или классов;
  • отлично читается и просматривается.

 

Скругленные углы таблицы

Здесь используется трюк: по умолчанию свойство border-collapse имеет значение separate, также нужно установить для свойства border-spacing значение 0.

table {
    *border-collapse: collapse; /* Для IE7 и страше */
    border-spacing: 0;
}

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

Затем нужно установить скругление углов:

th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

 

Обратная совместимость с помощью jQuery

Наверняка вы знаете, что в IE6 :hover работает только для элементов ссылок.

Поэтому вместо CSS кода:

.bordered tr:hover
{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

нужно использовать обходное решение на jQuery для организации эффекта наведения курсора:

$('.bordered tr').mouseover(function(){
    $(this).addClass('highlight');
}).mouseout(function(){
    $(this).removeClass('highlight');
});

Также нужно определить класс CSS highlight, который используется в JavaScript коде:

.highlight
{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

 

Эффект зебры

Для создания эффекта зебры используется CSS3 для выделения четных строк в элементе tbody:

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Но выше приведенный селектор CSS3 не поддерживается в старых браузерах. А вот как можно выбрать и поменять стиль для нужных строк во всех всех браузерах:

$(".zebra tr:even").addClass('alternate');

Одна строчка кода jQuery. Потребуется также класс для замены:

.alternate {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

 

Поддержка браузерами

Если вы будете использовать приведенные выше обходные решения, то таблица будет выглядеть привлекательно и в старых браузерах:

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/t4k-EdQC2ls/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Практика использования CSS3 для оформления таблиц | | 2012-06-19 12:01:25 | | Статьи Web-мастеру | | Все дискуссии о использовании таблиц в веб дизайне заканчиваются одним выводом: если вы имеете дело с выводом табулированных данных, то лучшим инструментом для их представления будут таблицы | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: