Hey, I'm having a bit of problem trying to style some tables I have. Basically, I want one style for one table, but everything else to have a default style, this is what I have come up with;

/* The CSS for the calendar table */
.calendar table,tr,td,th,tbody,TR,TD{
font-family: Verdana;
font-size: 12px;
color: #000000;
text-align: center;
border-color: #000000;
border-collapse: collapse;
}

/* The CSS for every other table */
table,tr,td,th,tbody,TR,TD{
font-family: Verdana;
font-size: 12px;
color: #000000;
text-align: left;
}

/* The HTML for the calendar table */
<table class="calendar">
<tr class="calendar">
<td class="calendar">
Bla..
</td>
<td class="calendar">
mmm
</td>
ect...
</tr></table>

/* The HTML for every other table */

<table>
<tr>
<td>
Bla..
</td>
<td>
ect...
</td>
</tr></table>

So why doesn't this work? Why does the calendar table get the style info from the every other table style?

Any help is appreciated, cheers.

You don't need descendent selectors in this instance.

.calendar { ...styles... } will do just fine.

Then, in your HTML, you only need to declare the calendar class one time:

<table class="calendar">
...all that other table crap...
</table>

Isn't it more done this way?

something, something .class

instead of

.class something, something

And you can always specify only .class and reference to it whenever you want in your html.

You haven't been specific as to what the problem is so I can only guess. CSS borders are different from table borders, so you need to specify both type and width for borders as well as making sure that you don't double them up.

Try
.calendar td {
text-align: center;
vertical-align: middle;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}

.calendar tr {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
}

Duplicating tr and TR etc. is unnecessary, as is including table and tbody. Your text only lives in cells. I only included tr once to finish putting borders around the cells without doubling the line widths.

If you use cell spacing, just put borders all the way around the cells and omit tr from your style sheet entirely. The only other reason to give rows a class, besides finishing borders, is if you want to specify alternating background colors.

The font family, size and color will inherit so repeating them doesn't do much either.

One more point. If you want to specify tr, td, table etc. in one line, you need to give the class name with each item. ie.
.calendar td, .calendar tr {}

thanks for the replies. It nearlly worked, as in, it got the styling the right way round. But the font size should be smaller in the calendar table, but they are both at 12px rather than 10px and 12px :\

Current code

.calendar {
font-family: Verdana;
font-size: 10px;
color: #000000;
text-align: center;
border-color: #000000;
border-collapse: collapse;
}

table,tr,td,th,tbody,TR,TD{
font-family: Verdana;
font-size: 12px;
color: #000000;
text-align: left;
}

/* calendar table */
<table class="calendar">
rest of table stuff
</table>

/* other tables */
<table>
<tr><td> etc...

Why are they both coming out at 12px and the calendar text isn't center aligned?

I think it's because you need to specify the class in:
<td class=""> as well.

Ok, again, nearlly worked. It only worked for one cell :S

www.mouldypunk.com/blog/index.php <-- To see what I mean.

EDIT: I got it working :) Thanks for all your help.

Edit again: One other problem, is there an easy way of getting a black 1 px border around every cell in the table?

Edit again: One other problem, is there an easy way of getting a black 1 px border around every cell in the table?

Yep. You can try using border-collapse, or you can do something like this:

table { border-top:1px solid #000 ; border-right:1px solid #000 }
td { border-bottom:1px solid #000 ; border-left:1px solid #000 }

That will achieve the same effect.

border-collapse didn't work, it made the borders between cells double up.

The other idea left some blanks on some sides too :\

Edit: Fixed, I got border collapse to work. It was just a typo :)

Originally posted by mouldy_punk
border-collapse didn't work, it made the borders between cells double up.

The other idea left some blanks on some sides too :\

Edit: Fixed, I got border collapse to work. It was just a typo :)

Haha, good to hear it works :cool: