HTML Quick reference

Creating a simple table

The table is composed of several elements, each contained within HTML tags.

A table starts with <TABLE> and ends with </TABLE>

Each row starts with <TR> and ends with </TR>

Each cell starts with <TD> and ends with </TD>

Cells must be within rows, and rows must be within tables.

Example

<TABLE border=1>    //Create a table, with a single border
<tr>            //Start of row
<th>1</th>    //Header item
<th>2</th>
<th>3</th>
</tr>
<tr>            //2nd row
<td>4</td>    //Data item (normal cell)
<td>5</td>
<td>6</td>
</tr>
<tr>            //3rd row
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</TABLE>        //End of table

This would create the following table:

1	2	3
4	5	6
7	8	9

Aligning cells

Use the ALIGN and VALIGN tags to specify how the text lines up.

<TD ALIGN="left" VALIGN="top">

Joining cells

A table element with <tr COLSPAN=3> will eat up the following 2 cells, thus appearing 3 times as wide
Similarly, a table element with <tr ROWSPAN=3> will be 3 columns high

Using form elements in a table

To use elements of a form in a table (eg. command buttons, text boxes), enclose the table in <FORM> tags:
<FORM name="form1">
    <TABLE>
    ...
    </TABLE>
</FORM>

Other uses of tables

Although tables are designed for displaying tabular data, results, etc., they are also very useful for laying out your page, and making sure things align properly.

When using these sort of tables, you will generally use many less cells (maybe 3 columns by 1 row, which would give you a newspaper-style multi-column layout)

Other points to remember:

• Make sure BORDER=0 to hide the table lines. (Or use CSS to do the same thing)
• Use <TD VALIGN="top"> to make sure the text is all at the top of its column. (Again, CSS)
• Put a &nbsp; (space) symbol into blank cells, otherwise they may disappear.

Next topic: META tags and search engines

(Valid HTML 4.01)