How can I have different colors on each cell. What I did is only to make the whole red, just to the first 3 cells only yellow blue and red. How can it be this? I should refer to specific <td>? I see this question, but it wasn't exactly what I was searching.
body {
background: #000;
}
#wrap {
margin: 0 auto;
/* margin 0 auto will center that box in your document */
width: 780px;
/*size of your box*/
background: #000;
text-align: center;
/* everything will be written in that box will be centered horizontaly*/
}
td:hover {
background-color: #ff0000;
color: #000000;
}<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>You can use nth-child css psuedoselectors:
td:nth-child(1) {
color: yellow;
background-color: #AAA;
}
td:nth-child(2) {
color: red;
}
td:nth-child(3) {
color: blue;
}<table>
<tr>
<td>Yellow</td>
<td>Red</td>
<td>Blue</td>
<td>Normal</td>
</tr>
</table>