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.

Example

Person	relationship	Age
Daddy	Married to Judith	42
Mummy	Married to Richard	41
Kelvin	Both children of Richard and Judith	17
Henry	Both children of Richard and Judith	12

<table border>
<tr><th>Person<th>relationship<th>Age
<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
<tr><td>Henry<td>12
</table>

Omissions

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

<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.