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

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

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

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

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

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

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

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

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

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


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

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

Code
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 кода:

Code
.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 для организации эффекта наведения курсора:

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


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

Code
.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:

Code
.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 не поддерживается в старых браузерах. А вот как можно выбрать и поменять стиль для нужных строк во всех всех браузерах:

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


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

Code
.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;
}


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

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


  • FalleN

  • 1646

  • 1

  • 218

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!