Tables (2)

Lets start with our first example again. This is the example with the 60% width attribute.

Okay, let's proceed. The next bit is adding a bit of colour (or color if you are American or writing HTML!). Each cell can be coloured, as can the whole table.

Let's take our example and add a colour code in the first line.

The opening line now reads:
<TABLE BORDER="1"  width="60%"  bgcolor="#FFFF00">

You can change the color attribute to anything you want, and use the written word (yellow) or code it - "#FFFF00". Either way you will fill the table with the colour/color and it will make the whole thing stand out.

You may want to change the colour of one cell to make it different from another. Take the example above and colour the second cell so it looks like this:

All I did was add a bgcolor to the <TD> command, so the entire script now reads:

<TABLE BORDER="1" bgcolor="#FFFF00">
<TH>This is the header cell</TH>
<TR>
<TD bgcolor="#FF0000">This is a table cell</TD>
</TR>
</TABLE>

The next command line is ALIGN. This command aligns the contents left, center or right. Lets go back to our example again, this time with the table contents aligned to the left.

...and again with the contents aligned to the right.

So how is this done? The <TH> and <TD> code is added to with align="right", so it now looks like this - <TH align="right">.

That's all very well with one row of cells. What if you want a number of rows, let's say you want three rows of equal size. The coding is very similar, just multiplied! Here's an example. Let's say we want 3 columns with three rows, so it looks like this:

The code now looks like this:

<TABLE BORDER="3" width="60%" height="100" bgcolor="yellow">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD bgcolor="#FF0000">Cell 4</TD>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
<TR>
<TD>Cell 7</TD>
<TD bgcolor="#0000FF">Cell 8</TD>
<TD>Cell 9</TD>
</TR>
</TABLE>

Notice the difference in the first line? I have made the height a fixed height of 100 pixels so you can see it better. I have also changed the color of cells 4 and 8.

There are two other lines of code that I will deal with here. After that we are into the advanced stuff, and you are better off seeking the really clever stuff. That doesn't mean we can't do it! We prefer to stick to basics on these pages otherwise it could get out of hand! Anyway, the last two commands are Cellpadding and Cellspacing.

To find out about these, please click here.