Come ottenere le tabelle a righe alterne con HTML e CSS

È essenziale definire via CSS si definisce una classe alterna sulle righe di una tabella sfruttando il selettore discendente, in questo modo:

#tabella1 tr.alterna td{background-color: #cfc}

La regola sopra usa il selettore discendente e ha effetto solo sulle celle della tabella con id tabella1 incluse in righe con classe alterna.
Ecco alcune regole css aggiuntive per abbellire la nostra tabella:

#tabella1{border: 1px solid #ccc;border-collapse: collapse}
#tabella1 thead th,#tabella1 tfoot td{background-color: #eee}
#tabella1 caption{color: #000080;font-weight: bold}
#tabella1 td,#tabella1 th{padding: 2px 5px}

Vediamo l'HTML, in cui è evidenziata l'apertura dei tr:

<table id="tabella1">
  <caption>Tabella a righe alterne con html e css</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>riga 1 cella 1</td>
      <td>riga 1 cella 2</td>
      <td>riga 1 cella 3</td>
      <td>riga 1 cella 4</td>
    </tr>
    <tr class="alterna">
      <td>riga 2 cella 1</td>
      <td>riga 2 cella 2</td>
      <td>riga 2 cella 3</td>
      <td>riga 2 cella 4</td>
    </tr>
    <tr>
      <td>riga 3 cella 1</td>
      <td>riga 3 cella 2</td>
      <td>riga 3 cella 3</td>
      <td>riga 3 cella 4</td>
    </tr>
     <tr class="alterna">
      <td>riga 4 cella 1</td>
      <td>riga 4 cella 2</td>
      <td>riga 4 cella 3</td>
      <td>riga 4 cella 4</td>
    </tr>
    <tr>
      <td>riga 5 cella 1</td>
      <td>riga 5 cella 2</td>
      <td>riga 5 cella 3</td>
      <td>riga 5 cella 4</td>
    </tr>
  </tbody>
</table>

Vediamo il risultato: