Borders around table and cells

[dazzlindonna]

I am trying to replace the bordercolor attribute of my table tag with css, so I can be W3C compliant. I've managed to figure out that I can get the border around all the cells by using this:

.myTablewBorder td{
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
}

However, this only puts the border around all the cells, and I want the border around the entire table as well. (I have several tables on the page, so I can't just have it apply to all tables or all tds, etc... it has to be just for this one table). Is there a way to simply place a black border BOTH around the table and around each cell using CSS?

(PS: I've searched the forums and the rest of the net for hours and cant find an answer, but I'm optimistic that there is one).

[broniusm]

I believe you're just looking for this:

.myTablewBorder td

to become this:

.myTablewBorder

You can nest elements inline like that to get just the elements that match the tree you described, and in your example, you said "the TDs within any element with class=myTablewBorder". So removing "td" will bring you back to any element with myTableBorder.

(I say any, because if you want only the table, you'd say:

table.myTablewBorder { ... }

[dazzlindonna]

If you mean changing this:

.myTablewBorder td{
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
}

to this:

.myTablewBorder {
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
}

then that only puts the border around the table but not also around all the cells.

If that is not what you mean, then I guess I don't understand what you are saying?

[broniusm]

Yes that's right.. You can also combine the two, as in:

.myTablewBorder, .myTablewBorder td{
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
}

Here, you're saying "all elements with myTableBorder class" and all next-level TDs within "all elements with myTableBorder class"

(sorry-- I didn't catch this part: "and I want the border around the entire table as well.")

Any idea how to do those cool blocks in responses I've seen people do?

[broniusm]

btw: here's an excellent resource:
[w3.org...]

A bit of fireside reading if you will.

[dazzlindonna]

thanks! that's the solution!

[pageoneresults]

If your borders all have the same attributes, you can use CSS shorthand and trim this...

.myTablewBorder, .myTablewBorder td{
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
}

to...

.mytablewborder, .mytablewborder td {
border:1px solid #000;
}

I would also recommend that you use all lower case in your coding unless something absolutely specifies that it be upper case.