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:
| Fruits | Sales (%) in Q3 |
|---|---|
| Apple | 40 |
| Mangoes | 20 |
| Pears | 10 |
| Grapes | 30 |
| Banana | 25 |
| Oranges | 45 |
| Strawberries | 6 |
<!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.
Posts: 23
Reply #21 on : Fri September 16, 2011, 09:25:53
Posts: 23
Reply #20 on : Mon July 15, 2013, 04:33:05
Posts: 23
Reply #19 on : Wed July 22, 2015, 02:19:48
Posts: 23
Reply #18 on : Thu June 23, 2016, 13:32:24
Posts: 23
Reply #17 on : Fri October 14, 2016, 09:02:43
Posts: 23
Reply #16 on : Fri September 28, 2018, 18:24:21
Posts: 23
Reply #15 on : Thu October 11, 2018, 09:50:02
Posts: 23
Reply #14 on : Tue November 20, 2018, 01:08:08
Posts: 23
Reply #13 on : Wed December 19, 2018, 12:50:06
Posts: 23
Reply #22 on : Tue September 13, 2011, 20:15:09