[HTML][JavaScript][Computer Stuff][Freeing the Mind]

Ken Ward's HTML Tutorial ...

Some other stuff on tables!

The following table probably covers everything you might reasonably want from a table. It has;

  • Colours
  • Alignment
  • Backgrounds
  • Nested Tables
  • Cell Padding

I am spanning 3 rows! This is my table
I have some padding to keep me away from the border!
Nested Table
The self known to me The self unknown to me and unknown by others
The self known to me and known by others The self unknown to me but known by others
Watching Television Playing sports

View the code! (Although you might want to wait a bit until you have read the rest of what follows!)

The first thing you might notice about the table is that it has a thick black border! We achieve this effect by

<table width="95%" border="10" border="black" name="table1" id="table1">

In the table tag we have the BORDER specified as 10 (I started with 3 and increased the number till it looked right for me.) The  bordercolor="black" is self evident (I remember when some book author said, "This is self evident", no one, not even the research PhDs could work it out! But here, I think it is self-evident! You put the colour name you want in the quotes or use a hexadecimal code.) 

You might also have noticed the cell on the left is sort of all by itself and independent. (By the way, the little squares in the table are called cells.) What we do here is to put <TD> in the first row and add to the <TD> part;

<td rowspan="3" .. >

The ROWSPAN means that the cell <td> is spanning 3 rows instead of keeping to its own row. Also the cell has a background image;

<td rowspan="3" background="PinkBackground.gif" align="center" width="20%">I am spanning 3 rows!</td>

See a simple example with code!

Also it has align="center" which means that the horizontal alignment of the 'I am spanning 3 rows' is in the centre rather than on the right or left. We would use valign had we wanted to centre it vertically. The width="20%" means the left to right dimension of the cell is, in this case, 20% of the table row width.

Let's look at aligning the contents of table cells! in more detail!

[back to:  tables]
[on to: aligning the contents of table cells!]

Most Recent Revision: 18-Oct-98.
Copyright © 1998

I am always pleased to hear from you.
Send your comments to