-- Table Sample Page --

---

Tables are a way of putting large amounts of data in a easy to read format.

Here are the basic tags used to set up a Table:

<table>

This tells the browser that what follows is a table

<tr>

This sets up a table row

<th>

This sets a table header; It will by default be bold and centered

<td>

This designates a data cell.

</table>

This ends the table.

The table header can be either on the top of each column, or on the side as in the example. If they are on the top, and the table is long, they will scroll out of sight.

There's a way around this by setting up two tables, the top one containing the headings, and the bottom one the data and use a style to set overflow:auto. If there are only a few columns of data, this works fairly well, however, when there are many columns, alignment between the two tables becomes a problem.

Here is an example:

For an upgraded example check out another Scrolling table.

---

Tables have been replaced somewhat by DIV"s for a lot of applications. However, they are also a quick and easy way to organize a web page, so, let's take a look at that.

Set up the table like this:

<table width="80%" cellpadding ="10" cellspacing = "0" border ="1" align="center" bgcolor="#ffffaa" >

Then setup the first row: <tr>

<th colspan ="3">This is the Title row spanning 3 cells</th> Then end the first row: </tr>
Another <tr> and a <td>First cell on the first row</td>	<td>This is the second cell on the first row</td>	<td rowspan="2">This is the third cell on the first row spanning 2 rows</td> end the row</tr>
<td colspan="2">This is the 2nd row spanning 2 columns</td> end the row</tr>
<tr> start a new row<td colspan ="3">Bottom row spanning 3 cells</td>End the row </tr>

Then we close the table with </table>

A note here: If you have a large table, it helps the table load quicker if you specify the width of the elements. It only has to be done for one row of <th>'s or <td>'s and all other rows will follow suit.

So, the format for this would be <th width= "120"> . A number or percentage can be used, however, if percent is used, they must total to 100%

Now, what can we do with this basic setup?

Jim's Table Demo Page
	Here is your Headline.	Menu    Home Page one Page two
On a real web page, this would have your main content. It is made taller by adding <height= "200"> to the <td> tag.
© 2011 Albro Web Works

Let's see it with the borders turned off, except for the bottom of the header and the top of the footer: