HTML/Tabelle

Il tag usato per la creazione delle tabelle è <table> in coppia con il suo tag di chiusura </table>. È tra questi due tag che si devono inserire colonne e righe, le prime si creano attraverso il tag <tr> (Table Row); le seconde, attraverso il tag <td> (Table Data). È importante notare come è sempre una riga ad includere una colonna: cioè il tag <td> è sempre incluso in un tag <tr>.

Se si vuole indicare al browser di creare una cella che faccia da intestazione ad una colonna (solitamente renderizzata con il contenuto in neretto e centrato) si può usare il tag <th> (Table Header), ideato appositamente per questo tipo di funzione.

Anche se essi sono attualmente deprecati in quanto contengono informazioni di stile, è possibile aggiungere a colonne e righe attributi quali align (alignment) e valign (Vertical alignment); per modificare la dimensione semantica di una colonna si utilizza l'attributo colspan (Column span), mentre rowspan è l'equivalente per le righe.

• align: allinea il testo della cella a destra (right), sinistra (left) e centrato (center).
• valign: allinea il testo della cella sul margine superiore (top), sul margine inferiore (bottom), e in mezzo (middle)
• colspan: quante colonne pesa una singola <td>
• rowspan: quante righe pesa una singola <td>

Le celle e le colonne supportano anche gli attributi height e width.

Vi è un tag interessante che è <caption> che permette di aggiungere una descrizione alla tabella (una sorta di didascalia) che supporta l'attributo align pertanto si posizionerà o sopra o sotto la tabella secondo il valore specificato in tale attributo.

Attributi delle tabelle

Attributo	Significato
border	Stabilisce la dimensione del bordo esterno alla tabella. Il valore di default è 0 (ossia assente).
width	Stabilisce la larghezza della tabella
height	Stabilisce la lunghezza della tabella
cellspacing	Stabilisce la spaziatura tra le celle
cellpadding	Stabilisce la spaziatura tra il testo e la cella che lo contiene

Esempio di tabella:

 <table width="100%" height="30%" cellspacing="4" cellpadding="2" border="1">
    <caption align="bottom">Questa è una tabella di esempio</caption>
   <tr>
     <th>Intestazione 1</th>
     <th>Intestazione 2</th>
   </tr>
   <tr>
     <td align="center">Cella 1 colonna 1 testo centrato</td>
     <td valign="top">Cella 1 colonna 2 allineata sopra</td>
   </tr>
   <tr>
     <td>Cella 2 colonna 1</td>
     <td width="70%">Cella 2 colonna 2</td>
   </tr>
  </table>

Il risultato sarà:

Questa è una tabella di esempio

Intestazione 1	Intestazione 2
Cella 1 colonna 1 testo centrato	Cella 1 colonna 2 allineata sopra
Cella 2 colonna 1	Cella 2 colonna 2

Tabelle preformattate

È possibile creare delle tabelle anche attraverso spazi e senza l'ausilio del tag <table>: ci si può servire infatti del tag <pre> che, come abbiamo detto in precedenza, dirà all'interprete di visualizzare il testo così com'è stato scritto all'interno del documento HTML, pertanto con i medesimi spazi e a capo.
L'inconveniente è che il testo all'interno del tag <pre> verrà visualizzato monospaziato, scelta esteticamente non ottimale, e sarà inoltre meno gestibile in termini di modifiche successive. Ecco un esempio di tabella preformattata:

<pre>
        +------------------+-----------------+------------------+
        | prima colonna    | <b>seconda colonna</b> | terza colonna    |
        +------------------+-----------------+------------------+
        | primo elemento   | primo elemento  | primo elemento   |
        | secondo elemento | secondo elemento| secondo elemento |
        +------------------+-----------------+------------------+
</pre>

Il risultato sarà:

       +------------------+-----------------+------------------+
       | prima colonna    | seconda colonna | terza colonna    |
       +------------------+-----------------+------------------+
       | primo elemento   | primo elemento  | primo elemento   |
       | secondo elemento | secondo elemento| secondo elemento |
       +------------------+-----------------+------------------+