TABLE Data Display - Background Image
The following examples explain how to use an image as the background on your page and in a table. I also caution you on the use of images for backgrounds only to make sure that the page display accomplishes it's purpose of being readable and useful to researchers.
The "background" attribute allows you to select an image from your files for your backgrounds. Don't forget to upload the image to the appropriate file when you upload your updatedd pages.
Example 1 Adding an image as a table background
|
<tr> <td align="center"> <table width="500" background="images/flags2.gif" border="7" style="border-color:#900" cellpadding="5"> <tr class="trtext1"> <th width="60%" align="center">File Name</th> <th width="40%" align="center">Submitter</th> </tr> <tr bgcolor="#FFFF99"> <td align="left">File for research purposes</td> <td align="center">Bryant Walker</td> </tr> </table> </td> </tr> |
||||
|
The importance of an image background is to enhance the display and not take away from the data that you want the readers to use. In the above example, the image has some dark flags that obscures the text and makes it almost impossible to read. A good background image is usually applied in the "body" element and appears in the whole page instead of one part (table) of the page. You can use an image in a table on the page, but as in the above example, make sure the background image allows the data to stand out and be readable.
Example 2 Adding an image as a page background
|
<tr> <td width="300" align="center"> <table border="7" style="border-color:#900" cellpadding="5"> <tr class="trtext1"> <td width="60%" align="center">File Name</td> <td width="40%" align="center">Submitter</td> </tr> <tr bgcolor="#FFFF99"> <td align="left">File for research purposes</td> <td align="center">Bryant Walker</td> </tr> </table> </td> </tr> |
||||
|
The second example simulates the whole page having an image as a background. It is more pleasing to the eye of the reader and allows them to easily read the data on the page. This is normally done in the "body" element, but can be applied to a primary table if it is used to contain all data and objects on the page. I prefer to apply a page background image in the "body" element or in the "body" element defined in my CSS file; for example, the "body" element on the page would look like this:
<body background="images/fleur16.jpg">.
The CSS "body" element would look like this:
body {
background-image:url(images/fleur16.jpg);
}
