Tables

Working with Tables:

Tables are wonderful things...	fabulous things...
They help align and space...	even when you can't see them

The above text was written within a table with hidden borders. The same table with the borders visible:

Tables are wonderful things... fabulous things...

They help align and space... even when you can't see them

If you recall from the HTML Tags List Page (written in Table Format, there are several tags specific to tables:

<table...	Begins the table
..border=X...	Within the `<TABLE>` tag; draws single pixel-width border. Omitting the `border` attribute, or setting `border=0` creates an invisble table. Values for `border` greater than 1 will create a thicker border around the table
...cellpadding=Y cellspacing=Z...	Draws single pixel-width cell-wall divisions; `cellpadding` is the amount of space (in pixels) between the cell contents and its walls. `cellspacing` determines the width of the inner cell walls.
...width=x>	Determines the width of the table; may be in actual pixels (i.e., 550) or percentage (i.e., 80%).
<tr>	Begins a row within a table; there may be multiple rows within a table
<td...	Begins a data cell within a table row; there may be multiple data cells within a table row
...align=left\|center\|right...	Within the `<td>` tag; defines the horizontal alignment within a Table Cell
...valign=top\|middle\|bottom...	Within the `<td>` tag; defines the vertical alignment within a Table Cell
...rowspan=X...	Within the `<td>` tag; creates a cell which stretches vertically across X rows
...colspan=X...	Within the `<td>` tag; creates a cell which stretches across X columns
</td>	Ends the data cell within the table row
</tr>	Ends the table row
</table>	Ends the table

If you imagine the HTML page talking to the browser about the table, you will have a better idea of hpw tables are formed:

"Hey, Browser, make me a table, make the border 1 pixel wide, no extras. First row: Make the first Table Data Cell 60 pixels wide and put this inside 'Top-left' then end the first data cell. Second data cell, 60 pixels also, put in 'Top-mid' and end the cell. Third cell, same width, put in 'Top-Right', end the cell, and end the row. Next row..."

You get the idea!

Let's try a simple table. Open a new file in your text editor, and add the usual heading stuff.

Type the following text: The table should look like this:

<table border=1> <tr> <td width=60>Top-left</td> <td width=60>Top-mid</td> <td width=60>Top-Right</td> </tr> <tr> <td>Mid-left</td> <td>Mid-mid</td> <td>Mid-right</td> </tr> <tr> <td>Bot-left</td> <td>Bot-mid</td> <td>Bor-right</td> </tr> </table>

Top-left Top-mid Top-right

Mid-left Mid-mid Mid-right

Bot-left Bot-mid Bot-right

There are many variations on tables and what you can do with them. If you look at the (magnificent!) code behind these tutorial pages, you will find many tables which were used to organize and align. One of the more popular table arrangements of late is the "left-side navigation bar" which you saw in the backgrounds demo. Let's have another look at the layout without the background: Click Here.

Index of topics

next topic: Wrapping it all up