Web based School
| Table Colors |
 |
 |
Tables can have outer border colors and cell border colors. They can also have background colors, patterns, and graphic images as backdrops for the full table or within selected cells.
Table Border Colors
The appearance of border colors is different depending on the border style. Below are example border styles displayed in red.
<style>
table { border:style 5px red }
td { border:inset 1px }
</style>
table { border:style 5px red }
td { border:inset 1px }
</style>
inset
|
outset
|
ridge
|
groove
|
||||||||||||||||
dashed
|
dotted
|
solid
|
double
|
Individual Border Colors. You might notice in the above tables that those styles with 3-D effects (inset, outset, ridge, and groove) render the shaded borders in black at small border widths. If you like a more subtle contrast you can color each of the borders separately with individual border-top, border-right, border-bottom, and border-left colors. The following tables creates their own 3-D shading effects with solid borders tinted to resemble inset and outset styles. The style sheets used for these two tables are shown below.
|
|
<style>
<!-- Inset Style -->
table { border:solid 7px }
table { border-top-color:#FEB9B9;
border-right-color:#B22222;
border-bottom-color:#B22222;
border-left-color:#FEB9B9 }
table td { border:inset 1px {
</style>
<style>
<!-- Outset Style -->
table { border:solid 7px }
table { border-top-color:#B22222;
border-right-color:#FEB9B9;
border-bottom-color:#FEB9B9;
border-left-color:#B22222 }
table td { border:inset 1px {
</style>
<!-- Inset Style -->
table { border:solid 7px }
table { border-top-color:#FEB9B9;
border-right-color:#B22222;
border-bottom-color:#B22222;
border-left-color:#FEB9B9 }
table td { border:inset 1px {
</style>
<style>
<!-- Outset Style -->
table { border:solid 7px }
table { border-top-color:#B22222;
border-right-color:#FEB9B9;
border-bottom-color:#FEB9B9;
border-left-color:#B22222 }
table td { border:inset 1px {
</style>
Cell Border Colors
Borders around table cells are styled and colored independently from the outer border. In the following examples the outer border is 1 pixel in width for deemphasis, and cell borders are red and 3 pixels in width.
<style>
table { border:solid 1px }
td { border:style 3px rgb(255,0,0) }
</style>
table { border:solid 1px }
td { border:style 3px rgb(255,0,0) }
</style>
inset
|
outset
|
ridge
|
groove
|
||||||||||||||||
dashed
|
dotted
|
solid
|
double
|
Individual Border Colors. As in the case with outer borders, cells borders can be styled and colored independently. Below, all cells in the two tables are styled with solid borders 5 pixels in width. Different shades of red are applied to their sides to create 3-D effects resembling inset and outset borders. The two applicable style sheets are shown below.
|
|
<style>
<!-- Inset Style -->
table { border:solid 1px }
table td { border:solid 5px;
border-top-color:#FEB9B9;
border-right-color:#B22222;
border-bottom-color:#B22222;
border-left-color:#FEB9B9 }
</style>
<style>
<!-- Outset Style -->
table { border:solid 1px }
table td { border:solid 5px;
border-top-color:#B22222;
border-right-color:#FEB9B9;
border-bottom-color:#FEB9B9;
border-left-color:#B22222 }
</style>
<!-- Inset Style -->
table { border:solid 1px }
table td { border:solid 5px;
border-top-color:#FEB9B9;
border-right-color:#B22222;
border-bottom-color:#B22222;
border-left-color:#FEB9B9 }
</style>
<style>
<!-- Outset Style -->
table { border:solid 1px }
table td { border:solid 5px;
border-top-color:#B22222;
border-right-color:#FEB9B9;
border-bottom-color:#FEB9B9;
border-left-color:#B22222 }
</style>
Table Background Colors
You can specify a background color for the table as a whole or selectively apply background colors to rows, columns, or cells. In the following table a light gray background color is applied to the entire table by setting the background-color property of the <table> tag.
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
<style>
table { border:ridge 5px; background-color:#FF0000 }
table td { border:inset 1px }
</style>
table { border:ridge 5px; background-color:#FF0000 }
table td { border:inset 1px }
</style>
Cell Background and Text Colors
The following table contains different background colors for each of its rows by specifying a background-color property for each identified <tr> tag. The text color of selected rows is set with the color property. In addition, one particular cell is assigned a background color that overrides the color of the row it occupies and is given a different border.
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
<style>
table { border:ridge 5px }
table td { border:inset 1px }
table tr#ROW1 { background-color:red; color:white }
table tr#ROW2 { background-color:green }
table tr#ROW3 { background-color:blue; color:white }
table td#CELL9 { border:inset 4px; background-color:navy }
</style>
<table>
<tr id="ROW1">
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr id="ROW2">
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr id="ROW3">
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td id="CELL9">Cell 3.3</td>
</tr>
</table>
table { border:ridge 5px }
table td { border:inset 1px }
table tr#ROW1 { background-color:red; color:white }
table tr#ROW2 { background-color:green }
table tr#ROW3 { background-color:blue; color:white }
table td#CELL9 { border:inset 4px; background-color:navy }
</style>
<table>
<tr id="ROW1">
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr id="ROW2">
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr id="ROW3">
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td id="CELL9">Cell 3.3</td>
</tr>
</table>
Table Backgrounds
In the same fashion as for background colors, you can specify a background image for a table or any of its rows or cells. In the following example, a textured background is applied to the entire table with the background-image property applied to the <table> tag. By default, the pattern is repeated across and down to fill the table area.
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
<style>
table { border:ridge 5px; background-image:url(bkgnd.jpg) }
table td { border:inset 1px }
</style>
table { border:ridge 5px; background-image:url(bkgnd.jpg) }
table td { border:inset 1px }
</style>
If needed, other background properties -- background-repeat and background-position -- can be applied.
Deprecated Table Attributes
Border colors are specified with the bordercolor="color" attribute of the <table> tag, where color is a color name or hexadecimal value.
<table border="5" bordercolor="red">| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
A colored shadow effect can be applied to a table's outer borders with the bordercolordark="color" and bordercolorlight="color" attributes.
<table border="5" bordercolordark="red" bordercolorlight="pink">| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
The background color of the table is given by the bgcolor="color" attribute. When applied to the <table> tag the color fills the background.
<table border="5" bgcolor="lightblue">| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
Cell background colors are set by applying the bgcolor attribute to a <tr> tag (to color the row) or to a <td> tag (to color the cell). Cell colors override row colors which override table background colors. The following table specifies a row color with one of its cells taking on a different background color.
<table border="5" bgcolor="gainsboro"><tr bgcolor="lightblue">
<td bgcolor="pink">
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
A background image is given by the background="url" attribute. Background images can be applied to individual table cells by coding the attribute in a <td> tag.
<table border="5" background="bkgnd.jpg">| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
|
|
Popular Tutorials
-
MS Access
1109
-
C++
1222
-
HTML
584
-
JavaScript
616
-
Vbscript
873
-
Oracle
473
-
VC++
875
-
SQL
2959
-
XML
514
-
Java
814
-
Perl
455
-
Linux
451
