Working with Tables

First Table

Let us look at a very simple and walk through how it is constructed (please ignore the line numbers in silver, these are purely there for us to easily address various lines).

1 : <TABLE>
2 : <TR>
3 : <TD>1</TD>
4 : <TD>2</TD>
5 : </TR>
6 : <TR>
7 : <TD>3</TD>
8 : <TD>4</TD>
9 : </TR>
10: </TABLE>

The first thing we define to construct a table by opening up the <TABLE> tag. In HTML tables you declare the row first by using the <TR> (table row) tag. The <TABLE> tag is not allowed to have any other tags inside it other than the <TR> tag. This <TR> tag creates a new row in the table, and we further specify the actual data cells using the <TD> (table data) tag. It is inside these <TD> tags that we actual put out content; no where else. The only tag permitted inside the <TR> tags are <TD> tags.

When we render this table in HTML we see the following:

1	2
3	4

We can see that the numbers all sit together in a grid like structure, with the tables cell flowing from left to right then down. Now that we have a basic table in action let us look at some of the attributes you can apply to the various table tags to give the tables a completely different look and feel.

<TABLE> Attributes

The <TABLE> tag has a number of attributes associated with it and we'll look at some of the more common ones here and observe their effect.

BORDER="thickness"
The thickness of the border. Defaults to 0.

BGCOLOR="#RRGGBB"
The background colour of the table

WIDTH="pixels or percentage"
This sets the width of the overall table. If you specify a percentage it will be a percentage of its parent componet. In other words, if the table is sitting on the main page, then the percentage will be calculated from the width of the browser page. If the table is inside another table cell, then it is the cell data from which the percentage is calculated.

CELLSPACING="pixels"
This controls the amount of space between each cell.

CELLPADDING="pixels"
This controls the amount of margin inside the cell.

Lets have a look at the effect of some of these:

<TABLE BORDER=1>

<TABLE BORDER=1 CELLSPACING=2>

<TABLE BORDER=1 CELLSPACING=10>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2>

<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>

<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=2>

<TABLE BORDER=3 CELLSPACING=10 CELLPADDING=10>

As you can see, by simply playing around with some of the values you can dramatically alter the look of your table.

<TR> table rows

The <TR> indicates the start the existance of a table row. You can specify a number of attributes in this tag that each embedded <TD> tag will inherit.

ALIGN="LEFT|RIGHT|CENTER"
This controls how the cell data aligns itself.

VALIGN="TOP|MIDDLE|BOTTOM"
This controls how the cell data aligns itself.

BGCOLOR="#RRGGBB"
The background colour of the row.

<TD> table data

This is where the real magic of the table is controlled; at each cell level. The cell has a number of attributes associated with it as shown below.

ALIGN="LEFT|RIGHT|CENTER"
This controls how the cell data aligns itself.

VALIGN="TOP|MIDDLE|BOTTOM"
This controls how the cell data aligns itself.

BGCOLOR="#RRGGBB"
The background colour of the cell.

WIDTH="pixels or percentage"
the width of the cell

COLSPAN="columns to span"
The number of columns this cell is to take

ROWSPAN="rows to span"
the number of rows this cell is to take

Let us take a quick look at the effect of some of these:

<TD WIDTH="100">1</TD><TD WIDTH="200">2</TD>

<TD WIDTH="100">1</TD><TD BGCOLOR="#FFFF66">2</TD>

<TD WIDTH="100" 

ALIGN="RIGHT">1</TD><TD>2</TD>

<TD COLSPAN="2" ALIGN="CENTER">1</TD>

<TD ROWSPAN="2" 

VALIGN="BOTTOM">1</TD><TD>2</TD>

Using tables

As you can see, by playing around with the COLSPAN and ROWSPAN values of the <TD> cell you can start to morph your table into some quite complex designs. The main use for a table ironically isn't for displaying tabular data, but instead for laying out a page precisely to the web-designers requirements. It is not uncommon for the whole page to be laid out in a table to achieve a number of effects, such as a long columns down the side, such as the BBC website.

It is usual that you may want to embed tables inside cell datas, thus building up a series of nested tables. Remember any legal HTML content is permitted inside the <TD> ... </TD> tags.

tags: table  tables  td  tr  rows  columns