You might have seen websites that use html tables for displaying a long list of tabular information. While the information is nicely laid out it's sometimes difficult to read and follow especially when you have to scroll the page. To solve this problem, most designers will add alternating colors to the table rows using a technique called Zebra stripes.

Today, I'm going to show you how you can use Raxan PDI to add zebra stripes to your html tables

Let's say we have simple html page (my-web-page.html) with a table that looks like this:

FruitsSales (%) in Q3
Apple40
Mangoes20
Pears10
Grapes30
Banana25
Oranges45
Strawberries6

Toggle Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Zebra Stripes</title>
    <link href="raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="raxan/ui/css/master.ie.css"
    type="text/css"><![endif]-->
    <link href="raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container c35">
        <table class="border c25">
            <thead><tr class="tbl-header"><th>Fruits</th><th>Sales (%) in Q3</th></tr></thead>
            <tbody>
                <tr><td>Apple</td><td>40</td></tr>
                <tr><td>Mangoes</td><td>20</td></tr>
                <tr><td>Pears</td><td>10</td></tr>
                <tr><td>Grapes</td><td>30</td></tr>
                <tr><td>Banana</td><td>25</td></tr>
                <tr><td>Oranges</td><td>45</td></tr>
                <tr><td>Strawberries</td><td>6</td></tr>
            </tbody>
        </table>
    </div>
</body>

</html>

The first thing we need to do is to load our HTML page or view into the DOM. To do this, we will create a Rich Web page class called MyZebraStripes:


    <?php

    require_once("raxan/pdi/autosstart.php");

    class MyZebraStripes extends RaxanWebPage {
        protected function _init() {
            // load the html page
            $this->source('views/my-web-page.html');
        }
    }

    ?>

Next, we need to locate the even rows within the table. To do this, we will use the 'table tr:even' CSS selector:


    // find even table rows
    $rows = $this->find('table tr:even');

The above code will only select alternating <tr> elements within the table.

Finally, we need to add a CSS background color to the newly selected rows:


    $rows->css('background','#eee'); // add a background color

Here's what the entire code will look like:


    <?php

    require_once("raxan/pdi/autostart.php");

    class MyPage extends RaxanWebPage {

        protected function _init() {
            // load the html page
            $this->source('views/my-web-page.html');
        }

        protected function _load() {
            $rows = $this->find('table tr:even');
            $rows->css('background','#eee'); // add a background color
        }

    }
    ?>

There are many other things that you can do with Raxan Framework. Check out the full list of online examples.

Eve
Posts: 6
Comment
UhwDREORABDD
Reply #6 on : Tue September 13, 2011, 15:15:09
I reockn you are quite dead on with that.
adubrulnhiv
Posts: 6
Comment
TItzbpeqUTDhupuGyd
Reply #5 on : Fri September 16, 2011, 04:25:53
Zvl6Ud <a href="http://xijzvftyeuqm.com/">xijzvftyeuqm</a>
seo
Posts: 6
Comment
http://www.Seo-Solutions.info/
Reply #4 on : Sun July 14, 2013, 23:33:05
Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword....wait there's even more Now what if i told you there was a simple Wordpress plugin that does all the On-Page SEO, and automatically for you? That's right AUTOMATICALLY, just watch this 4minute video for more information at. <a href="http://www.Seo-Solutions.info">Seo Plugin</a> [url=http://www.Seo-Solutions.info/]seo[/url]
seo
Posts: 6
Comment
Ordinance298
Reply #3 on : Tue July 21, 2015, 21:19:48
Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword....wait there's even more Now what if i told you there was a simple Wordpress plugin that does all the On-Page SEO, and automatically for you? That's right AUTOMATICALLY, just watch this 4minute video for more information at. <a href="http://www.SEORankingLinks.com">Seo Plugin</a>
[url=http://www.SEORankingLinks.com/]seo[/url]
seo plugin
Posts: 6
Comment
Parser322
Reply #2 on : Thu June 23, 2016, 08:32:24
Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword....wait there's even more Now what if i told you there was a simple Wordpress plugin that does all the On-Page SEO, and automatically for you? That's right AUTOMATICALLY, just watch this 4minute video for more information at. <a href="http://www.SEORankingLinks.com">Seo Plugin</a>
[url=http://www.SEORankingLinks.com/]seo plugin[/url]
seo
Posts: 6
Comment
Question328
Reply #1 on : Fri October 14, 2016, 04:02:43
Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword....wait there's even more Now what if i told you there was a simple Wordpress plugin that does all the On-Page SEO, and automatically for you? That's right AUTOMATICALLY, just watch this 4minute video for more information at. <a href="http://www.SEORankingLinks.com">Seo Plugin</a>
[url=http://www.SEORankingLinks.com/]seo[/url]

Leave a Comment

Required fields are marked with *.
If you have trouble reading the code, click on the code itself to generate a new random code.