09 Tabelle

Per creare tabelle vengono utilizzati tre tag, uno crea la tabella (<table>...</table>), uno le righe (<tr>...</tr>) e uno per creare celle nelle righe (<td>...</td>).

Vediamo come creare una tabella di due righe e due colonne:

<table>
<tr>
<td>1</td>
<td>2</td> 
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Il risultato sarà il seguente:

Il tag <table> ammette i seguenti attributi:

width per definire la larghezza della tabella (può essere impostata in pixel o percentuale. se impostiamo 100% la tabella sarà larga come la pagina occupando tutto lo spazio a disposizione),

border per definire il bordo della tabella (di default è zero),

cellpadding per definire la spaziatura tra il contenuto e il margine delle celle,

cellspacing per definire la distanza tra le celle della tabella.

bgcolor per impostare il colore di sfondo della tabella.

E' anche possibile unire celle sia in verticale che in orizzontale. Per fare questo vengono utilizzati due differenti tag:

colspan per unire celle in orizzontale,

rowspan per unire celle in verticale.

Vediamo due esempi:

Codice esempio 1

<table>
<tr>
<td colspan=”2”>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>

Risultato esempio 1

Codice esempio 2

<table>
<tr>
<td rowspan=”2”>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>

Risultato esempio 2

Il tag <td>...</td> ammette i seguenti attributi:

align per allineare in testo a sinistra, al centro o a destra (valori left, center e right),

width per specificare la larghezza della cella in pixel o percentuale,

valign per allineare il testo in verticale all'interno della cella, in alto, al centro e in basso (valori top, middle e bottom)

bgcolor per impostare il colore di sfondo alla cella.

Quest'ultimo attributo (bgcolor) può essere utilizzato anche con il tag <tr> per impostare un colore di sfondo della riga.