Introduction

Introduction -- Creating an HTML-Table

What is HTML_Table?

HTML_Table offers an interface for create a HTML table. You can work with the table like a spreadsheet. Instead of working with HTML code and linear adding of cells, you can address and fill cells independend of there position. There is no different, whether you start with fill a cell at the beginning, in the middle or at the end of the table, a row or a column.

The autoGrow and autoFill value

The autoGrow flag

Normaly, you would define a table with a constant number of rows and columns. But sometimes, you does not know, how many rows or columns you need: ie. transforming user input or the result of a database query to an HTML table.

In this case, you should enable the autoGrow feature. In this mode, HTML_Table adds new rows or columns automatically, if you use a cell address located in a not existing row or column.

The autoFill value

If you create a table of data, sometimes you have not to fill all cells with different values. Perhaps you do not know the value for a cell, or you want to insert a default value - ie. retrieving data about users. Not every user has a mobile, a email address etc., in this case, an "n/a" should be inserted into that specific cell.

So, simply define "n/a" as autoFill value and fill only the cells where data exist. You need not to fill every cell; unfilled cells contain automatically an "n/a".

Creating a table

The demonstation data

Our HTML table to create should contain the following data:
$data = array(
 '0' => array("Bakken", "Stig", "", "[email protected]"),
 '1' => array("Merz", "Alexander", "alex.example.com", "[email protected]"),
 '2' => array("Daniel", "Adam", "", "")
);

Start

Let us now start by creating a new instance of HTML_Table. The table should be 600 pixel wide. We do not know the quantity of the data to insert into the table - so we enable the autoGrow feature. Unfilled cells should contain an "n/a".
require_once "HTML/Table.php";      

$tableAttrs = array("width" => "600");
$table = new HTML_Table($tableAttrs);
$table -> setAutoGrow(true);
$table -> setAutoFill("n/a");

Add data rows

Now process every data entry. Here we use also the alternate feature of HTML_Table. Every second row will be colored red.
for($nr = 0; $nr < count($data); $nr++) {
 $table -> setHeaderContents( $nr+1, 0, (string)$nr); 
 for($i = 0; $i < 4; $i++) {  
  if("" != $data[$nr][$i])
   $table -> setCellContents( $nr+1, $i+1, $data[$nr][$i]);
 }
}
$altRow = array("bgcolor"=>"red");
$table -> altRowAttributes(1, null, $altRow);

Add header cells

Now we want to define the cells in the first row and column as header cells. It should looks like a spreadsheet application, so we want to use the color "silver" as the background colour for each header cell. The first row contains a column headline, the first column the number of the data set row.
$table -> setHeaderContents(0, 0, ""); 
$table -> setHeaderContents(0, 1, "Surname");
$table -> setHeaderContents(0, 2, "Name");
$table -> setHeaderContents(0, 3, "Website");
$table -> setHeaderContents(0, 1, "EMail");
$hrAttrs = array("bgcolor" => "silver");
$table -> setRowAttributes(0, $hrAttrs, true);
$table -> setColAttributes(0, $hrAttrs);

Print the table

It is done! Our table is finished, now we can output the table as HTML code.
echo $table->toHTML();
The output will be look like this:
<!-- BEGIN TABLE LEVEL: 0 -->
<table width="600">
        <tr>
         <th bgcolor="silver">&nbsp;</th>
         <th bgcolor="silver">Surname</th>
         <th bgcolor="silver">Name</th>
         <th bgcolor="silver">Website</th>
         <th bgcolor="silver">EMail</th>
        </tr>
        <tr>
         <th bgcolor="silver">0</th>
         <td>Bakken</td>
         <td>Stig</td>
         <td>n/a</td>
         <td>[email protected]</td>
        </tr>
        <tr>
         <th bgcolor="silver">1</th>
         <td bgcolor="red">Merz</td>
         <td bgcolor="red">Alexander</td>
         <td bgcolor="red">alex.example.com</td>
         <td bgcolor="red">[email protected]</td>
        </tr>
        <tr>
         <th bgcolor="silver">2</th>
         <td>Daniel</td>
         <td>Adam</td>
         <td>n/a</td>
         <td>n/a</td>
        </tr>
</table>
<!-- END TABLE LEVEL: 0 -->