CSS table naming - css

Question

Is there any way I can rename this CSS code to only affect a certain table instead of all the tables on my site?
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
and the HTML code:
<table id="mytable" cellspacing="0">
<tr>
<th width="202" class="nobg" scope="col">Configurations</th>
<th width="250"></th>
</tr>
<tr>
<th scope="row" class="spec">Model</th>
<td>M9454LL/A</td>
</tr>
<tr>
<th scope="row" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
</tr>
<tr>
<th scope="row" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
</tr>
</table>

Answer 1

You can change your CSS selectors to match only a specific table ID, so for instance...
#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

Answer 2

To specifically target the table that you showed the html code for, do this:
#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
#mytable td.alt {
background: #F5FAFA;
color: #797268;
}
#mytable th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#mytable th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
You wouldn't need the full table#mytable.

Answer 3

Put table#mytable in front of every css selector.
table#mytable th{
}
table#mytable th.nobg{
}
table#mytable td{
}
table#mytable td.alt{
}
table#mytable th.spec{
}
table#mytable th.specalt{
}
Or just #mytable.
#mytable th{
}
#mytable th.nobg{
}
#mytable td{
}
#mytable td.alt{
}
#mytable th.spec{
}
#mytable th.specalt{
}

Answer 4

You can prefix every rule with your table id (#mytable) so you'll have something like
#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
}
#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
#mytable td.alt {
background: #F5FAFA;
color: #797268;
}
#mytable th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#mytable th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}