Shadowed Table Tutorial
UPDATE: try these alternatives to doing rounded corners
Several people have asked us how we make shadowed tables like the ones used on this site. There's no real magic here, and there are probably easier ways to accomplish this, but this is the procedure we follow and we wanted to share it with you. (and yes, as a matter of fact, I do have a mouse in my pocket, lol)
To build the tables on this site, we used the Microsoft Image Composer software that was included with the standalone versions of Microsoft FrontPage 98 and FP2K. Image Composer is no longer available, but these techniques can be followed using most any graphics package.
The basic idea is to build a rectangle that looks the way you want your table to look. We started with our basic design, in this case, a white rectangle. Size is not important, just choose a size that is easy to work with on your screen - we chose a size of about 300x200.
Next, we applied whatever effects we wanted. In this case, we used a two pixel border in one color, and then added some multi-shaded green lines, 3 pixels wide that crisscross in each corner. When we got our "table" looking just right, we then dropped a shadow behind it.
You can use any combination of techniques or colors you want on your rectangle like rounded or angled corners, special characters, etc. The only thing we recommend is to keep the effects as close to the edges as you can since the farther into the "table" your effects go, the larger the images have to be to build the "table" in your web page.