Table shadow background

They have: 5,633 posts

Joined: Jan 1970

Hello, I'm new here.

I'm trying to build shadows behind some tables (drop shadow). How can I do it ?

Thanks in advance.

Oracle

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Welcome to TWF Oracle,

Do you have an online example of exactly what you are trying to achieve?

openmind's picture

He has: 945 posts

Joined: Aug 2001

Just set the attributes for the table within the Tag. This page breaks down the attributes you can use.

It would be a better idea to use CSS but I'm not sure how you would do it...

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

I don't think you can do a drop shadow for a table though??

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Well, you could fake it. You'd just have to make graphics for the corners and two sides of the table, then put them into their own cells (the long parts for the side and bottom could be done as table cell backgrounds so they'd tile and stretch to the height and width of your own table).

There is a CSS attribute for drop shadowing (filter:dropshadow...) but no. 1 it looks ugly and 2. it doesn't seem to want to work on block elements, just on text and things like that. Oh, and they only work in IE 5.0+ AFAIK. Here's a list of filtering properties if anyone's interested:

http://web.bentley.edu/empl/c/rcrooks/toolbox/stylesheets/css015.html

Actually, wait, try this:

filter: progid: DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')

- it seems to only work if a background color is defined, and only in IE probably. Check this page for more details

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Forgot: Welcome to TWF, Oracle! Stop by the introductions forum and let us know a little more about yourself Smiling

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

You can, in the CSS, fake it by using borders:

border-top: 1px solid #hexhex;
border-left: 1px solid #hexhex;
border-right: 3px solid #hexhex;
border-bottom: 3px solid #hexhex;

It will appear to have a drop shadow, depending on the colours you use (represented by #hexhex).

You can use that on DIV, or any block level element.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.