General Purpose

Come si crea una tabella XHTML con le righe a colori alternati? Semplice usando CSS. Vediamo come. Innanzi tutto il codice di markup:

<table summary="tabella di esempio: le righe dispari
hanno sfondo bianco mentre quelle pari hanno sfondo
celeste pallido.">
  <tr>
    <th>Intestazione 1</th>
    <th>Intestazione 2</th>
  </tr>
  <tr>
    <td class="odd">contenuto cella 1</td>
    <td class="odd">contenuto cella 2</td>
  </tr>
  <tr>
    <td class="even">contenuto cella 3</td>
    <td class="even">contenuto cella 4</td>
  </tr>
  <tr>
    <td class="odd">contenuto cella 5</td>
    <td class="odd">contenuto cella 6</td>
  </tr>
  <tr>
    <td class="even">contenuto cella 7</td>
    <td class="even">contenuto cella 8</td>
  </tr>
</table>

Le celle delle righe dispari appartengono alla classe odd mentre le celle delle righe pari appartengono alla classe even. Si obietterà che bastava definire le classi sulle righe, per intenderci sugli elementi tr, ed io vi rispondo con una domanda: funziona su tutti i browser?

Fatto il markup ora scriviamo le regole di presentazione, i CSS. Ecco le semplici regole:

table
  {
    /* elimina gli spazi tra le celle */
    border-collapse: collapse;
    /* centra la tabella nella pagina */
    margin: 0 auto;
    padding: 0;
    width: 80%
  }
			
td
  {
    color: #000;
    margin: 0;
    padding: 0.2em
  }
			
td.odd
  {
    background-color: #fff;
  }
			
td.even
  {
    background-color: #d4dde5;
  }

L' esempio mostra il risultato che si ottiene.