TABLE Data Display - Background Color
The following examples tell you how to add a background color to your page, table, table row or table cell.
Try to be consistent with all of your pages and tables if you use a background color. It will make it easier to edit multiple pages as well as keep the pages readable.
Example 1 Changing the colors in your table
|
<tr> <td align="center"> <table width="500" bgcolor="#FFFF00" 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> |
||||
|
Changing the background color of your table is pretty simple using the "bgcolor" attribute. Remember that the color can either enhance the data text or cause the text to be difficult to read. The "bgcolor" can be used to enhance the whole table or just for rows or cells as demonstrated earlier.
Example 2 Adding color to your cells & 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 a specific background color. You can still add color to your <table> table, <tr> row, <th> table header cells and <td> cell elements. The above example also has added color in the <tr> header row applied by the "trtext1" CSS style from my CSS file and by using the "bgcolor" attribute in the second row. A background color added to the "body" element on the page would look like this:
<body bgcolor="#66FFFF">.
The CSS "body" element with page color added would look like this:
body {
background-color: #66FFFF;
}
