How to make a table border have 'rounded' corners

[michellerobbins56]

Hello there,

I was wondering how is it possible to give a table border rounded corners as opposed to standard corners?

Thank you for any help

 

[michellerobbins56]

Do I have to use an image (that has been created with rounded corners) and use this as a 'background' to the table?

 

[Foamcow]

Yep.
Though you may be better using 4 images, one for each corner and putting them in cells.

It may be better still not to use a table and to use CSS instead. The principle of adding rounded corners is essentially the same*



*There are other ways to do rounded corners with CSS but I'm keeping this simple!

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[michellerobbins56]

I'm used to using CSS. Would it still be the same principle: i.e using an image as the background...and the image has the 'curve' representing the rounded corner?

 

[Foamcow]

Well you can use CSS instructions to create rounded corners in Firefox/Mozilla etc but IE doesn't like them.

Yes the image principle is the same.
The problem with creating a single background image is that you are stuck to the size of the background graphic.

To make your layout more flexible might I suggest you read:

http://www.alistapart.com/articles/slidingdoors/

and the articles that follow on from that.

It basically shows you how to use multiple images that overlap each other in order to let your elements expand/contract with the document flow.

I would also suggest that you apply the images to page elements that are already in existence rather than creating new ones simply to get the rounded corners.


<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[dmacster]

You may find something you'd like here:

http://www.smileycat.com/miaow/archives/000044.html

Donna

 

[michellerobbins56]

Thanks for your help. I'll take a look at the links.

 

[michellerobbins56]

One other question: is there a way to make an image merge from 'opaque' to 'transparent', rather similar to the top of the page on the Smileycat link above where the middle (light blue) image becomes more transparent the further you go towards the left and right sides, making the orange strip visible underneath.

Thank you for any help.

 

[Foamcow]

Use a 24bit PNG file with an alpha channel... but guess what... it's not supported by IE

Actually I think there is a hack to get around it for IE, but I've never found it worth the bother.

Try and think of another way to achieve what you want with clever use of "normal" images.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[dmacster]

Yes, and that's sad because PNGs are so clean looking. I generally go ahead and make a layer with the effect going into whatever the background it covers will be to help with the strange matte yucky's you get with gif with transparency. What software for image creation?

Donna

 

[michellerobbins56]

Photoshop but I'm still getting used to using it! I have worked out how to merge colours using the 'blur' tool which is very good but not yet found out how to make images 'merge' from opaque to transparent (so anything in the background gradually becomes visible) - is there a link anywhere or way to do this?

Thank you again for all the replies.

 

[Tobie29]

I came across this earlier this week:

http://pro.html.it/niftycube/

I have not used it yet, but it looks interesting.

 

[Foamcow]

The short answer is to either use the blend tool or my preferred method of using a layer mask.

Photoshop forum : Forum229

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[michellerobbins56]

Thank you for your help everyone. One other question is there a way to keep the display constant to whatever the maximum width of the user's browser is? For example if they change their screen resolution ...how can I keep everything in the centre and fitting to the size of the window?

Also, when you refer to the 'blend tool' do you mean the blur tool or is this something different?

Thank you.

 

[michellerobbins56]

Is there a way to keep the display all within the size of the user's browswer window..even if they adjust the size? Do I have to use DIV tags?

I am finding everything fits perfectly on the highest screen resolution but when I reduce the resolution I find the width of the screen requires a horizontal scroll bar to reach the very right part of the website. Ideally I want it all to fit to one window, negating the need for a user to scroll horizontally each time.

 

[michellerobbins56]

Does anyone know? Looks like a tough question.

Many thanks in advance.

 

[Foamcow]

Set the width of your outermost element to 100%.
It's down to how you construct your page as to where to apply that rule. You don't need to use <div> tags per se.

<div> tags are used to denote a logical division in content, you should not, as many people seem to do, scatter them about willy-nilly. There's no problem in using them, but like all HTML tags they should be used appropriately.

If, for instance, your site content is all within a table (erk!) then set the table width to 100%. If, on the other hand, your content is all within a <p> tag (boring page I guess) then set the width of the <p> tag to 100%.

By default, block level elements, such as <div> tags will take up the entire width available to them unless you specify otherwise.

With more complex layouts you mey need to use <div> tags to denote logical blocks of content. For example, a navigation block, a side bar, a content area. But you should always look to reducing the number of elements within elements. If your navigation is done with an unordered list (<ul>) then there is no point in putting that into a <div> element as there is nothing you can do to the <div> that you can't do directly to the <ul>.

I think I may have repeated myself a bit there and I'm not certain that what I have said answers your question directly. Perhaps what I am trying to say is that you should have a clear understanding of precisely why one would use certain tags and thus understand how to create a logical structure to your document.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2