Table Backgrounds and Spacing


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.

By the Way

Although the cellpadding and cellspacing attributes are still allowed in XHTML, a CSS equivalent for them exists in the form of the padding and border-spacing style properties. However, these style properties still aren't supported consistently across current web browsers, so I encourage you to stick with cellpadding and cellspacing to fine-tune your table spacing for the time being.


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.

Did you Know?

You can place an entire table within a cell of a different table, and the inner table will possess the qualities of the "parent" table. In other words, you can nest tables inside one another.

Nested tables open a vast universe of possibilities for creative web page layout. For example, if you want a column of text to appear to the left of a table, you could create a two-column table with the text in one column and the subtable in the other column, like the following:

 <table>   <tr>     <td>To the right, you see all our telephone numbers.</td>     <td>       <table border="1">         <tr>           <td>voice</td>           <td>802-888-2828</td>         </tr>         <tr>           <td>fax</td>           <td>802-888-6634</td>         </tr>         <tr>           <td>data</td>           <td>802-888-3009</td>         </tr>       </td>     </tr>   </table> </table> 


Notice that the inner table has borders, but the outer table does not.

A drawback to nested tables is that if you get carried away and nest them too deeply, this can slow down the rendering of the page in a browser. You definitely shouldn't go deeper than three levels without a very good reason, and two levels is really a more realistic limit if you can help it.





SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net