CSS query

design

#1

Any CSS guru who can help me?

I am trying to create a standard style for some data tables. To set the width and background colour for all the data tables on a page (listing of databases), do I use
.dblist table {width: 100%; background: #fff;} or
table.dblist {width: 100% background: #fff;}?

And how/where do I set cell padding, text alignment and vertical alignment for the remaining cells in the tables?
.dblist td or .dblist td {text-align: left; padding: 2px; vertical-align: top;} ?
Or is it td.db {blah blah}??

I hope I am making sense to somebody. :frowning:

Marsbar


#2

[code]

table.dblist { background-color : #444; width : 100%; border-collapse : seperated; } table.dblist td { background-color : #999; text-align : left; padding : 2px; vertical-align : top; }
1 2 3
4
5
6 7 8
[/code][color=#0000CC]jason[/color]

#3

Many, many thanks, Jason, for coming to my aid.

Now I need to make the header cells stand out by giving them a different background colour and text style. Is this what I should add:

table.dblist th {background-color: blue; color: red; font-weight: bold;}

And to give the first header cell a set width:

table.dblist th.title {width: 20%;}

-Marsbar


#4

[code]

table.dblist { background-color : #444; width : 100%; border-collapse : seperated; } table.dblist td { background-color : #999; text-align : left; padding : 2px; vertical-align : top; } table.dblist th { background-color : lightblue; text-align : left; padding : 2px; vertical-align : top; first-child : } table.dblist th.title { width : 20%; color : blue; }
one two three
1 2 3
4
5
6 7 8
[/code]There's also a pseudo element selector "first-child" that is nice, but browser support sucks so you are indeed probably better off going with the class for your first th cell in the end.

FYI, the ing “table.dblist th” or any of the others for that matter, the “table.dblist” bit is not needed if you’re applying this to every table, on the page.

[color=#0000CC]jason[/color]


#5

Jason wrote: FYI, the ing “table.dblist th” or any of the others for that matter, the “table.dblist” bit is not needed if you’re applying this to every table, on the page.

Sorry, Jason, I was able to follow you all the way … until the for-your-info (FYI) bit. Could you please explain that part again? What do I need to do when I am applying the rules to just a single table on a page; and what do I need to do when I wish to apply the rules to multiple tables on a page?

Oh, and one other question: what is and how does ‘border-collapse’ work?

Thanks for your patience and expert help.

Marsbar


#6

yeah, that was a mess wasn’t it? =D sorry about that, can’t understand it myself. Was saying:

the table class can be applied to as many tables on a single page as you like. If you have another table on the page that you don’t want to apply that classes styles to, then you would not add the class to the markup right? If you were going to apply this to every single table on that page, then there’s really no need for the class at all, you could just drop all instances of “.dblist” in the stylesheet and the styles would be applied to the table-s, th-s, and td-s etc

if that didn’t make anymore sense, and I’m not sure it did, just pretend I said nothing :wink:

border-collapse can be set to “collapse” or “seperate”; collapse will give you no space between cells, seperate gives space, like “cellspacing” in your table tag

[color=#0000CC]jason[/color]


#7

Ah, it all makes sense now. Splendid! Thank you very much for all your help, Jason.
Good weekend!
Marsbar