Style Tables with CSS

[ebba]

I have a whole table-layout with many different commands and the code gets really dirty. I've just startd out with css and found it very useful. So I thought maybe CSS could help me with styling tables aswell.

[webmaster]

Yes you can, you have the ordinary tags like cellpadding, cellspacing, border, height an all thoose, but there are some more, I think this is all of them:

For <table>
align, bgcolor, cellpadding, cellspacing, frame, border, rules. summary, width

For <tr>
align, bgcolor, char, charoff, valign

For <td>
abbr, align, axis, bgcolor, char, charoff, colspan, headers, height, nowrap, rowspan, scope, valign, width

You can also add styles for the text in the td's or in the table. Here's an example.

To style a table you can use this in your CSS-file:

Code: Select all

.class1 {
   width: 400px;
   border: 0;
}

.class2 {
   width: 40%;
   font-size: 20px;
}

.class3 {
   width: 60%;
}

And then just add a class to the table, tr or td:

Code: Select all

<table class="class1">
   <tr>
      <td class="class2">
         Text Here!
      </td>
      <td class="class3">
         Text Here!
      </td>
   </tr>
</table>

[ebba]

It works perfectly, thanks a lot for your help.

[ReFredzRate]

Bummer... I should get back around more often, because that was exactly what I would have posted =/

[stevex]

Thought CSS could dispensed with tables(so i hoped)Tables ruined my life.: )
Can anyone tell me how to do this in css,im sure it will help many understand the power.(More questions later,sorry im a novice):www.sg-j.com?table.htm
Thankyou,Steve

[webmaster]

Stevex: What do you mean, I can't really understand your question. Do you want to see an example how to add the css in a html file?

[stevex]

Please look at this file www.sg-j.com/table.htn.
I want to do away with the table and have the text and backgrounds specified(especially position and colour)
by css.
Any one know the html for a space?
Thanks,Steve

[ReFredzRate]

Stevex: File not found!

[webmaster]

Nope, the link isn't working:

HTML FOR SPACE:

Code: Select all

 

[stevex]

Thanks for the html.
Please try this again.www.sg-j.com/table.htm.Its there.
Best,Steve