With term “zebra” we understand highlighting of each n-th row in table or list. By doing this we significantly improve the readability. Especially for long tables or lists. In this articles it is shown with a practical examples using different techniques how to achieve row highlighting in css, css3, jquery un smarty.
1. Using CSS for static table:
table tr.even td {
background: #cacaca;
}
<table> <thead> <tr> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet</td> </tr> <tr class="even"> <td>Lorem ipsum dolor sit amet</td> </tr> ... </table>
2. Using CSS3
table tr:nth-child(even) {
background-color: #cacaca;
}
<table> <thead> <tr> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> </tr> ... </table>
Will not work in IE8,7,6
3. Using javascript and jQuery library.
.even {
background: #cacaca;
}
$(document).ready(function(){
$("tr:even").addClass("even");
});
4. Using javascript and jQuery library . Sophisticated scenario.
$(document).ready(function(){
$('table tr').each(function(i, it){
if(i % 2 == 0) {
$(this).addClass('even');
}
})
});
The sequence number the item (row) is divided by 2 and, depending on the presence or absence of remainder (% operator), row is defined as even or odd. Accordingly, to the even lines class "even" is added, which provides the coloring of the row.
5. Using PHP template engine Smarty..
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
{foreach from=$items item=item name=foo}
<tr {if $smarty.foreach.foo.index % 2}class="even"{/if}>
<td>Lorem ipsum dolor sit amet</td>
</tr>
{/foreach}
</tbody>
</table>
As we can see used mechanism is similar to first example - the element sequence number is divided by 2, and depending on whether or not remainder is determined, it is odd or even entry. Class entry is added to the template. This method is more versatile than 1, as it can handle a table dynamically.
6. Using PHP template engine Smarty. Sophisticated scenario.
{counter assign=k start=0}
{foreach from=$items item=item name=foo}
{math equation="n % 2" n=$k assign="nth"}
<tr {if $nth}class="even"{/if}>
<td>Lorem ipsum dolor sit amet </td>
</tr>
{counter}
{/foreach}
In this scenario, the sequence number is incremented each time calling operator - counter. Useful in cases where the foreach index number can not be so used for some reason. For example, if some comparison is made before html record is created (like if the entry is not empty, etc.).
Sources used:
- http://www.smarty.net/
- http://www.quirksmode.org/css/nthchild.html
» Comments