Tables
Tables are great for organizing your HTML page. You can use them in the traditional way to display rows and numbers and you can use them for page layout. This will let you space the elements on your page in any way you choose, creating a page layout that is visually pleasing.
Tables have container tags that hold the table, <TABLE>...</TABLE>, as well as tags to hold the rows <TR> and the data <TD>. A caption <CAPTION> tag can be used to give your table a title. If you want to use headers or titles in the rows or columns of your table, the <TH> tag can be used. An example of a simple table is:
<table>
<caption>This is the caption</caption>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>row1 col1 data</td>
<td>row1 col2 data</td>
<td>row1 col3 data</td>
</tr>
<tr>
<td>row2 col1 data</td>
<td>row2 col2 data</td>
<td>row2 col3 data</td>
</tr>
</table>
In a browser, this table would look like this:
| column 1 column 2 | column 3 |
|---|---|
| row1 col1 data row1 col2 data | row1 col3 data |
| row2 col1 data row2 col2 data | row2 col3 data |
The header cells (column titles or labels) in this example are placed across the top of the table. We could have just as easily placed them along the side of the table.
The caption by default will appear at the top of the table. If you want it to appear somewhere else, you can add an ALIGN=direction inside the caption tag, for example: <CAPTION ALIGN=bottom>.
Although we have the data organized into a table, the columns and rows are all jammed together, and difficult to read. Tables have many other attributes you can use to improve the way they look. We can use the border tag <BORDER> to set the table off from the rest of the page. And we can specify CELLSPACING to separate the cells from each other, or CELLPADDING to add space around the contents within the cell.These three attributes are identified within the main table tag. We can set each of these equal to the number of pixels desired. How big is a pixel? It depends on the user's screen resolution. At 72 dots-per-inch (dpi), 18 pixels is 1/4 inch. You can align the contents of your cells by adding ALIGN=direction in your <TR> or <TD> tags. Some directions are left, right, center, and justify.
Let's try a table that uses all of these attributes:
<table border ="3" cellspacing="3" cellpadding="3">
<caption align="bottom">This Week's Sales</caption>
<tr>
<th align="left">Monday</th>
<td>64</td>
</tr>
<tr>
<th align="left">Wednesday</th>
<td>42</td>
</tr>
<tr>
<th align="left">Friday</th>
<td>150</td>
</tr>
</table>
Although it's not necessary, I align the tags so that I can see where each row begins and ends, and to make sure I don't forget my closing tags. Some browsers will work just fine if you forget a closing tag, others will not. To be safe, always use a closing tag.
In a browser, this table will appear as:
| Monday | 64 |
|---|---|
| Wednesday | 42 |
| Friday | 150 |
Isn't that much nicer? Now you try it. Try changing the values for the border, cellspacing, and cellpadding, to see how it changes the way the table looks. Change the alignment. Use your own example.
And that takes care of tables. Let's move on to forms!
