dbHtmlTable examples

This page demonstrates how to use the dbHtmlTable PHP class. The examples use the following CSS:

caption { text-align:center; color:#00a; background:#eef; font-weight:bold; padding:10px; border:1px solid #aaa; }
th { background:#ddf; text-align:left; }
th,td { padding:2px 5px; }
th.rn,td.rn { color:#888 !important; background:#fff; border:none; border-right:1px solid #aaa; }
tr.odd { background:#f8f8f8; }
tr.even { background:#f0f0f0; }
tr.odd td { color:#444; }
tr.even td { color:#222; }
tr.divider td { border-bottom:1px solid #aaa; }
.grp { font-size:16px; font-weight:bold; color:#060; border-bottom:1px solid #ddd; padding-top:10px; }

Simple table

First we create an instance of the class giving it an SQL query string, then call createTable() to create and display the table:

require_once('dbHtmlTable.class.php');
$HtmlTable = new dbHtmlTable('select Id, Title, StartDate, EndDate, ImageFilename, Tmst from mytable order by Title');
$HtmlTable->createTable();

Simple as that! You'll notice that the headings are already styled; this is due to the th declarations in our CSS.

Add a caption

$HtmlTable->setOption('Caption', 'This is my data');
$HtmlTable->createTable();

Alternating background colours

Now we'll get rid of the cell borders, and add alternating background colours:

$HtmlTable->setOptions(array(
    'OddRowClass'=>'odd', 'EvenRowClass'=>'even', 'TableAttr'=>'border="0" cellspacing="0"'
    ));
$HtmlTable->createTable();
echo '<h3>'.$HtmlTable->getRowCount().' rows listed</h3>';

8 rows listed

More formatting and row numbers

Next we remove the caption, set some date formats and add row numbering:

$HtmlTable->setOption('Caption', '');
$HtmlTable->setOption('FormatAsDate', 'StartDate,Tmst,EndDate=j M Y H:i');
$HtmlTable->setOption('center', 'Id');
$HtmlTable->setOption('rownumber', ' ');
$HtmlTable->createTable();

The row numbers look like they're outside the table, due to our CSS styling for classname rn

Empty and null fields

Now we'll identify empty and null values, add a dividing line every 5th row and include the field names at the bottom as well as the top of the table:

$HtmlTable->setOptions(array(
    'EmptyValue' => '<span style="color:#888;">(empty)</span>',
    'NullValue'  => '<span style="color:#888;">-null-</span>',
    'TrEvery'    => 'divider@5',
    'ShowFooter' => true
    ));

$HtmlTable->createTable();

Re-using the class object

We can continue to use the same class object for a completely new database query:

$sql='select TypeDescn as Kind, Id, Title, ImageFilename as Image, Tmst from mytable'
    .' inner join myreftable on mytable.TypeCd=myreftable.TypeCd'
    .' order by mytable.TypeCd';

$HtmlTable->setQuery($sql);
$HtmlTable->setOption('emptyvalue', '[NONE]');
$HtmlTable->createTable();

When you change the query by calling setQuery(), the options that apply to specific fields will revert to their defaults, while more general options will be retained.

Grouping by first column

If the first column is repeating (as it is in the above example), we can make it appear only when it changes:

$HtmlTable->setOption('GroupFirst', true);
$HtmlTable->setOption('GroupHeadCount', 3);
$HtmlTable->setOption('TrEvery', '');
$HtmlTable->createTable();

Here, the repeating first column is styled using classname grp.