Applying Table cell borders

write like this:

.products td
{
    border: 1px dotted #999999;
}

HTML

<table class="products">
 <tr>
  <td></td>
</tr>
</table>

I want to give each cell in the table a border.

What I've understand is you want cell border like this:

Here is the fiddle of what you want.

Use following CSS:

table.productsTable {
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: separate;
    background-color: white;
}

table.productsTable td {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: white;
    -moz-border-radius: ;
}

​ Hope this helps.

td.productsTable won't work because you have no <td> elements with a productsTable class.

However, your second CSS rule, .productsTable td, this will work because you do have <td> elements that have a parent element with the class productsTable.

I've made a quick fiddle of this, and you can see it working correctly:

td {
  border: 1px dotted #999;
}

<table width="100%" height="100%" cellspacing="2px;">
  <tr>
    <td width="40%">We Offer:</td>
    <td width="20%" align="center">e-phone FREE</td>
    <td width="20%" align="center">Personal</td>
    <td width="20%" align="center">Pro PBX</td>
  </tr>
  <tr>
    <td width="40%">Pricing</td>
    <td width="20%" align="center">FREE</td>
    <td width="20%" align="center">£3 per month</td>
    <td width="20%" align="center">From £5 per month</td>
  </tr>
</table>

If this isn't working for you, its likely that you have either not correctly linked your CSS file, or there is another CSS rule overriding this. Try inspecting element to see.