HTML - adding tables

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 layout:

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>

<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:

Size	Description
1	Red, size - large, fully boxed (inflatable)
2	Blue, size - medium, unboxed (non-inflatable)

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.

Click here >> and scroll down to see an example