Все дискуссии о использовании таблиц в веб дизайне заканчиваются одним выводом: если вы имеете дело с выводом табулированных данных, то лучшим инструментом для их представления будут таблицы. Разработка дизайна таблицы всегда является вызовом. От внешнего вида будет зависеть легкость восприятия информации, представленной в таблице. Пользователь может легко потеряться в больших наборах цифр и символов, если таблицу сложно просканировать взглядом. В данном уроке мы представим практичный стиль для таблиц с использованием CSS3. А jQuery будет использоваться для обеспечения обратной совместимости со старыми браузерами. Оформление таблицы с использованием CSS3 И что хорошее есть в данном оформлении? В данном уроке вы увидите, как можно сочетать CSS3 и таблицы для получения отличного результата: скругленные углы без использования изображений; очень простое обновление данных - никаких дополнительных идентификаторов или классов; отлично читается и просматривается. Скругленные углы таблицы Здесь используется трюк: по умолчанию свойство border-collapse имеет значение separate, также нужно установить для свойства border-spacing значение 0. 1 table { 2 *border-collapse: collapse; /* Для IE7 и страше */ 3 border-spacing: 0; 4 } Для IE7 и старше нужно добавить специальную строку, чтобы обеспечить обратную совместимость для вывода таблицы. Затем нужно установить скругление углов: 01 th:first-child { 02 -moz-border-radius: 6px 0 0 0; 03 -webkit-border-radius: 6px 0 0 0; 04 border-radius: 6px 0 0 0; 05 } 06 07 th:last-child { 08 -moz-border-radius: 0 6px 0 0; 09 -webkit-border-radius: 0 6px 0 0; 10 border-radius: 0 6px 0 0; 11 } Обратная совместимость с помощью jQuery Наверняка вы знаете, что в IE6 :hover работает только для элементов ссылок. Поэтому вместо CSS кода: 1 .bordered tr:hover 2 { 3 background: #fbf8e9; 4 -o-transition: all 0.1s ease-in-out; 5 -webkit-transition: all 0.1s ease-in-out; 6 -moz-transition: all 0.1s ease-in-out; 7 -ms-transition: all 0.1s ease-in-out; 8 transition: all 0.1s ease-in-out; 9 } нужно использовать обходное решение на jQuery для организации эффекта наведения курсора: 1 $('.bordered tr').mouseover(function(){ 2 $(this).addClass('highlight'); 3 }).mouseout(function(){ 4 $(this).removeClass('highlight'); 5 }); Также нужно определить класс CSS highlight, который используется в JavaScript коде: 1 .highlight 2 { 3 background: #fbf8e9; 4 -o-transition: all 0.1s ease-in-out; 5 -webkit-transition: all 0.1s ease-in-out; 6 -moz-transition: all 0.1s ease-in-out; 7 -ms-transition: all 0.1s ease-in-out; 8 transition: all 0.1s ease-in-out; 9 } Эффект зебры Для создания эффекта зебры используется CSS3 для выделения четных строк в элементе tbody: 1 .zebra tbody tr:nth-child(even) { 2 background: #f5f5f5; 3 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 4 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; 5 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 6 } Но выше приведенный селектор CSS3 не поддерживается в старых браузерах. А вот как можно выбрать и поменять стиль для нужных строк во всех всех браузерах: 1 $(".zebra tr:even").addClass('alternate'); Одна строчка кода jQuery. Потребуется также класс для замены: 1 .alternate { 2 background: #f5f5f5; 3 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 4 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; 5 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 6 } Поддержка браузерами Если вы будете использовать приведенные выше обходные решения, то таблица будет выглядеть привлекательно и в старых браузерах: Сравнение внешнего вида в разных браузерах