28.2.4. How to create a table in HTML

The important HTML tags for tables are:

• <table></table> (opens and closes a table)

• <tr></tr> (opens and closes a table row)

• <td><td> (opens and closes a table cell, inside a column)

A table with one row and one column will be constructed with the code:

<table width="100%" border="0">
  <tr>
    <td></td>
  </tr>
</table>

Here you can also see how to use some attributes, like "width", which can attain values in pixels or percent, and "border", which, if set to "0" as in the above example, will suppress the drawing of borders around table cells, thus making the structure of the table invisible to the reader.

A table with two rows and two columns can be created with the code:

<table width="500" border="0">
  <tr>
    <td width="200"></td>
    <td></td>
  </tr>
  <tr>
    <td width="200"></td>
    <td></td>
  </tr>
</table>

As you can see in this example, the table has the following properties:

• two rows,

• two columns,

• fixed total table width of 500 pixels,

• fixed width of the left column: 200 pixels.

Content is inserted in the columns, while the rows have a higher priority and are inserted first. For example, if we wanted to insert the text "PHP-Nuke" in the first line of the left column of the above table, the code would look like this:

<table width="500" border="0">
  <tr>
    <td width="200">PHP-Nuke</td>
    <td></td>
  </tr>
  <tr>
    <td width="200"></td>
    <td></td>
  </tr>
</table>

HTML layout: tables was yesterday, today is CSS!

Tables are meant to hold tabular data. They should not be used for layout purposes, even though they are being widely misused for this purpose, also in PHP-Nuke. The correct way to position your data today, is not through tables, but through CSS (see Section 28.3 and Designing Without Tables). If you decide to use tables, you should be using real table headers and providing a table summary, for accessibility reasons.