How can I style the thead and tbody for this page? - html

Question

I have an HTML page with the CSS included. The CSS works for certain parts of the page, but not the parts I discuss. I want to have a background color and make a few other style changes, but they aren't implementing.
Here is the CSS:
table.tablesorter thead tr, table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #e6EEEE; font-size: 8pt; padding: 4px; }
table.tablesorter thead tr .header { cursor: pointer; }
table.tablesorter tbody td { padding: 6px; vertical-align: top; border-bottom: dashed 1px #333; }
table.tablesorter tbody tr.odd td { background-color: #F0F0F6; }
table.tablesorter thead tr .headerSortUp { background-image: url(images/asc.gif) no-repeat; }
table.tablesorter thead tr .headerSortDown { background-image: url(images/desc.gif) no-repeat; }
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #8dbdd8; }
Here is the HTML:
<table>
<thead>
<tr>
<th>Pilot ID</th>
<th>Rank</th>
<th>Total Flights</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><?php echo $pilotcode; ?></td>
<td align="center"><?php echo $userinfo->rank;?></td>
<?php
if($report)
{ ?>
<!--<td><strong>Latest Flight: </strong><a
href="<?php echo url('pireps/view/'.$report->pirepid); ?>">
<?php echo $report->code . $report->flightnum; ?></a>
</td>-->
<?php
}
?>
<td align="center"><?php echo $userinfo->totalflights?></td>
<td align="center"><?php echo $userinfo->totalhours; ?></td>
</tr>
</table>
All this results in is bold text with plain text below it.

Answer 1

Your CSS is applying the styles to a table with the class tablesorter. Simply add this to the table tag
<table class='tablesorter'>
table content
</table>
Demo