I have the following code

HTML Code:
<style type="text/css">


#mainc{
    width: 780px;
    background-color:#FFFFFF;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border: 10px solid #FFFFFF;
        text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:x-small;
}

table, td{
    font:100% Arial, Helvetica, sans-serif;
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:center;padding:.5em;border:1px solid #fff;}
th{background:#d80119 url(/images/tr_back.gif) repeat-x;color:#fff;}
td{background:#ffffff;color:#000000;}

.sqText {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 13px;
}
.sqTitle {
    font-family: Arial, Helvetica, sans-serif;
    color: #FF7400;
    font-weight: bold;
}
.tdsquares {
    padding-left: 10px;
}
.sqTextCopy {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

</style>

</head>

<body>

<div id="mainc">
<table width="800" border="0" cellpadding="0" cellspacing="0" class="squares">

   <tr>
    <td height="296" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
   
      <tr>
        
        <td width="250" height="132" valign="top" bgcolor="#5CCCCC" class="tdsquares"><p class="sqText">&nbsp;</p>
            <p class="sqTitle">1</p>
            <p class="sqText">1 </p></td>
            
          <td width="250" valign="top" bgcolor="009999" class="tdsquares"><p class="sqText">&nbsp;</p>
            <p class="sqTitle">2 </p>
          <p class="sqText">2</p></td>
          
          <td width="250" valign="top" bgcolor="#1D7373" class="tdsquares"><p class="sqText">&nbsp;</p>
            <p class="sqTitle">3</p>
          <p class="sqText">3 </p></td>
          
      </tr>
      <td></tr>
    </table>
</body>
</html>
And I want my 3 cells to have different colours but they inherit the value from table class

How should I fix my CSS code so that the text and colours inside the 3 cells are correct?

Keep in mind that I cannot change the

Code:
table, td{
    font:100% Arial, Helvetica, sans-serif;
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:center;padding:.5em;border:1px solid #fff;}
th{background:#d80119 url(/images/tr_back.gif) repeat-x;color:#fff;}
td{background:#ffffff;color:#000000;}
because it is used at other sections


Thank you