Zebra effect on rows of tables with CSS or JQuery

How about giving an effect bolinhas Red, alternating the color of rows in your HTML tables? With CSS or JQuery you can!

CSS or jQuery?

It is your discretion choose CSS (preferably) or JQuery. In the following example, I chose to create a class .mytab to that effect, focusing on any table, but only on those that are designated. In this case, You must specify your table with class =”mytab”. If you want to affect all tables, change .mytab by tag table. Done that, simply enter one of these codes between your HEAD tags and HTML ready.

Code using CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .mytab tr:nth-child(odd) {
    background-color:#FFF;
  }  
  .mytab tr:nth-child(even) {
    background-color:#CCC;
  } 
</style>

Code using jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('. mytab tr:odd ').CSS(' background-color ', ' #ccc ');
   $('. mytab tr:even ').CSS(' background-color ', ' #fff ');  
});
</script>

Example

Complete code, in CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<HTML>
<head>
<title>Zebra</title>
<style type="text/css">
  .mytab tr:nth-child(odd) {
    background-color:#FFF;
  }  
  .mytab tr:nth-child(even) {
    background-color:#CCC;
  } 
</style>
</head>
<body>
    <table class="mytab">
      <THEAD>
        <tr>
          <th>Order</th>
          <th>Name</th>
          <th>Age</th>
          <th>Phone</th>
        </tr>
      </THEAD>
      <TBODY>
        <tr>
          <TD>1</TD>
          <TD>Maria</TD>
          <TD>45</TD>
          <TD>3434-6767</TD>
        </tr>
        <tr>
          <TD>2</TD>
          <TD>John</TD>
          <TD>12</TD>
          <TD>4545-9009</TD>
        </tr>
        <tr>
          <TD>3</TD>
          <TD>Marcos</TD>
          <TD>33</TD>
          <TD>9987-7655</TD>
        </tr>
        <tr>
          <TD>4</TD>
          <TD>Claudia</TD>
          <TD>21</TD>
          <TD>3409-5652</TD>
        </tr>
        <tr>
          <TD>5</TD>
          <TD>Juca</TD>
          <TD>7</TD>
          <TD>8981-7822</TD>
        </tr>
      </TBODY>
    </table>
  </body>
</HTML>
Total hits: 8886

2 comments on “Zebra effect on rows of tables with CSS or JQuery

Leave a reply

The your email address will not be published. Required fields are marked with *