|
|
            |
 Tables (5)No Lines, BorderColorLight, BorderColorDark Let's say that you don't want your table to be divided up by lines. Let's have another look at a table as a starting point. Remember this table from the previous page?
Let's remove the cell's lines.
To do this I added a few words to the line: ...by adding the bits in red: BorderColorLight & BorderColorDark I can tell you're impressed! But there's more! How about adding a bit of flair to the border of the table by introducing two colours instead of the one (blue). Back to the original code (the 'minus the lines' one): Okay, let's add a couple more words to get this effect:
I have done two things differently to the original code (apart from the additions). I have changed the color="blue" to a hexidecimal code so I don't confuse your browser, and increased the border width from 2 to 4 thereby increasing the effect. The entire code is now (with additions in red): <TABLE border="4" frame="box" rules="groups" bordercolorlight="#0080FF" bordercolordark="#004080" cellpadding="3" cellspacing="2">
Notice that 'bordercolor=...' now reads 'bordercolorlight=...' and 'bordercolordark=...'. It's entirely up to you how you want the colours to look - I will leave that choice to your particular taste! Adding Javascript Powered Colours Now let's add a bit of Javascript to make a cell change colour when the mouse cursor moves over it. Here's an example, simply place your cursor on any of the cells:
To start with you will have to place this piece of script in the <HEAD> section of your page: <script language="JavaScript1.2">
...and then change the opening line of your <TABLE> to read: <table onMouseover="changeto('blue')" onMouseout="changeback('')" width="50%" cellpadding="2" cellspacing="2" border="2"> The rest of the table coding is the same as you had before, only the opening line is different. Within reason you can change the colour to anything you want, here I have used blue. ...and that's it for now! If you have a problem with tables, and you would like some further help or advice, please feel free to contact us.      | |||||||||||||||||||||||||||||||||