 |
|
 |
|
 |
||||||||||||||||||
|
Tables CONT Tables are often used to make layouts... so often people want to be able to change the colors in a table. Since you already know how to change the font color, I'll show you how to change the background color, and/or add an image to the background.When you want to change the background color you need to decide where you want to do it, so for instance say we want to change the background color of the whole table. Then we need our table tag. <table border=4 height=100 width=100 cellspacing=6 cellpadding=6> And to this tag we're going to add bgcolor=black So our tag now looks like this: <table border=4 height=100 width=100 cellspacing=6 cellpadding=6 bgcolor=black> And of course the outcome:
Notice now that the background for the table is black instead of the page color, but what if we want the going cell to be navy in color, well then for that specific TD we're going to add a bgcolor=navy to the tag. So our code for that TD should look like this <td width=30 height=55 bgcolor=navy>going </td> And the outcome on the page would look like this:
Now for instance we want to add a image to the background, much like the body tag and adding an image to the page background we're going to put background="images/bg.jpg" into the table tag.
We can do the same thing to the TDs so, my it cell is now going to have it's own background. We take our <td width=20 height=10>it </td> tag and we add background="bg2.jpg" to it, making the code now look like this: <td width=20 height=10 background="bg2.jpg">it </td> And the outcome of course:
Notice how with the white background you can't read the text... that's a simple fix, by adding a <font color=black> and of course closing it after out text </font> we can remove the visibility problem. Make sure you add it within the td tags, so around the text desired to be another color and not around the table. so it would look like this.
Since we've made a lot of changes, let's take a look at how our code should look like if we had the exact table shown above:
Now it is possible to add various other things, like you can fix the background in a table as well. You can put anything in the cells you want, and so you can apply other things learned to this.
Now you can see the going over, taking up two spaces. Next we're going to change the rowspan of the "it" cell. This will be similar to the colspan, in that you add the rowspan=2 to the td tag, and remove the other td tag. So our code will look like this: <tr> <td width=20 height=10 background="images/bg2.jpg"rowspan=2><font color=black>it <br>there</font> </td> <td width=30 height=55 bgcolor=navy>going </td> <td width=50 height=35>over </td> </tr> <tr> <td width=30 height=55 align=center>? </td> <td width=50 height=35 align=center>? </td> </tr> And once again the outcome:
I threw in a <br> in order to put the there down on the next line, it's not necessary. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
