HTML & CSS per principianti (Parte 07): Tabelle (01)

Le tabelle sono strutture abbastanza complesse composte da righe e colonne. La struttura di base esterna delle tabelle è sempre costituita dall'elemento table.

<table>
…
</table>

All'interno di questo elemento avviene la vera definizione della tabella. Durante l'implementazione di una tabella in HTML, è consigliabile assegnare un bordo. In questo modo è possibile capire meglio come sono disposte le righe e le colonne. A tal fine, si assegna all'elemento iniziale <table> la combinazione attributo-valore border="1". (Ricordate che l'attributo border in HTML non dovrebbe essere utilizzato. Invece, si dovrebbe fare riferimento alle relative proprietà CSS. Ma ne parleremo più avanti).

<table border="1">
…
</table>

Procedete con la definizione delle righe della tabella. Questo avviene tramite l'elemento tr.

<table border="1">
   <tr></tr>
</table>

Tuttavia, ciò non porta ancora all'output desiderato. Il passo successivo consiste nel definire le colonne. Questo avviene nuovamente mediante l'elemento td.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Ora potete definire il primo contenuto della tabella. Questo va definito tra <td> e </td>.

<table border="1">
   <tr>
      <td>Contenuto 1</td>
   </tr>
</table>

Solo ora ha senso controllare il risultato nel browser.

Certo, al momento la tabella non è particolarmente spettacolare, visto che attualmente è composta solo da una cella della tabella. Ora potete inserire una colonna aggiuntiva. Questo viene fatto nuovamente tramite un elemento td. Assicuratevi di definire questo elemento all'interno dell'elemento tr.

<table border="1">
   <tr>
      <td>Contenuto 1</td>
      <td>Contenuto 2</td>
   </tr>
</table>

Di nuovo, controllate il risultato.

Per aggiungere righe aggiuntive alla tabella, basta creare un altro elemento tr, in cui vengono quindi definiti di nuovo gli elementi td desiderati.

Ecco un esempio illustrativo:

<table border="1">
   <tr>
      <td>Contenuto 1</td>
      <td>Contenuto 2</td>
   </tr>
   <tr>
      <td>Contenuto 3</td>
      <td>Contenuto 4</td>
   </tr>
</table>

Controllando il risultato nel browser, si ottiene quanto segue:





In questo modo è possibile creare tabelle complesse.

Impostare l'Intestazione, il Corpo e il Piede

Le tabelle possono essere suddivise in aree logiche, ovvero un'intestazione, una o più aree di dati e un piè di pagina. L'esempio seguente mostra come ciò può essere realizzato:

<table border="1">
  <thead>
    <tr>
      <th&gt>Partenza</th&gt>
      <th&gt>Arrivo</th&gt>
      <th&gt>Binario</th&gt>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlino</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlino</td>
      <td>Hamburgo</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Monaco</td>
      <td>Berlino</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

E qui c'è il risultato nel browser:





La suddivisione nelle aree menzionate non ha evidentemente alcun effetto visibile. Naturalmente sorge una domanda: perché sforzarsi di definire queste aree? Ci sono due buoni motivi:

• Utilizzando CSS, le aree possono essere formattate in modi diversi a seconda delle esigenze.

• I browser possono ripetere l'intestazione e il piè di pagina di una tabella su ogni pagina durante la stampa delle tabelle lunghe.

L'intestazione della tabella è introdotta tramite thead. Si susseguono quindi le righe della tabella che appartengono all'intestazione. Non dimenticate di chiudere nuovamente l'area dell'intestazione con </thead>.

Se la tabella deve avere un piè di pagina, questo deve essere definito obbligatoriamente prima del corpo della tabella. Il piè di pagina è introdotto da <tfoot>. A ciò possono seguire nuovamente una o più righe appartenenti all'area del piè di pagina. Si chiude il piè di pagina con </tfoot>.

Si definisce il corpo effettivo della tabella all'interno dell'elemento tbody. Questo tbody può essere presente più volte. Si chiude un corpo della tabella ogni volta con </tbody>.

Perché utilizzare ad esempio più volte l'elemento tbody in una tabella? Un bel esempio potrebbe essere la tabella della Bundesliga di calcio. In una tale tabella ci sono solitamente più aree.

• Campione

• Partecipanti alla Champions League

• Qualificati per la Champions League

• Partecipanti all'Europa League

• La fascia grigia

• Posto di retrocessione

• Squadre retrocesse

Per ciascuna di queste aree potreste inserire un proprio elemento tbody e quindi formattarle in modo diverso tramite CSS.

Definizione anticipata delle colonne

Come la tabella viene visualizzata dai browser dipende naturalmente principalmente dal numero di righe e colonne disponibili. Il processo di visualizzazione di una tabella non è affatto semplice per il browser. Infatti, un browser deve sempre prima leggere l'intera tabella prima di poterla visualizzare. Specialmente con tabelle molto estese, questo può naturalmente richiedere del tempo. Tuttavia, si può evitare questo problema comunicando direttamente al browser quante colonne compongono effettivamente la tabella.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titolo</th>
     <th>Prezzo</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Una breve storia di tutto</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Il colgroup inizia la definizione anticipata delle colonne. Notare che la maggior parte degli attributi disponibili nelle versioni precedenti di HTML per colgroup non sono più ammessi in HTML5. Ora è consentito solo l'attributo span. Questo attributo richiede il numero di colonne contenute nella tabella come valore.

L'elemento colgroup si trova subito dopo il tag iniziale <table>. Le colonne sono poi definite dai singoli elementi col.

Nel caso si utilizzi colgroup, ci sono in generale due opzioni:

• Con attributo span

• Senza attributo span

Se non si utilizza l'attributo span, all'interno dell'elemento colgroup bisogna definire un elemento col per ogni colonna su cui il gruppo di colonne si estende. Si noti che col è un elemento autonomo.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titolo</th>
     <th>Prezzo</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Una breve storia di tutto</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Esiste anche una forma ibrida.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Questo è particolarmente utile quando si desidera definire separatamente una colonna, ma si desidera raggruppare le altre in un insieme.