A <TABLE> example

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

... and with a Border :

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

BORDER tells the table how large the border should be, in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers. BORDER=0 gets rid of the borders. Table Border size set at '5'.

... and with Cell Spacing :

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

CELLSPACING gives the amount of space between cells. CELLSPACING value = 2

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

CELLSPACING value = 7

... and with Cell Padding :

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

CELLPADDING gives the amount of space (or padding) between the cell border and the cell contents.
Note the cell border walls tend to fill out. A higher number fills out more. CELLPADDING value = 2

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

... CELLPADDING value = 7


Putting it all together :

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

... with ALIGNed Table Data in the centre of the second Cells

Table Data	More data	Even more data
Row 2	ya?	rhubarb, rhubarb

... with the WIDTH command values at 20%, 50% and 30%
(And the first Tabled Cells ALIGNed to the right)

---

The Colspan and Rowspan commands

Colspan

This goes above the 3 cells
Cell	Cell	Cell

... and this is what is happening :
<TD ALIGN="center" COLSPAN="3">This goes above the 3 cells</TD><TR>
<TD ALIGN="center">Cell</TD>
<TD ALIGN="center">Cell</TD>
<TD ALIGN="center">Cell</TD><TR>

The first TD cell is to span across three columns so the command COLSPAN directs the span to go across three columns. Note there are three cells (columns) that are being spanned by that command.

If the command was COLSPAN="2", the span would have been only two columns.

Note where the first <TR> command lies. It is right after the row that spanned three columns. If only two were spanned, then another TD cell would be placed before the first TR command.

It is advisable to draw out a table before writing the HTML code.



Rowspan

This column sits to the left of the 2 righthand cells	Cell
	Cell

... and this is what is happening :
<TD ROWSPAN="2" ALIGN=center WIDTH="200">This column sits to the left of the 2 righthand cells</TD>
<TD ALIGN=center WIDTH="200">Cell</TD><TR>
<TD ALIGN=center WIDTH="200">Cell</TD></TR>

The column spans across two rows : you tell columns to span rows and you tell rows to span columns !!

Again, the best thing to do is to draw out the table before you attempt to create it with HTML commands.

Getting the spans is never the difficult thing. The problem is always where do you place the <TR> command to keep this information all inside the four corners.

---

Return to the Atrium