Colours

We want to colour in a table...

Let's start by colouring in the background, behind the words. We can do this with a "style" attribute within the tag, which specifies the colour, like this <td style="background-color:red">

The style attribute can be put in any tag. SPANs, TDs, DIVs, even the whole BODY tag. Wow!

You can find the colour names and codes here

Important Note The word "color" in HTML is spelled the AMERICAN WAY, without the U. it won't work if you spell it the European way with the U.

cell	another cell
cell 3	cell 4

I've actually introduced you to a completely new language, which isn't HTML at all. The stuff in the "style" attribute is a language called "Cascading Style Sheets" (CSS).

You can "style" anything in HTML using CSS. For example, here's a link back to the previous page. The CSS is color:#ff0000;background-color:ForestGreen; font-weight:bold;padding:0 2px;text-decoration:none

But, this text is not a hyperlink.
(color:blue;text-decoration:underline;)
It could get very confusing if you do something which your users don't expect!

Now, we wanted to colour in the lines in our table...
This is slightly more complicated. We need to switch off the 'border="1" ' attribute we used on the table, and use CSS styles instead. You'll see why...

First, change the <table> tag so it says <table style="border:2px dotted black" >

cell	another cell
cell 3	cell 4

This creates a border around the table (2 pixels wide, dotted and black), but does not put a border between the table cells. What we need to do is to add borders to the table cells as well

Now, I could add to the "style" attribute in each tag, but that's a waste of my typing time. There's a short-cut, called CSS Classes. I've added class="withborder" to each <td> tag in the table below. This tells the browser to use a CSS class (which I need to defined in the <head> of the document.

The CSS in the head looks like this:

<style type="text/css">
    td.withborder { border: 2px dotted green; }
</style>

cell	another cell
cell 3	cell 4

We've ended up with something very different from the borders we had before.
There are ways to fix this; read more about CSS at W3 Schools (if you want to know, search for "border-collapse!)

We got a bit distracted playing with dotty borders. Here's another table with different borders everywhere.... (view source to see what I did)

cell	another cell
cell 3	cell 4

The last cell has a zero-width right hand border, as a way of introducing different border widths. There's so much you can do with CSS. This is only a tiny bit of what can be accomplished.