Cómo sombrear filas alternas con CSS3

A esta forma de presentar filas se le suele llamar cebra.

Caso Tabla

HTML

<table class="zebra">
  <thead>
    <tr>
      <th>Col0</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
  </tbody>
</table>

CSS

table.zebra tbody tr:nth-child(2n+1) {
  background-color: #eef;
}

Normalmente, las tablas presentan sus celdas con un borde. Para ocultarlo, se puede usar el atributo html border="0". Sin embargo, también se puede hacer usando estilos, con algo como:

table.zebra {
  border-collapse: collapse;
  border-spacing: 0;
}

Caso Lista

HTML

<ul class="zebra">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

ul.zebra li:nth-child(2n+1) {
  background-color: #eef;
}

Normalmente, las listas presentan sus filas con un bullet. Para ocultarlo, se puede usar estilos, con algo como:

ul.zebra {
  list-style: none;
  padding: 0;
}