Zebra Striping Table with PHP and CSS

Zebra striping table is the coloring or shading alternate rows of a table. These type of tables are eye catching which also makes the webpage look better. With the use of CSS we can do it in better way.

Zebra Striping table

The concept is simple. We will use different background color for even and odd rows. And apply those rules in table. If the table rows are generated by the PHP code, then use the PHP code to identify the even or odd row and then apply the style rules

Style table rows with CSS: In this part, we decide the colors of alternate rows

[php].even { background-color:#FFF; }
.odd { background-color:#333; }[/php]

HTML CODE:

[php]<table>
<tr class="odd">
<td> row 1 </td>
</tr>

<tr class="odd">
<td> row 2</td>
</tr>
</table>[/php]

Most of the times, table rows are generated according to the data from the database. In this case we do not know the count of rows. So we need to use PHP to create the dynamic rows. For this kids of situations, use the table code as given below
Use this PHP code: insert the loop code where mentioned in the code.

[php]<?php $c = 0; ?>
<table>
<!– Start loop –>
<tr class="<?=($c++%2==1) ? ‘odd’ : ‘even’ ?>">
<!– End loop –>
</table>

[/php]

If you have any problem in implementation, comment below.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

  • ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!

Pin It on Pinterest

Share This

Share This

Share this post with your friends!