Search code examples
htmlcsshtml-tablecells

Give on different cells colors


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>


Solution

  • 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>