|
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?
| R1C1 |
R1C2 |
R1C4 |
| R2C1 |
R2C4 |
| R3C1 |
R3C4 |
| R4C1 |
R4C4 |
Let's remove the cell's lines.
| R1C1 |
R1C2 |
R1C4 |
| R2C1 |
R2C4 |
| R3C1 |
R3C4 |
| R4C1 |
R4C4 |
To do this I added a few words to the line:
<TABLE border="2" bordercolor="blue" cellpadding="3" cellspacing="2">
...by adding the bits in red:
<TABLE border="2" frame="box" rules="groups" bordercolor="blue" cellpadding="3" cellspacing="2">
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):
<TABLE border="2" frame="box" rules="groups" bordercolor="blue" cellpadding="3" cellspacing="2">
Okay, let's add a couple more words to get this effect:
| R1C1 |
R1C2 |
R1C4 |
| R2C1 |
R2C4 |
| R3C1 |
R3C4 |
| R4C1 |
R4C4 |
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">
<TR>
<TD align="center"> R1C1 </TD>
<TD align="center" colspan="2" rowspan="4"> R1C2 </TD>
<TD align="center"> R1C4 </TD>
</TR>
<TR>
<TD align="center"> R2C1 </TD>
<TD align="center"> R2C4 </TD>
</TR>
<TR>
<TD align="center"> R3C1 </TD>
<TD align="center"> R3C4 </TD>
</TR>
<TR>
<TD align="center"> R4C1 </TD>
<TD align="center"> R4C4 </TD>
</TR>
</TABLE>
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">
function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
</script>
...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.
What happens if you want an image behind the table rather than colour it? Click here to find out!
Top
[1] [2] [3] [4] [5] [6] [7]
<<< Previous page
| 
