Shadowed Table Tutorial - Page 5
Next we created a 3 x 3 table in HTML as follows - Important items are in bold and are explained below. Also note that for clarity purposes, we left out our image ALT= " " attributes in this example. Always include the ALT= " " attribute as it is required to be valid HTML 4.01.
<table border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="1%"><img
src="images/tl.jpg" width="16"
height="16" border="0"></td>
<td width="98%"
class="top"> </td>
<td width="1%"><img
src="images/tr.jpg" width="24"
height="16" border="0"></td>
</tr>
<tr>
<td width="1%" class="left"> </td>
<td width="98%"
class="contents">
<h1>Shadow Table
Template</h1>
<p> </p>
<p>Page Content Goes
Here!</p>
<p> </p>
</td>
<td width="1%" class="right"> </td>
</tr>
<tr>
<td width="1%"><img
src="images/bl.jpg" width="16"
height="24" border="0"></td>
<td width="98%" class="bottom"> </td>
<td width="1%"><img
src="images/br.jpg" width="24"
height="24" border="0"></td>
</tr>
</table>
In the <table> tag, be sure and set cellspacing and cellpadding to 0 or set the appropriate attributes in your style sheet.
Both outside columns, the first and last <td> in each row <tr> have their width="1%" and the middle column uses the other 98%.
We specified the four JPG images TL, TR, BR, BL that we created earlier as the four corners of the table, but we have yet to use the other 4 images, TOP, RIGHT, BOTTOM, and LEFT. Why?
Well, there are two main reasons for doing this:
1) because we made the images small in an effort to keep page load time low, and
2) because we are using percentage width tables and need the middle row and column images to expand/contract with user screen resolution and the amount of vertical content on the page.
So we use a style sheet to specify these as background images in the other 4 outside table cells. This technique allows the table's width to adjust to different screen resolutions and window sizes and the height to vary with the table's contents, but allows the graphic border to remain intact by utilizing the CSS properties for background-image and background-repeat to fill the TOP, RIGHT, BOTTOM and LEFT cells with the appropriate graphic slice.
