About the DoIT HTML Tutorial JavaScript Tutorial XML Tutorial PHP Tutorial Chapter 1 - Creating Web Pages Chapter 2 - Basic Document Layout Chapter 3 - Basic Document Styling Chapter 4 - Text Formatting Chapter 5 - Graphic Images Chapter 6 - Applying Special Styles Chapter 7 - Linking Pages Chapter 8 - Using Tables Chapter 9 - Playing Multimedia Chapter 10 - Creating Forms Chapter 11 - Designing Web Sites HTML/CSS Appendix Creating Tables Table Borders Table Captioning Table Colors & Background Table Size & Alignment Aligning Text & Cells Column & Row Spanning Table Groupings Table Colors and Backgrounds
Tables can have outer border colors as well as cell border colors. They also can have background colors, patterns, and graphic images as backdrops for the full table or for selected rows and 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 type="text/css"> .inset { border:inset 5px red; } .outset { border:outset 5px red;} .ridge { border:ridge 5px red; } .groove { border:groove 5px red;} .dashed { border:dashed 5px red;} .dotted { border:dotted 5px red;} .solid { border:solid 5px red;} .double {border:double 5px red;} .inset td, .outset td, .ridge td, .groove td, .dashed td, .dotted td, .solid td, .double td {border:inset 1px #000;} </style> Listing 8-16. General style sheet for table border colors.
inset | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | outset | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | ridge | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | groove | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | |
dashed | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | dotted | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | solid | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | double | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | |
Figure 8-16. Varieties of table border styles and colors.
You can create your own 3-D shading effects by styling each of the borders separately with border-top, border-right, border-bottom, and border-left colors. The following tables creates their own 3-D effects with solid borders tinted to resemble inset and outset styles. The style sheets used for these two tables are shown in Listing 8-17.
Table 1 | 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 | | Table 2 | 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 | |
Figure 8-17. Table border 3-D effects using border colors.
<style type="text/css"> /* INSET STYLE */ #TAB1 { border:solid 7px; border-color:#B22222 #FEB9B9 #FEB9B9 #B22222; } /* OUTSET STYLE */ #TAB2 { border:solid 7px; border-top-color:#FEB9B9; border-right-color:#B22222; border-bottom-color:#B22222; border-left-color:#FEB9B9; } #TAB1 td, #TAB2 td { border:inset 1px #000; } </style> Listing 8-17. Style sheet code for tables with individual border colors.
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 type="text/css"> table { border:solid 1px #000; } td { border:style 3px red; } </style> Listing 8-18. General style sheet for table cell border colors.
inset | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | outset | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | ridge | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | groove | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | |
dashed | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | dotted | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | solid | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | | double | Cell 1.1 | Cell 1.2 | | Cell 2.1 | Cell 2.2 | |
Figure 8-18. Varieties of table cell border styles and colors.
As in the case with table borders, cells borders can be styled and colored independently. In Figure 8.19, 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 in Listing 8-19.
| 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 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 | |
Figure 8-19. Tables with individual cell border colors.
<style type="text/css"> /* INSET STYLE */ table {border:solid 1px #000;} table td {border:solid 5px red; border-top-color:#FEB9B9; border-right-color:#B22222; border-bottom-color:#B22222; border-left-color:#FEB9B9;} </style> <style type="text/css"> /* OUTSET STYLE */ table {border:solid 1px #000;} table td {border:solid 5px red; border-top-color:#B22222; border-right-color:#FEB9B9; border-bottom-color:#FEB9B9; border-left-color:#B22222;} </style> Listing 8-19. Style sheet code for tables with individual cell border colors.
Table Background Colors
You can specify a background color for the whole table or select specific rows or cells to apply background colors. 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 |
Figure 8-20. Table with a background color.
<style type="text/css"> table { border:ridge 5px red; background-color:#F6F6F6; color:#FFF; } table td { border:inset 1px #000; } </style> Listing 8-20. Code for table with a background color.
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 it is given a different border style.
| 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 type="text/css"> table {border:ridge 5px red;} table td {border:inset 1px #000;} table tr#ROW1 {background-color:red; color:white;} table tr#ROW2 {background-color:white;} table tr#ROW3 {background-color:blue; color:white;} table td#CELL9 {border:inset 4px red; 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> Listing 8-21. Code for table with row colors.
Table Backgrounds
In the same fashion used 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 |
Figure 8-22. Table with background image.
<style type="text/css"> table {border:ridge 5px red; background-image:url(heart.png);} table td {border:inset 1px #000;} </style> Listing 8-22. Code for table with background image.
If needed, other background properties -- background-repeat and background-position -- can be applied.
Deprecated Table Attributes
Border colors can be 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, in turn, 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 |
These table, row, and cell attributes are deprecated and should be substituted with equivalent style sheet properties.
TOP | NEXT: Table Size & Alignment