Beginners guide to HTML

Lesson 6 - Tables

Tables are the best way to layout information.

Start of Tables

You start a table with: <table>
you can tell it to put lines round the table with <table border>
you can tell it to use the whole width of the page with <table width="100%">

Tables have a number of elements in rows and columns. Conventionally a table has the same number of elements in every row, but you can merge elements together for special layout.

Table Rows

Each row HAS to begin <tr>

Table Elements

There are two types of elements <td> for most elements and <th> for the column headings. In general <th>'s are used for the first row and <td>'s for subsequent rows, but you can mix as you see fit.

Both <td> and <th> support the following additional parameters:

<td rowspan=2>Make this element continue for two rows of the table.
<th colspan=3>Make this element continue for three columns of the table.
<td align=right>
(or left, center)
Align this element in the way shown.
You can set align for the row in <tr>
<th valign=top>
(or middle or bottom)
Vertically align this element at the top.
You can set valign for a row in the <tr>

Note that as a default elements are aligned left and in the middle, valign=top is very useful to make table look better.

End of Table

Put: </table> to finish the table.

Note tables can be nested, ie you can put a table inside a table element. But early versions of netscape can get messed up with nested tables. Which is a shame.


DaddyMarried to Judith42
MummyMarried to Richard41
KelvinBoth children of Richard and Judith17
<table border>
<tr><td>Daddy<td>Married to Judith<td>42
<tr><td>Mummy<td>Married to Richard<td>41
<tr><td>Kelvin<td rowspan=2>
Both children of Richard and Judith<td>17


There are a few other things you can put in tables, but these are the main ones.
Next Lesson | Back to the index | Previous Lesson | Exercises

Home | Advice | Hosting

Updated 27th of March 2002