There are a few tricks in Listing 11.2 that I haven't explained yet. You can give an entire tableand each individual row or cell in a tableits own background, distinct from any background you might use on the web page itself. You do this by placing the background-color or background-image style in the <table>, <tr>, <td>, or <th> tag exactly as you would in the <body> tag (see Hour 9, "Custom Backgrounds and Colors"). To give an entire table a yellow background, for example, you would use <table style="background-color:yellow"> or the equivalent <table style="background-color:#FFFF00">. Similar to the background-color style property is the background-image property, which is used to set an image for a table background. If you wanted to set the image leaves.gif as the background for a table, you would use <table style="background-image:url(leaves.gif)". Notice that the image file is placed within parentheses and preceded by the word url, which indicates that you are describing where the image file is located. Tweaking tables goes beyond just using style properties. For example, you can control the space around the borders of a table with the cellpadding and cellspacing attributes. The cellspacing attribute sets the amount of space (in pixels) between table borders and between table cells themselves. The cellpadding attribute sets the amount of space around the edges of information in the cells, also in pixels. Setting the cellpadding value to 0 causes all the information in the table to align as closely as possible to the table borders, possibly even touching the borders. cellpadding and cellspacing give you good overall control of the table's appearance.
You saw the effect of background color and spacing attributes in Figure 11.2, which used a silver background color for the table heading and gave the text and images a little room to breathe within each table cell.
|