When your first web page is up on the World Wide Web, why not apply for our Good Start Award?

Tables allow us to display rows and columns of text or numbers (or images). You can think of a table as being like a spreadsheet. The important thing to grasp is the fact that the data you display in your table is arranged in rows, and each row is divided into columns. The illustration below shows a simple table consisting of three rows and three columns:

To create the table we use a number of HTML tags. First, the whole table is contained within a pair of <TABLE>...</TABLE> tags. Inside these tags, each row is contained within a pair of <TR>...</TR> tags (TR=Table Row). Finally, inside the <TR> tags, each entry is contained within a pair of <TD>...</TD> tags (TD=Table Data). So the coding for the example table looks like this:

<TABLE BORDER=1>
  <TR>  <TD>Class</TD>  <TD>Peak</TD>  <TD>Off-Peak</TD>  </TR>
  <TR>  <TD>Adult</TD>  <TD>£5.99</TD>  <TD>£4.50</TD>  </TR>
  <TR>  <TD>Child</TD>  <TD>£2.99</TD>  <TD>£2.25</TD>  </TR>
</TABLE>

Just like the other more complicated tags we've looked at, there are a number of "attributes" we can add to these tags. Taking the <TABLE> tag first, we can specify the width of the border around the cells. In the example above I used a border width of 1 (i.e. 1 pixel). If you leave out the BORDER attribute, no border will be shown. In addition we can specify how much space is to be left between the cells, and the "cell padding", how much space is left between the cell border and the data in the cell. Again the sizes are in pixels. In the example below I have put a cell spacing of 4 pixels and cell padding of 8 pixels:

<TABLE BORDER=1 CELLSPACING=4 CELLPADDING=8>
  <TR>  <TD>Class</TD>  <TD>Peak</TD>  <TD>Off-Peak</TD>  </TR>
  <TR>  <TD>Adult</TD>  <TD>£5.99</TD>  <TD>£4.50</TD>  </TR>
  <TR>  <TD>Child</TD>  <TD>£2.99</TD>  <TD>£2.25</TD>  </TR>
</TABLE>     

If we don't specify the cellspacing and cellpadding values, they will both be taken as 1 pixel. These two values allow us to space the table better. We can also use the WIDTH and HEIGHT attributes to specify the width and height of the table. These measurements can once again be given in pixels or they can be given as a percentage of the screen width (or height). The example below would introduce a table which would occupy half the width of the screen and a quarter of the screen height:

<TABLE WIDTH="50%" HEIGHT="25%">

Note the quotation marks around the percentage figure. You can probably get away with leaving out the quotation marks, but the official HTML specification says that you should place quotes around any measure which does not consist solely of figures, so it's advisable to use them.

Later versions of both Internet Explorer and Netscape also allow you to decide on a background colour for your table. This is specified in the same way as the page background colour:

<TABLE BGCOLOR=RED>

If you leave out the BGCOLOR attribute then your table will be transparent. There are also a variety of other attributes you can specify within the <TABLE> tag, but unfortunately not all browsers recognise them or else treat them in different ways. Perhaps the most interesting of these attributes are the ones which allow you to specify the border colours and which sides of the table are to display borders; these attributes however are only recognised by Internet Explorer (although the latest version of Netscape may also recognise them).

So much for the <TABLE> tag. The <TR> tag can also include a number of attributes. Perhaps the most important is the alignment of the data in the row. The example below shows three rows of a table, the first row being left-aligned, the second centre-aligned and the third right-aligned. If you don't specify an alignment then left-alignment is assumed:

<TABLE BORDER=1 WIDTH="50%">
   <TR ALIGN=LEFT>  <TD>Left aligned</TD>  </TR>
   <TR ALIGN=CENTER>  <TD>Centre aligned</TD>  </TR>
   <TR ALIGN=RIGHT>  <TD>Right aligned</TD>  </TR>
</TABLE>      

It is also possible to specify how the text aligns vertically within the cell. This is only useful where at least one cell contains text which occupies several lines. The example below shows a table which contains one row. The width of the table has deliberately been kept small (25% of screen width) so that the text in the first column will wrap round. The text in the second column has been vertically aligned with the top of the cell using the VALIGN attribute. If no vertical alignment is specified then MIDDLE is assumed. Click the camera image to see examples of the vertical alignment set to TOP, MIDDLE and BOTTOM:

<TABLE BORDER=1 WIDTH="25%">
   <TR VALIGN=TOP>  <TD>This text is too long to fit in the width of the cell, so it is wrapped</TD>  <TD>This text is shorter</TD>  </TR>
</TABLE>     

As with the <TABLE> tag, other attributes exist, but are not all recognised by all browsers. The <TD> tag can also use the WIDTH, ALIGN and VALIGN attributes. In this case the alignment will apply to just the one cell. If WIDTH is quoted as a percentage then it will be taken as a percentage of the table width, not of the screen width. Additionally, you can use the attribute NOWRAP to prevent the text within the cell from wrapping -- be careful, though, because this may give you an extremely wide table!

There is one other tag pair which I haven't mentioned so far -- the <TH>...</TH> tag. This should be used in place of the <TD> tag, normally in the first row of a table. The <TH> tag specifies that the cell contains a heading. In this case the text is automatically emboldened and centered within the cell.

Tables are really extemely useful. Experiment with all the different possibilities -- especially study the effect of the HEIGHT and WIDTH attributes and the CELLSPACING and CELLPADDING attributes. When you are finished, go on to the next section which uses tables when Creating Multi-Column Pages.