Все дискуссии о использовании таблиц в веб дизайне заканчиваются одним выводом: если вы имеете дело с выводом табулированных данных, то лучшим инструментом для их представления будут таблицы.
Разработка дизайна таблицы всегда является вызовом. От внешнего вида будет зависеть легкость восприятия информации, представленной в таблице. Пользователь может легко потеряться в больших наборах цифр и символов, если таблицу сложно просканировать взглядом.
В данном уроке мы представим практичный стиль для таблиц с использованием 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;
}