|
Table Backgrounds (2)
To get a really nice background to a table cell you can use a website background from a specially designed graphic like this one:
| |
This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes. |
When I want to over-write text, it looks like this:
| This is the text that I can over-write the image with. As you can see there is no problem reading the text. |
This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes. |
So where do you get these backgrounds from? Any Graphic or Image website will have a collection for you to choose from. Let's give you another example of exactly the same table, but with a different background image:
| This is the text that I can over-write the image with. As you can see there is no problem reading the text. |
This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes. |
Or this one:
| This is the text that I can over-write the image with. As you can see there is no problem reading the text as I have changed it to white. |
This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes. |
Or this one:
| This is the text that I can over-write the image with. As you can see there is no problem reading the text as I have again changed it to white. |
This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes. |
You can have the background on both sides of the table if you want:
| |
This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes. |
So how do we do it? Here is the code for the first table:
<table border="0" cellpadding="0" cellspacing="4" width="100%">
<tr>
<td background="images/0usa0.jpg" width="50%"> </td>
<td width="50%" valign="top">This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
<P>The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
<P>The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes.</td>
</tr>
</table>
That was easy!
Now for the second version of the table, this time with a background in both cells:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td background="images/0usa0.jpg" width="50%"> </td>
<td background="images/0usa0.jpg" width="50%" valign="top">This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
<P>The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
<P>The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes.</td>
</tr>
</table>
You may have noticed that:
(a) I have NO cellpadding or cellspacing in the second example, otherwise you would get a gap between the background images. This is not so important if you use a background image in only one of the cells.
(b) I have used a space ( ) in the left hand cell to give it some 'body' - a cell never likes to be left with nothing inside it! If you are over-writing the background with text, you would obviously replace with the text.
Finally, you can nestle a transparent (.gif) image in a cell as well!
 |
This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes. |
How? Like this:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td background="images/0usa0.jpg" align="middle" width="50%"><img src="images/globe8.gif" width="40" height="40" alt="Globe" border="0"></td>
<td background="images/0usa0.jpg" valign="top">This is slightly different as the background image has been specially made for the job, unlike using a graphic taken from your collection.
<P>The graphic was designed to be a multi-image so you don't get the problem of having to alter the cellpadding to accomodate the graphic size.
<P>The larger you make the right-hand cell on your table (this one), the larger the left-hand image becomes.</td>
</tr>
</table>
Here is a single-cell table with a helicopter flying over some 'clouds' - the clouds made out of a background image of course.
 I have used a single cell table with the graphic floating over it. I then add my text after the <img src=...> part and this is what I get. As you can see the text wraps itself around the graphic. In this case I have told the image that the text will be on the left-hand side.
The text will continue to make the cell bigger as I add more text. The helicopter remains in the same place but the text wraps itself around it.
Finally, I have added a coloured border around the entire table and a cellpadding of '3' so the effect is enhanced. |
If you have a problem with tables, and you would like some further help or advice, please feel free to contact us.
Top
[1] [2] [3] [4] [5] [6] [7]
<<< Previous page
|
