CSS for Table headers,even odd rows?

Question

My Table structure is like follows:

<table>
 <thead>
   <tr class="navigation">
   </tr>
 </thead>
 <thead>
   <tr class="headers">
   </tr>
 </thead>
 <tbody>
  <tr class="even">
    <td><a href="#"/></td>
  </tr>
  <tr class="odd">
  </tr>
  </tr>
 </tbody>
</table>

I have defined following CSS ,how can apply "navigation","header","even","odd" classes in my CSS? How to define them relate to 'table' class like 'table.even','table.odd' ? thanks

table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10px;
    #margin: 45px;
    width:100%;
    text-align: left;
    border-collapse: collapse;  
}

Answer 1

Applying a class to any element allows you to do the following:

element.className { rules }

So with your TR, you could do the following:

tr.navigation { font-weight:bold }

So creating zebra-stripes on your odds and event rows can be done like this:

tr.odd  { background-color:#FFF; }
tr.even { background-color:#CCC; }

Answer 2

you would use

table thead tr.navigation {}
table thead tr.headers {}
table tbody tr.even {}
table tbody tr.odd {}

Answer 3

Only reference the parent element's class or the parent element itself if you have to use the class name for more than one type of element. For example, this:

.navigation { font-weight:bold }

...instead of this:

tr.navigation { font-weight:bold }

It will cut down on load time when the browser renders the page.

Reference: Optimize browser rendering [Google Code]