—»     —»   Колонки и ячейки таблицы в виде «зебры»
  Раздел: Tips and Tricks, CSS/Style Sheets   Комментариев: 1  

Колонки и ячейки таблицы в виде «зебры»



Колонки и ячейки таблицы в виде «зебры»

Конечно же, здесь ничего нового нет. Данный метод проделывался тысячи раз. Такой вид ячеек (как бы) помогает легче различать нужную полосу информации, так как полоски разделены различными цветами. Мы пишем «как бы», так как некая Джессика Эндерс (Jessica Enders) провела специальные исследования и выяснила, что данный метод не сильно помогает.

Вряд ли можно придумать что-нибудь легче, нежели просто сделать таблицу полосатой. На программном уровне вы можете задать определенный класс каждой четной или нечетной строке «tr» (зачастую это более темный или светлый фон ячейки) и, таким образом, получить «зебру». Еще есть другой метод: можно просто добавить сторонний класс и использовать селектор nth-of-type, т.е.:

tbody tr:nth-of-type(odd){
  background:rgba(255,255,136,0.5); /* Pale yellow with 50% opacity */
}

Селектор nth-of-type здесь следит за каждым нечётным «tr» в «tbody», т.е. 1. 3, 5, 7 и так далее.

Понимая это, мы можем добавить логику для создания колонок в виде зебры. Т.е:

tbody td:nth-of-type(odd),
thead th:nth-of-type(odd){
  background:rgba(255,255,136,0.5);
}

Мы также можем скомбинировать эти методы для создания таблицы, где каждая ячейка и колонка закрашиваются одновременно, а затем используя функцию параметра цвета rgba(), мы можем закрашивать ячейки так, чтобы отобразить, где они пересекаются. Вот код для простого комбинирования методов:

tbody td:nth-of-type(odd),
tbody tr:nth-of-type(odd),
thead th:nth-of-type(odd){
  background:rgba(255,255,136,0.5);
}

Хотите посмотреть демо?

Вдобавок

Селекторы, вовлеченные в этот метод, поддерживаются только в тех браузерах, в которых есть поддержка CSS3, так что мы даже и не знаем, что вам сказать насчет IE. Тем не менее, учитывая преимущества зебровидных таблиц, вряд ли стоит заботиться о кросс-браузерной поддержке. Исследования показывают, что таблицы без зебры также эффективны, как и с ней.

Конечно же, если вам хочется, чтобы все это работало в IE, вы всегда можете вернуться к программному методу добавления класса odd к четным или нечетным элементам «th», «tr» и «td».
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 7830   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 15 февраля 2011 @ 03:25
Написал: guest — группа: Читатели  
На сайте с: 7.02.2011   |   Публикаций: 0   |   Комментариев: 52
ICQ: --- не указано ---
А как сие на дивах реализовать?


--------------------
А знаете ли Вы, что что 90% людей не замечают в этом тексте повторение слова «что» в самом начале.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930