[jambajooz]

I've been looking everywhere for good tips to make round corners on tables. Anyone have any tips? I use Photoshop or Fireworks. Thanks!

[ringo]

Quick example...anyone know a better way?

1. Make a box with rounded corners in Photoshop like this...



2. Copy and paste into 3 different images...
a. the top

b. the middle

c. the bottom


3. make a tiny transparent gif to use as a spacer (like this -> )

4. Make a table with three rows, use the top, middle and bottom as background images. Put your content in the middle.

Look at the source code http://www.evilguru.com/example/table.html

[OwlBoy]

Great Reply!

-Owl

[Raman]

I'm a developer, not a designer so I wanted to do it in a way that made it most flexible...

The above post is good and definately will work but you're probalby better off making slicing a rounded table that you created in your favorite graphic program into 3x3 (9 squares total).

1. What you do is make a HTML table with 3x3 cells. The center cell will be the cell with all your content.

2. In each corner (I use compass terms) put the appropriate image in the cell as an image. Make sure you don't have any spaces - sometimes WYSIWYG editors put spaces and & n b s p ; in the cells. Take 'em out.

3. In the North and South cells, make the background color of the cell the same as the color of the corners. Alternatively, you can use the north and south throwaways and make them the *background image* of the north and south cells of the table. If you do the image thing then make sure you remember to set the color to something similar (just in case).

4. Do the same thing for East and West as # 3.

The method I just explained will allow you to have tables that will still look good when expanded horizontally. It will also allow you to enter some content in the N, S, E, W cells if you use the background color "method."

If you want to see an example of it, you can check out what I did at www.texacous.com. Try to highlight the whole page with your mouse and you'll see where I used images and where I used only background color. I used an image in the North table because I want to keep the page at 760 pixels wide (that's a good reason to use the image vs. the background color.

Hope that helps.

-Raman

[jambajooz]

Thanks all for the replies! ill try both ways and see which one works best.

[ringo]

Originally posted by Raman:
If you want to see an example of it, you can check out what I did at www.texacous.com.

<franticly scribbling notes> Nice!

[philzilla]

i did a similar thing here

[ervier]

Originally posted by philzilla:
i did a similar thing here

I like the design, especially the intro. One (not too) small remark though... I can hardly read the text because of the colors, the text is too dark for the black background.

[Millennium]

Gecko-based browsers also have the -moz-border-radius property in CSS; you can set this to some unit greater than 0 to get rounded corners.

This will, of course, only work on Gecko-based browsers; other browsers will still render the page, but they will show square corners. A border-radius property is being worked on for CSS3.

[Raman]

Originally posted by Millennium:
Gecko-based browsers also have the -moz-border-radius property in CSS; you can set this to some unit greater than 0 to get rounded corners.

This will, of course, only work on Gecko-based browsers; other browsers will still render the page, but they will show square corners. A border-radius property is being worked on for CSS3.

Yeah, but too bad the most commonly used browsers barely support CSS2 100%..