Zebra Tables

Category:Views

[color=blue][b]Community:[/b] Please feel free to add other methods :-)[/color]

Zebra tables is a term used to describe tables that have alternating row colours:

[img]http://alistapart.com/d/stripedtables/itunes.png[/img]

This effect can be achieved using various methods, both server and client-side using PHP and CSS/Javascript.

[h3]Basic method[/h3]

[b]CSS[/b]

[code] .tr0 td{ background:#F4B624; color:#000; } .tr1 td{ background:#FFFFFF; color:#000; } [/code]

[b]View[/b]

[code] <?php $i = 0; foreach($result as $row){ ?>

<?php echo $row->name ?> ... <?php echo $row->descriptions ?>

<?php $i++; } ?> [/code]

[b]Output[/b]

[code]

Foo ... Bar ... [/code]

[h3]Table Class Method[/h3]

This method uses CodeIgniter's built-in table class library. First, build an array with the data for the table:

[code] $table_data=array( array('Number in Stock','Item Name'), array('34','Boxes'), array('23','Pens'), array('98','Sheets of Paper'), array('12','Zebras') );[/code]

Then build an array with some table settings:

[code] $table_setup=array( 'table_open' => '

', 'row_start' => '', 'row_alt_start' => '' );[/code]

This sets an opening class for all your odd rows, and all your even rows, and cleans up the table opening tag. Only a class is really needed, if you're going for XHTML.

Build the table into a variable to pass to your View:

[code] $this->table->set_template($table_settings); //apply the settings $data['table'] = $this->table->generate($this->foo->getFoo()); //build the html output and stick in our data array $this->load->view('tableview',$data); [/code]

Use the following (or similar!) styles in whichever stylesheet you wish to use:

[code] .zebraTable tr { background-color:#FFFFFF; } .zebraTable .rowEven { background-color:#DDDDDD; }[/code]

The resulting table html code is something similar to:

[code]

Number in Stock	Item Name
34	Boxes
23	Pens
98	Sheets of Paper
12	Zebras

[/code]

Good luck, and have fun!