1. You can add tables to your web pages. This is usually done for two quite different reasons:
- to put data in columns and rows
- to control layout on the page
2. This is a simple table containing data:
Size Description 1 Red, size – large, fully boxed 2 Blue, size – medium, unboxed
3. The table borders can be removed to use the same coding for controlling graphics, by setting border=”0″. Here is the same table with its borders removed – actually, hidden.
Size Description 1 Red, size – large, fully boxed 2 Blue, size – medium, unboxed
4. What follows is the basic code for a simple table. COPY this code into one of your template pages. You can then experiment by changing the size of the table and the alignment of data in it.
5. Your data goes inside the table data tags:
<TD>your data goes here</TD>
<TABLE>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
6. The width of each table data cell can be controlled by adding WIDTH=”X”, where X is the number of pixels:
<TD WIDTH=”150″></TD>
7. The position of data within each cell can be set at LEFT, RIGHT, or CENTER
<TD ALIGN=CENTER></TD>
8. You can use the <P> and <BR> tags within the table data, as you would in a normal page. I have added some colour to the top row, which is technically known as a table header <TH>
| Size | Description |
|---|---|
| 1 | Red, size – large, fully boxed and inflatable. This product comes with a full set of attachments. Free delivery. |
| 2 | Blue, size – medium, unboxed, and non-inflatable. This model is only suitable for use indoors. Not available in UK. |
9. In order to control the vertical position of data within the cell, you need to add the VALIGN coding – which can be TOP, MIDDLE, or BOTTOM. [Note – this is ‘Middle’, not ‘Center’.]
10. The coding for the cells containing numbers in the example above is as follows:
<TD ALIGN=”center” VALIGN=”top”>2</TD>
11. The structure and the appearance of tables can become a much more complex issue. You can add colour to the cells, shading to the borders, and put tables within tables.
12. Many web designers arrange the text on their pages by placing it inside tables – and lots of fancy effects are possible. But these and many other design tricks are gradually being replaced by the use of style sheets.
© Roy Johnson 2002
