PEAR Manual
Prev |  | Next

# 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", "", "stig@example.com"),
     '1' => array("Merz", "Alexander", "alex.example.com", "alex@example.com"),
     '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, 4, "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>stig@example.com</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">alex@example.com</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 -->

### Using thead, tfoot and tbody

If you want to divide your tables into `thead`, `tfoot` and `tbody` groups, you need to get table objects using getHeader(), getFooter() and getBody(), which you can then use like the normal table object.

    $table = new HTML_Table();
    $head =& $table->getHeader();
    $foot =& $table->getFooter();
    $body =& $table->getBody();
    $head->setCellContents(...);
    $body->setCellContents(...);
    echo $table->toHtml();

In this example, there is no content set for the `tfoot` group. Therefore, only `thead` and `tbody` will be rendered.

> Note: The rendering order is `thead`, then `tfoot` and as the last group `tbody`. This is not a bug but intended behaviour because that's the way it is defined in the (X)HTML Standard.

Prev | Home | Next
HTML_Table | Up | HTML_Table::HTML_Table