Disegnare tabelle in HTML

Per disegnare una tabella in HTML bisogna ricorrere a tre diversi elementi: table (tabella), tr(Table Row) e td (Table Data).
L’elemento table (<table> … </table>) è il contenitore generale. Gli attributi impostati a questo livello modificano le caratteristiche generali di tutta la tabella. L’elemento tr (<tr> … </tr) delimita ogni riga della tabella ed è il contenitore delle celle. I suoi attributi modificano le caratteristiche generali di tutta la tabella ed è il contenitore delle celle. I suoi attributi modificano le caratteristiche della specifica riga. L’elemento td (<td>…</td> ) rappresenta infine la singola cella. Come si definisce dalla presenza di un elemento che crea le righe e dall’assenza di un elemento per le colonne, la tabella in HTML va pensata e disegnata per righe orrizzontali. Ecco un primo esempio di tabella molto semplice, senza attributi:


<table>
<tr>
<td>Prima</td>
<td>Seconda</td>
<td>Terza</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sesta</td>
</tr>
<tr>
<td>Settima</td>
<td>Ottava</td>
<td>Nona</td>
</tr>
</table>

Una tabella cosi definita può servire solo a mettere in colonne alcune parole. Aggiungendo un attributo border al tag table si vede qualcosa in più:


<table border="2">
<tr>
<td>Prima</td>
<td>Seconda</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sesta</td>
</tr>
<tr>
<td>Settima</td>
<td>Ottava</td>
<td>Nona</td>
</tr>
</table>

La presenza di un bordo rende visibile le varie celle e fa visualizzare la griglia.
Gli attributi del tag table, tuttavia,sono diversi, e consentono di operare varie personalizzazioni:
  • width e height definiscono rispettivamente la larghezza e l’altezza della tabella. Possono assumere un valore in pixel oppure un valore percentuale rispetto allo spazio in cui la tabella è inserita;
  • border lo spessore in pixel dei bordi della tabella,interni ed esterni. Di default il bordo è zero;
  • align permette di definire l’allineamento della tabella rispetto alla pagina o all’area in cui è inserita. Può assumere i valori center (centrato),left(a sinistra) e right (a destra);
  • bgcolor consente di definire il colore di sfondo di tutta la tabella. Può assumere come valore un qualsiasi codice di colore valido;
  • bordercolor consente di definire il colore del bordo della tabella;
  • cellspacing permette di definire la distanza in pixel tra una cella el’altra;
  • cellpadding permette di definire la distanza in pixel tra il bordo interno della cella e il suo contenuto;
  • background consente di inserire il percorso di un’immagine da utilizzare come sfondo della tabella. L’immagine viene caricata nelle sue dimensioni originali e ripetuta fino a riempire tutto lo sfondo della tabella. Quando si usano le immagini di sfondo bisogna assicurarsi che non disturbano la lettura dei contenuti.
Ecco alcuni esempi di applicazione degli attributi delle tabelle:

<table width="50%" height="5" border="2" align="left" cellpadding="2" cellspacing="3" bordercolor="#000000" bgcolor="#cccccc">
<tr>
<td>Pirma</td>
<td>Seconda</td>
<td>Terza</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sesta</td>
</tr>
<tr>
<td>Settima</td>
<td>Ottava</td>
<td>Nona</td>
</tr>
</table>
<p> </p><p> </p><p> </p>

<table width="400" height="5" border="2" align="center" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr>
<td>Prima</td>
<td>Seconda</td>
<td>Terza</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sesta;/td>
</tr>
<tr>
<td>Settima>
<td>Ottava>
<td> Nona </td>
</tr>
</table>
<p> </p>

<table width="400" height="5" border="2" align="right" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr>
<td>Prima</td>
<td>Seconda</td>
<td>Terza</td>
</tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sesta;/td>
</tr>
<tr>
<td>Settima>
<td>Ottava>
<td> Nona </td>
</tr>
</table>
<p> </p>

Gli attributi del tag <tr>, che imposta ogni riga, sono i seguenti:

  • align permette di modificare l’allineamento orrizzontale del contenuto delle celle comprese nella rig. Può assumere il valore left (a sinistra), center (centrato) e right (destra);
  • valign consente di modificare l’allineamento verticale del contenuto delle celle comprese nella riga. Può assumere i valori top (in alto), middle (centrato verticalmente), bottom (in basso) e baseline (linea di base);
  • bgcolor permette di impostare il colore di sfondo delle celle comprese nella riga. Accetta come valore un qualsiasi codice di colore valido;
  • bordercolor consente di impostare il colore del bordo interno delle celle comprese nella riga. Accetta come valore qualsiasi codice di colore valido.

Gli attributi del tag <td> sono i seguenti:

  • align permette di modificare l’allineamento orizzontale del contenuto della cella. Può assumere come valori left (a sinistra), center (centrato), right (a destra);
  • valign consente di modificare l’allineamento verticale del contenuto della cella. Può assumere i valori top (in alto), middle (centrato verticalmente), bottom (in basso) e baseline (linea di base);
  • bgcolor permette di impostare il colore di sfondo delle celle e accetta come valore un qualsasi codice di colore valido. Il colore di sfondo della tabella riempie anche gli spazi tra una cella e l’altra, se presenti;
  • bordercolor permette di impostare il colore del bordo interno della cella;
  • background permette di specificare il percorso o l’URL di un’immagine di sfondo per la singola cella. Va usato con molta cautela poichè è supportato solo da Internet Explorer;
  • height permette di impostare l’altezza della cella, espressa in pixel oppure con un valore percentuale rispetto alle dimensioni totali della tabella. Va considerato che l’altezza di tutte le celle di una riga si allinea automaticamente all’altezza della cella più alta, indipendentemente dall’impostazione di questo attributo per le altre celle della riga;
  • width permette di impostare la larghezza della cella,espressa in pixel o con un valore percentuale, alla largheza totale della tabella. Bisogna considerare che questo valore può non essere correttamente se all’interno della cella è presente un contenuto più ampio del valore impostato, o se la larghezza totale della tabellanon coincide con la somma delle larghezze delle varie colonne. Anche in questo caso, inoltre, tutte le celle di una colonna assumono la larghezza della cella più larga, indipendenmente dall’impostazione dell’attributo per le altre celle.
Si noti che ‘HTML funziona in modo gerarchico: nel caso di due attributi contrastanti (per esempio un colore di sfondo impostato a livello di tabella diverso da quello a livello di cella), viene considerato l’attributo del tag più interno, ossia vicino all’elemento. Questo permette di avere, per esempio, una tabella tutta blu una sola cella rossa,o una tabella con il testo tutto a sinistra e una sola cella centrata…
Nell’utilizzo delle tabelle le pontenzialità si scoprono sperimentando. In generale,bisogna pensare alle tabelle non soltanto come griglie in cui inserire i dati, ma come strumenti di impaginazione, per dividere lo spazio a disposizione in un’area visivamente organizzata. Il successivo esempio di codice crea una tabella e delle celle. La larghezza della tabella è impostata al 100% : questo significa che tenderà a riempire tutto lo schermo. Ridimensionandolo la finestra del browser le dimensioni della tabella verranno modificate per adattarsi di conseguenza. In questo caso, però, la tabella ha impostate anche le due larghezze delle colonne, ognuna al 50%: riducendosi la larghezza complessiva della tabella le celle diminuiranno proporzionalmente fino a quando la colonna di destra raggiungerà la larghezza dell’immagine contenuta nell’ultima cella in basso a sinistra, dopo di che non potrà più restringersi. A questo punto verrà ridotta soltanto la colonna di sinistra, quindi verrà meno la proporzione di uguaglianza tra le due colonne.


<table width="100%" border="0" cellpadding="4" cellpacing="5">
<tr bgcolor="#CCCCCC">
<td width="50%">
<p align="center>Lorem ipsum dolor</p></td>
<td width="50%">
<p align="center><strong>Orci erat,
viverra ac, pretium ut, placerat sed, nibh.</strong></p></td>
</tr>
<tr bgcolor="#CCCCCC">
<td width="50%" height="120" valign="bottom">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Ut
orci erat, viverra ac, pretium ut, placerat sed, nibh.
</td>
<td width="50%" height="120" align="right"
valign="top">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Ut orci erat, viverra
ac, pretium ut, placerat sed,nibh. </td>
</tr>
<tr bgcolor="#CCCCCC">
<td width="50%" valign="bottom">
<p align="right">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Ut orci erat, viverra
ac, pretium ut, placerat sed, nibhh.</p></td>
<td width="50%">
<im src="nomeimmagine.jpg" width="430" height="237">
</td>
</tr>
</table>

Le tabelle prese in considerazione finora contenevano in ogni riga lo stesso numero di celle. Potrebbe essere utile però, realizzare tabelle più complesse.
Le tabelle di questo tipo, che possono essere anche molto più complesse, possono essere create utilizzando due attributi aggiuntivi all’interno del tag <td>: colspan e rowspan. Colspan indica il numero di colonne occupate dalla cella, mentre rowspan definisce il numero di righe.
Ecco il codice:


<table width="80%" border="2" bordercolor="#000000">
<tr>
<td colspan="2" align="center">due celle unite in linea</td>
<td>cella</td>
<td rowspan="2" align="center">due celle unite in
verticale</td>
</tr>
<tr>
<td width="25%" align="center">cella</td>
<td width="25%" align="center">cella</td>
<td width="25%" align="center">cella</td>
</tr>
<tr>
<td align="center">cella</td>
<td colspan="2" align="center">due celle unite in linea</td>
6lt;td align="centee>cella</td>
</tr>
<tr>
<td colspan="3" align="center">tre celle unite in linea</td>
<td align="center">cella</td>
</tr>
</table>

2 pensieri su “Disegnare tabelle in HTML

  1. ma debbo aprire il blocco note o qualche altro documento

  2. ciao antonella,basta anche il blocco note per disegnare una tabella in html,questi naturalmente sono solo degli esempi,ma puoi anche usare un editor visuale dreawever cose del genere,ciao grazie di aver scritto….

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...