Tables using Smarty

Note: This code has not been developed since 2002. It remains here as the page is very popular, and we understand it still works with Smarty

If you're on the Smarty or PEAR-DEV mailing lists then you'll have read the threads I started about the best way to make a table using Smarty. The problem was complicated because I wanted to keep it as simple for the designer as possible. I felt that using a {section} loop was cumbersome and confusing for the designer.

I had already come across the PEAR Table class, and discounted it, because I didn't want to build the table within my PHP script (no control for the designer). I suddenly had this idea of a {table} tag for smarty, which would behave in a similar manner to the HTML_Options. A couple of hours planning and programming later, and I had the code below. Feel free to use it, however if you make any modifications please let me know what they are, as I'd like to improve it in any way possible.

This tag builds on the PEAR Table.php, so you need to have a working installation of PEAR. If you don't then you can grab the file from PEAR's CVS and alter the path when including Table.php in the code below to point to it.

This code is released as tipware: if you like it and use it then please buy me something off my Amazon wishlist.

Download

Please click here to see the code.

Documentation

syntax: {table loop=$varname cols=int (table_attr=string) (td_attr=string) (altrows=string) (arrange=string)}

Attribute Type Required Default Description
loop array yes none The array to put in the table cells
cols int no 2 The number of columns in the table
table_attr string no align="center" border="0" Attributes for the table tag.
caption string no none Caption to go in the caption tag
caption_attr string no align="top" Attributes for the caption tag
header string no none Text to go in the table header
header_attr string no none Attributes for the table header
td_attr string no align="center" Attributes for the td tags.
arrange string no horizontal Whether to build the table row by row or column by column.
altrows string no none Allows you to give alternating rows different styles. Syntax is: style1|style2

Examples:

All these examples will use the following PHP file:

<?php
require("Smarty.class.php");
$smarty = new Smarty;

// Data would usually be fetched from a database, 
// but I'm just making an array
$data = array(
              "Cell 1",
              "Cell 2",
              "Cell 3",
              "Cell 4",
              "Cell 5",
              "Cell 6",
              "Cell 7",
              "Cell 8"
              );

$smarty->assign("data", $data);
$smarty->display("test.tpl");
?>

If we have the following as our template "test.tpl":

{table loop=$data}

it will produce the following table.

Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6
Cell 7 Cell 8

Now for another:

{table loop=$data cols=3 table_attr="bgcolor=\"#ffcc00\""}

will produce:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8  

Notice how it is not center aligned - this is because we have over-ridden the default <table> tag attributes with our own.

Alternating rows:

{table loop=$data altrows="bgcolor=\"#F2F2F2\"|bgcolor=\"#CCCCCC\""}

gives us:

Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6
Cell 7 Cell 8

 

Table header:

{table loop=$data header="Cell numbers" header_attr='bgcolor="#CCCC00"'}

gives us:

Cell numbers
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6
Cell 7 Cell 8

 

Alternating rows:

{table loop=$data altrows='bgcolor="#F2F2F2"|bgcolor="#CCCCCC"' caption='This is the caption'}

gives us:

This is the caption
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6
Cell 7 Cell 8

 

Build table vertically:

{table loop=$data altrows='bgcolor="#F2F2F2"|bgcolor="#CCCCCC"' caption='This is the caption' arrange='vertical'}

gives us:

This is the caption
Cell 1 Cell 5
Cell 2 Cell 6
Cell 3 Cell 7
Cell 4 Cell 8

To do:

- Improve the way the default attributes are set. I need some ideas :-)

- Variable naming within the function, as I don't think I'm using $_ in varnames correctly.

Any feedback or suggestions would be much appreciated!

Change log

Version 1.0 (released 2002-05-07)

  • Updated to reflect Smarty 2.X changes
  • Added support for associative arrays
  • Added support for building table horizontally or vertically

Version 0.2 (released 2001-11-18)

  • Changed function name
  • Added caption support
  • Added header (<th>) support.
  • Thanks to Werner Hülsmeier for the ideas and sample code to make these changes.

Version 0.1 (released 2001-11-16)

  • First release