When setting the back-ground color of a table row should I use the <tr> or the <td>'s in that row?

Say I have two classes row and altRow. What is the best practice when setting the backround-color of table rows? I on开发者_JS百科ly ask this because I was told that I shouldn't set such properties on the <tr> element. Thanks!!

---

You were told right, browsers generally don't deal ok with background set on tr elements.

however, you can set the classe to <tr> elements:

<tr class="row">
  <td></td>
  <td></td>
</tr>
<tr class="altRow">
  <td></td>
  <td></td>
</tr>

and then in css, use cascading face of CSS :)

.row td { background: yellow; }
.altRow td { background: blue; }

---

If you're looking for alternating table rows, CSS3 also allows you to do this:

tr:nth-child(odd) { background-color: #ddd; }
tr:nth-child(even) { background-color: #eee; }

With CCS3, you no longer need alternating class names in your HTML