Zebra striping-or, coloring or shading alternate rows on a table-is thought to enhance the usability of a table by guiding the user’s eye along a row. This method has been used in print for years, and many designers try to emulate this technique when making tables for the Web. CSS has made achieving zebra striping easier, but, up until CSS3, it still involved a bit of cumbersome coding.
With the advent of CSS3’s nth-child selector, we are able to target multiple elements in a document by creating a "counter" that skips over specified children in the document tree. This allows us, specifically, to style only the odd or even rows of a table. This article details how to use nth-child successfully.
The bad old days ...Before we begin covering how to use this new selector, let’s review the old way of doing things. First, we would have to add a class attribute to every other table row:
| Salmon | Omega-3"s help the brain develop properly, reduce the risk of Alzheimer"s, and help prevent heart disease. |
| Spinach | Great source of folate and lutein. Prevents birth defects, heart disease, stroke, and protects your skin from sun damage. |
| Sweet Potatoes | Beta carotene protects your skin from sun damage. |
Luckily, our table is fairly small, so this doesn’t require too much work. But you could imagine how tedious this process would be if our table was dozens of rows long! We would then add a CSS rule that targeted those rows:
Tr.odd { background-color: #99ff99; }
While this method works, it’s a bit inefficient in that it requires extra markup in the HTML document. This markup, in turn, doesn’t really add anything semantically valuable: The odd rows don’t serve a different function than the even rows; we just want them to look different. Hence, we haven’t kept the structure separate from the presentation. Not to mention that coding a large table this way can be a frustrating task.
Introducing the nth-childCSS3, however, includes selectors that let us keep our hands out of the markup and use just CSS to pick out the rows we want to style. The relevant selector-the nth-child selector-is a bit complicated, so let’s take a moment to understand how it works.
The nth-child selector targets elements in a document tree that have a certain number of siblings before it. Where n is an integer, :nth-child(an+b) would match the element that has an+b-1 siblings before it.
What does this mean?
That n is basically a counter: it begins with zero, then it moves up incrementally until it runs out of children elements. Then the b variable represents the counter’s starting place-in other words, the position of first element we begin counting from. Finally, the a variable represents the positions of the elements we match after that.
To clear things up a bit, let’s break down an example:
:nth-child(5 n+2 )
In our hypothetical example above, the b variable is set as two, which means that the first element targeted is the second child beneath the parent in the document tree, the second paragraph within the body, or the second item within a list.
Also in the example above, the a variable is set to five, which means that every fifth child after that is also to be targeted. Now that we’ve defined both a and b variables, we can determine which child elements are going to be styled. By plugging in the starting value of zero and counting till we run out of child elements, we can determine which child elements get styled.
In this example as shown in Table 1, you can see that the second child element is matched, then the seventh, then the twelfth, and so on, until we’ve run out of elements.
| n/a | n/a | |
| Y | ||
| Y | Y | |
| Y | ||
| Y | ||
| Y | Y | |
| Y | ||
| Y | Y | |
| Y | ||
| Y | ||
| Y | Y | |
| Y | ||
| Y | Y |
Table 1. Demonstrating which child element is selected
Calculating zebra stripesHow does this selector help us with zebra striping? Note that this formula allows for some quite complicated configurations-making it very versatile. To target only odd or even elements, however, we need only remember two kinds of selectors.
To target all even rows as shown in Table 2, we can use the following selector:
Tr:nth-child(2n)
| n/a | n/a |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
Table 2. Demonstrating that only even-numbered of rows are selected
To target all odd rows, we would compose the following selector:
Tr:nth-child(2n+1)
This selector matches the first row within a table, and every second row after that-all of the odd rows as shown in Table 3.
| n/a | n/a | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y |
Table 3. Demonstrating that only odd-numbered of rows are selected
Illustrating zebra stripingFigure 1 shows a table listing various "superfoods" and their nutritional virtues as a demonstration of zebra striping.
Figure 1: The HTML table
In this demonstration, we want to color the background of the odd rows so that the table is easier to read. The declaration block is written as such:
Tr:nth-child(2n+1) { background-color: #99ff99; }
This rule matches all of the odd rows, and applies the background color only to that row as shown in Figure 2.
Figure 2: Only the even-numbered rows are styled
If these formulas are too complicated for you to remember, the nth-child property allows the math-challenged to use keyword shortcuts. Instead of a mathematical formula, we can also use the "odd" or "even" keywords as a value:
Tr:nth-child(odd ) { background-color: #99ff99; }
CSS3 provides us with a hassle-free technique for zebra-striping our tables, list items or forms, and so on.
Unfortunately, the nth-child selector enjoys limited browser support. As of this writing, the nth-child selector works in Safari 3 and Opera 9.5. Sadly, you may want to stick to the more inefficient CSS coding method until support for the property is brought up to speed in other browsers. Or, if you want to support other browsers like Internet Explorer with easy method of zebra striping, you can "patch" up nth-child support in those browsers. By using a JavaScript framework like jQuery , you can deliver a JavaScript-enabled solution through to just IE while the other browsers use the CSS rules to style the page.
Superfoods table live exampleIf you have a browser that supports nth-child , this linked HTML table will appear to be zebra-striped . The CSS is inserted in the head on this page so you can view source to easily check out what is going on.
Бывает, что часть контента на нашем сайте нужно оформить в виде таблицы, которая будет содержать определенную информацию. Как в таком случае лучше всего стилизовать эту таблицу? Думаю, довольно часто Вам встречались таблицы в виде «зебры». Это те таблицы, у которых строки через одну окрашены в определенный цвет. Плюсом таких таблиц является их читабельность. Сегодня я расскажу Вам, как достаточно просто можно стилизовать таблицу таким образом при помощи псевдоклассов.
1. Первым делом нам нужно создать html-файл и в нем ту самую таблицу, которую мы будем стилизовать. Давайте этим и займемся.
Я создам html5 документ, сразу подключу к нему таблицу стилей, которую мы создадим в следующем шаге и создам в теле документа таблицу.
Untitled Document
Вот так сейчас будет выглядеть наша таблица, если мы откроем html файл в браузере:
2. Теперь самое время создать файл таблицы стилей «style.css» и начать стилизовать нашу таблицу.
Создайте этот файл и сохраните его в том же каталоге, что и html файл. Если будете сохранять в другом каталоге, то не забудьте исправить путь к файлу при его подключении в html.
Стилизуем таблицу-зебруДля стилизации мы будем пользоваться псевдоклассом «:nth-child».
Самым простым способом стилизовать четные и нечетные строки в таблице является использование ключевых слов «odd» (нечетные элементы из набора) и «even» (четные элементы из набора).
Делается это очень просто. В Вашем файле таблицы стилей пропишите следующее:
tr:nth-child(odd) {background-color:#CCC;} tr:nth-child(even) {background-color:#FFC;}
Фоновый цвет Вы можете выбрать любой. Кроме фонового цвета Вы можете задавать и другие правила, например, толщину шрифта, его тип и т. д.
В итоге, если Вы обновите страницу в браузере, то увидите следующее:
Как Вы можете видеть, все нечетные строки окрасились в серый цвет, а все четные в светло-желтый.
3. Но это лишь один из самых простых способов использования псевдокласса «:nth-child».
На самом же деле, с его помощью мы можем выбирать элементы одной группы самыми разнообразными способами.
Что, например, если я захочу, помимо всего прочего, закрасить все строки первой и последней ячеек в определенный цвет, но при этом мои две ячейки посередине должны так и остаться в виде «зебры».
Это сделать также достаточно просто.
Первым делом мне нужно выбрать элемент ячейки, далее применить к нему псевдокласс с соответствующими параметрами в скобках.
Вот таким образом:
tr td:nth-child(3n+1){background-color:#069;}
Давайте поясним этот код.
«3n» обозначает, что мы выбираем каждый третий ряд. А «+1» обозначает, что выборка будет начинаться с первого ряда. Таким образом будет выбран самый первый ряд и третий после него.
В нашем случае, у нас в таблице имеется только 4 ряда, поэтому в синий цвет окрасятся как раз первый и последний ряды.
Если бы в нашей таблице было бы больше рядов, то в выборку попали бы первый ряд и далее каждый третий.
Если бы мы прописали тот же самый код, но без «+1»:
tr td:nth-child(3n){background-color:#069;}
Тогда выборка была бы совсем другой. У нас бы просто выбирался каждый третий ряд и результат был бы вот таким:
Думаю, что теперь такой принцип выборки при помощи псевдокласса «:nth-child» стал для Вас более понятен.
Вы можете менять параметры в скобках и, таким образом, выбирать элементы так, как Вам нужно. Здесь нужно только немного практики.
Однако, этот способ достаточно удобен, так как Вам не нужно присваивать классы каждой строке или столбцу в таблице.
Так что практикуйте и пользуйтесь на здоровье!
На этом у меня сегодня все.
Жду Ваших отзывов! Не забывайте делиться уроком с друзьями при помощи кнопок социальных сетей, которые Вы найдете ниже.
Подписывайтесь на обновление блога и будьте в курсе самых интересных и полезных статей и уроков!
С Вами была Анна Котельникова.
Успехов и до новых встреч!
Таблица-зебра – это такая таблица, в которой после каждой строчки изменяется цвет фона строки. То есть, к примеру, белый-черный-белый-черный… Это то и сделаем, используя лишь CSS .
Для создания “зебры” в таблице, можно воспользоваться JS . Но, такой метод будет довольно хлопотный. Можно создать “зебру” вручную, то есть ручками добавлять классы к тегу
Данный псевдокласс было создан для добавления свойств тегу, идущему под определенным номером. Можно задать, что бы свойства задавались лишь четным или нечетным тегам. В основном данный псевдокласс можно применить именно то что в таблицах. Правила написания:nth-child:
Селектор:nth-child(значение) { ... }
Значениями могут быть:
odd
– нечетные числа (1, 3, 5, 7 …).
even
– четные числа (2, 4, 5, 6 …).
число
– любое число от одного.
Но у данного метода есть минус: он не поддерживается в старых браузерах.
И, что бы создать стиль “зебры” в таблице, нужно сделать следующие:
HTML| 1 | Китай | 1 338 613,0 |
| 2 | Индия | 1 166 079,2 |
| 3 | США | 307 212.1 |
| 4 | Индонезия | 240 271.5 |
| 5 | Бразилия | 198 739.3 |
Этим мы задали, что если тег
Table, tr, td, th { color:#969799; /* Цвет текста */ font:13pt Andale Mono, monospace; /* Размер, тип шрфита */ border:1px solid #E9E9E9; /* Обводка */ border-collapse:collapse; /* Убираем двойную обводку между ячейками */ } td, th { padding:5px; /* Внутренний отступ */ } th { font-weight:bold; background-color:#E5E5E5; /* Цвет фона */ }
Если бы я всегда придерживался принципа разумной достаточности, вы бы сейчас не читали эти строки. Это я к тому, что, хотя предложенная тема достаточно хорошо раскрыта, и существующие решения меня вполне удовлетворяют, все же они не смогли привести меня в состояние полного душевного спокойствия… в общем, я принялся изобретать велосипед.
Речь пойдет о «полосатых» HTML-таблицах, т.е. о таблицах с чередующимися строками разных стилей. В частности, для улучшения восприятия данных, эти строки могут быть разноцветными. Ниже пример такой таблицы:
Я поставил себе следующую задачу: не изменяя HTML-файл:
| Ланцетники | 30 видов | Хордовый скелет |
| Хрящевые рыбы | 600 видов | Хрящевый скелет |
| Костные рыбы | 20 000 видов | Костный скелет |
| Земноводные | 3 000 видов | Ажурный скелет |
| Пресмыкающиеся | 6 000 видов | Сплошной скелет |
| Птицы | 8 000 видов | Сплошной скелет |
| Млекопитающие | 4 000 видов | Сплошной скелет |
В сети по запросу «полосатые таблицы» или «таблица зебра» ("striped tables", "zebra tables"), легко обнаружить нужные материалы по теме. Как правило, предлагаемые решения - различные вариации одной идеи: используя JavaScript и DOM, находим в HTML-документе требуемые таблицы (класс stripy) и добавляем необходимые классы (к примеру, oddrows и evenrows) их строкам, в зависимости от того, четная это строка или нет. Это может быть реализовано таким образом:
< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) // строки нумеруются с 0 rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); } }
Привязав вызов данной функции к событию onload страницы, мы добьемся нужного результата.
Пожалуй, на сегодняшний день это оптимальное решение, однако оно не оставляет HTML-код нетронутым. Мне же было интересно решить проблему исключительно средствами CSS, или, по крайней мере, возложить на CSS задачу по изысканию этих средств.
Идеальное решениеМожно ли решить задачу «чистым» CSS? Можно, если браузер поддерживает CSS3. Изучив спецификации, мы находим там новый псевдо-класс :nth-child() , несомненно появившийся под влиянием сабжа, и благодаря которому необходимые стили задаются очень просто:
/* нечетная строка таблицы класса stripy */ .stripy tr:nth-child(2n+1){ ... } /* четная строка таблицы класса stripy */ .stripy tr:nth-child(2n){ ... }Увы, современные браузеры в абсолютном большинстве пока не поддерживают это. А что же CSS2? Здесь, к сожалению, подходящих инструментов совсем немного. Частично решить проблему можно с помощью селектора :
Stripy tr { ... } /* 1-я строка */ .stripy tr + tr { ... } /* 2-я строка */ .stripy tr + tr + tr { ... } /* 3-я строка */ .stripy tr + tr + tr + tr { ... } /* 4-я строка */ .stripy tr + tr + tr + tr + tr { ... } /* 5-я строка */
однако данный метод подходит только для таблиц с относительно небольшим и заранее известным числом строк, кроме того, его никак нельзя назвать удобным. Что же остается? Остается использовать дополнительные возможности каждого отдельного браузера. Я попытался найти решение для Windows версий Internet Explorer, Mozilla и Opera.
Internet ExplorerС этим браузером трудностей не возникло. Воспользовавшись способностью IE задавать значения CSS-свойствам динамически с помощью expression() , задачу чередующихся разноцветных строк, к примеру, легко решить следующим способом:
Stripy tr{ background: expression(this.rowIndex % 2 == 0 ? "#ffe" : "#efe"); }
Для определения этим методом не одного свойства, а целого стиля для соответствующих табличных строк (добавить классы oddrows и evenrows), код придется усложнить, или воспользоваться технологией DHTML Behaviors :
Stripy tr{ behavior: url(stripy.htc); } /* нечетная строка */ /* четная строка */
В приведенном примере реализовывается задуманное: добавляются необходимые классы строкам, в зависимости от того, четная это строка или нет. Такое поведение тега tr описано в файле stripy.htc:
stripy.htc //Использованные технологии были впервые представлены в Internet Explorer версии 5, соответственно таблицы с классом stripy станут «зебрами», начиная с этой версии.
GeckoРасширение, подобное DHTML Behaviors воплощено и в браузерах с движком Gecko. Веб-разработчикам позволено, как определять новые элементы на странице, так и переопределять внешний вид, содержимое и поведение стандартных. Для этого используется XBL (XML Binding Language). Данная технология обладает бóльшими возможностями по сравнению с разработкой от Microsoft и, казалось, что с решением поставленной задачи трудностей не возникнет, но не тут-то было.
В CSS XBL-привязка задается подобно behavior с помощью свойства -moz-binding:
Stripy tr{ -moz-binding: url(stripy.xml); }
Оставалось в XBL-файле stripy.xml описать поведение нужных тегов, однако, несмотря на все свои усилия, мне не удалось «привязать» ни тег tr , ни другие табличные теги. Причиной этой неприятности оказался Bugzilla Bug 83830 : Binding TD cells (with XBL) doesn"t work, at all . Как бы это не было обидно, но по всему выходило, что на XBL не стоит рассчитывать. К счастью, решение все же было найдено!
Помощь пришла от известного веб-гуру Дина Эдвардса (Dean Edwards), создавшего XBL-обертку , позволяющую Gecko-браузерам использовать технологию Microsoft DHTML Behaviors, а это значит, для решения задачи можно задействовать тот же файл stripy.htc , что и для IE!
Для этого нам понадобится два XBL-файла: moz-behaviors.xml (непосредственно обертка, взять можно на сайте Дина Эдвардса, весит меньше 7K) и bindings.xml (вспомогательный, промежуточный файл «между» CSS и moz-behaviors.xml , код ниже по тексту). Теперь, чтобы.htc -файл заработал и в Mozilla, необходимо следующее:
.stripy tr{ -moz-binding: url(bindings.xml#stripy.htc); }В общем случае все отлично работает, но изменить поведение тега tr все равно не удастся из-за упомянутого выше бага, но умнице Эдвардсу удалось решить и эту проблему. Для нашего случая СSS-код следует дополнить:
/* необходимое дополнение для успешной привязки табличных тегов */ .stripy{ -moz-binding: url(bindings.xml#table); } /* HTC behavior при помощи XBL-привязки */ .stripy tr{ -moz-binding: url(bindings.xml#stripy.htc); } /* нечетная строка */ .stripy .oddrows{ background:#ffe; ... } /* четная строка */ .stripy .evenrows{ background:#efe; ... }Содержимое файла bindings.xml должно быть следующим:
bindings.xmlТеперь все отлично работает. Таблицы с классом stripy станут «зебрами» в браузерах на движке Gecko, начиная с версии 1.0.
OperaК сожалению, этот представитель семейства веб-проводников не располагает механизмами расширения сравнимыми с конкурентами. Да, в 9-й версии появились виджеты , но с их помощью невозможно как-либо повлиять на работу браузера. Что делать? Opera не оставила выбора, кроме как воспользоваться запрещенным приемом. Начиная с 7-й версии, браузер (как впрочем, и IE, начиная с версии 5) обладал интересной «особенностью» - возможностью выполнять скрипты прямо из CSS. Для этого используется любое CSS-свойство, позволяющее в качестве значения указывать путь к файлу. Вот пример такой техники:
Body{ background-image: url("javascript: alert("Hi");"); }
Opera запускает сценарий только для существующих HTML-элементов и только один раз. Почему бы этим не воспользоваться и не позаимствовать скрипт, упоминавшийся выше? Я так и сделал, хотя стоит признаться, с данным приемом возникали определенные сложности и не все сценарии были «послушными»:
Function makeStripy(tabClass) { var tabs = document.getElementsByTagName("table"); for (var e = 0; e < tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); } } if (window.opera) makeStripy("stripy");
Этот скрипт успешно выполниться в Opera и через CSS:
Stripy tr{
background-image: url("javascript:function makeStripy(tabClass){var tabs=document.getElementsByTagName("table");for (var e=0;e
