PDA

View Full Version : Shadowing a table



alsoszaa
25 Mar 2008, 09:01 PM
How do you shadow a table just on the sides. I have tried creating a Fireworks PNG to use as the background of the side colums of my table. this somewhat worked. However, the problem is when the image repeats itself, there is a 1px space in between looking very unprofessional. I want my shadows to look like this example. I can use CSS but need help with the code. please follow this link and look at the left and right sides of this page. http://www.csszengarden.com/?cssfile=/207/207.css&page=0

Wickham
26 Mar 2008, 02:38 AM
You should be able to use background-images with repeat-y in a left and right table cell.

If cell-spacing is 0 then there should be no space but if you have a positive size then there will be a space between the shadow and the center content so you need to set the cells with the background-image to 0 margin and padding:-

I've just tested this with shadow images for left and right sides 17px wide x 13px high and they repeat down the sides. Only the center cell had cellpadding for the text.

<table cellspacing="0" cellpadding="10" bgcolor="skyblue"><tr>

<td style="margin: 0; padding: 0; background:
url(images/main_left.jpg) repeat-y; width: 17px;"></td>

<td>
Main center content cell<br/>
Main center content cell<br/>
Main center content cell<br/>
Main center content cell
</td>

<td style="margin: 0; padding: 0; background:
url(images/main_right.jpg) repeat-y; width: 17px;"></td>

</tr></table>

or put the styles in classes in a stylesheet.