Another CSS question

[TheShortStack]

So I'm reading up on my CSS, and believe it or not I reckon I'm getting somewhere with it. One of the main reasons I wanted to get more comfortable with it is so that I can use it to design nice looking tables ... which is how I've stumbled across today's problem.

I've set up a two column, four row table with nice background colours, which is fine. The first column is only taking up 10% of the table (for an image) while the second column will be the dominant column, housing all the content.

The problem started when I wanted to add rounded corners to my table. Previously, I'd had my <th> set to a colspan of 2, as the table header wouldn't fit in the small first column.

However in order to add the four corner images, I've had to remove the colspan so that there are now two <th> tags each with a different class.

That means of course that the original problem has come back - I can't fit my table header into the small first column. Is there any way I can change the width of just the <th> cells without affecting the width of the <td> cells in the main part of the table.

The only way I can think of doing this is to give the table four columns and use colspans on each row to maintain width.

Is there a better way of doing things though?

Cheers,

[GregW]

I haven't got the answer for you, but what I will say is that from my experience rounded corners and CSS have always been more trouble than they're worth.

[MewsicLovr]

Rounded corners/images are pretty tricky to work with especially if you are just getting started. Honestly I wouldn't recommend messing with them until you have a bit more experience.

That having been said, there are several ways of doing it, but the one I like the most is setting the background property of several <div> or <td> elements (depending on html structure) to the left, right, and center of the table header which merge seamlessly. This effect is tricky to get right though.

Another even simpler way is to make the entire top header of the table one image and either set the background property or just inline the img on top of the table to make it look like it's part of the table.

[Jibninjas]

With out knowing exactly what you are doing I cannot say for sure, but imo you should ditch the tables and just use <div> tags. It is a ton more flexible and you will have a lot less headaches.

Once I learned how to use <div> and the float property my life became a lot easier as I was always running into glitches like the one that you are talking about with tables. Not worth the trouble imo.

[Ozpoker]

+ 1 - try not to use tables either - most tables can be made using <div> or even better imo <ul><li>

There is a simple solution for rounded corners - not sure how it will work on your tables and doesn't work in Opera but is handy nonetheless.

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

[Jibninjas]

+ 1 - try not to use tables either - most tables can be made using <div> or even better imo <ul><li>

There is a simple solution for rounded corners - not sure how it will work on your tables and doesn't work in Opera but is handy nonetheless.

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

I don't believe that these work yet in IE either. I really hope that this becomes a standard as this would make life a lot easier.

Right now I just use images and css right now. If you want to insert an image in the background you can use

background: transparent url(/site/path/to/image.png) no-repeat;

Just make sure that you save as a png and merge visible layers instead of flatten the image.

[Tom]

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

This doesn't work in IE either. I usually use this over images for rounded borders. People using firefox will see the round corners and I do not think it is that big of deal if they are not round anyway for IE users.

Using images just adds too much coding and styling to make it worth it.

[MewsicLovr]

+ 1 - try not to use tables either - most tables can be made using <div> or even better imo <ul><li>

There is a simple solution for rounded corners - not sure how it will work on your tables and doesn't work in Opera but is handy nonetheless.

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

As far as I know this only works for firefox.

[CaseyM]

You should never use tables in your presentation layer. Research using DIV tags instead and positioning the elements using CSS.

This approach is much better for SEO as there would be less code and the content of your site will be easier to spider by search bots. It is also better for cross platform compatibility.

The best place I found to learn was W3schools, good luck mate