Tabelle - esempi di composizione


Tag costituenti la tabella
Tabella come appare

Descrizione

<table width="179" height="82" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
   
   
Esempio di tabella 2 x 2 con bordo e dimensioni assolute (e fisse) 179 x 82.
Il tag <table.... indica inizio e fine della sequenza di tag che definiscono una tabella.
I tag <tr indicano l'apertura di una nuova riga e i tag <td> definiscono il numero delle colonne su ogni riga.
La regola generale impone di procedere per righe.
L'indicazione &nbsp; indica la presenza di uno spazio, che in questo caso è un contenuto fittizio, atto a rendere evidente la struttura della tabella.
<table width="80%" height="50%" border="1" align="center">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
   
   

La tabella a lato ha invece sia l'altezza (considerata da certi browser), che la larghezza, in valore percentuale rispetto alla larghezza e altezza dell'elemento contenitore.

<table width="179" height="82" border="1" align="center" bordercolorlight="#00CC00" bordercolordark="#006600">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
   
   

E' possibile tramite i due attributi bordercolorlight e bordercolordark definire un colore del bordo diverso rispetto al default (bianco e grigio)

<table width="179" height="82" border="1" align="center">
<tr bgcolor="#0099CC">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
   
   
Qui è stato aggiunto un colore di fondo ad una riga della tabella (si noti l'attributo bgcolor=... sul tag <tr...)
<table width="179" height="82" border="1" align="center">
<tr bgcolor="#0099CC">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="#00CC00">&nbsp;</td>
<td bgcolor="#FF3300">&nbsp;</td>
</tr>
</table>
   
   
In questo caso oltre a definire un colore per un intera riga si è anche indicato dei colori (diversi) per delle singole celle della tabella (attributo bgcolor=... del tag <td.....)
<table width="179" height="82" border="1" align="center">
<tr bgcolor="#0099CC">
<td>Primo</td>
<td>Secondo</td>
</tr>
<tr>
<td bgcolor="#00CC00">Terzo</td>
<td bgcolor="#FF3300">Quarto</td>
</tr>
</table>
Primo Secondo
Terzo Quarto

Mantenendo la configurazione della tabella invariata sono stati inserite delle brevi scritte (in carattere di default).
I contenuti vanno inseriti tra i tag <td...>....</td>.
Le dimensioni delle singole colonne,se non diversamente definito sono proporzionate alla lunghezza del contenuto di ogni cella di una certa colonna.

<table width="179" height="82" border="0" align="center">
<tr bgcolor="#0099CC">
<td>Primo</td>
<td>Secondo</td>
</tr>
<tr>
<td bgcolor="#00CC00">Terzo</td>
<td bgcolor="#FF3300">Quarto</td>
</tr>
</table>
Primo Secondo
Terzo Quarto

Qui è stato tolto il bordo alla tabella regolando l'attributo border = 0.
La tabella è visibile solo grazie ai colori di fondo differenziati.

<table width="179" height="82" border="0" align="center" bgcolor="#FFFF00">
<tr bordercolor="#FFFF00" bgcolor="#0099CC">
<td>Primo</td>
<td>Secondo</td>
</tr>
<tr bordercolor="#FFFF00">
<td bgcolor="#00CC00">Terzo</td>
<td bgcolor="#FF3300">Quarto</td>
</tr>
</table>
Primo Secondo
Terzo Quarto
Anche senza bordo la tabella può assumere sul bordo un colore diverso da quello di fondo della pagina.
In questo caso con l'attributo bgcolor=... nel tag <table ....
Primo Secondo
Terzo Quarto
In realtà bgcolor= come attributo del tag <table... setta un colore di fondo per tutta la tabella. Questo colore si estende alla parte (in questo caso non in evidenza) del bordo.
Inserendo dei colori come fondo delle celle il colore di fondo risulta il colore visibile solo sui bordi (privi di effetto rilievo)
(vd. esempio precedente)
<table width="179" height="82" border="0" align="center" bgcolor="#FFFF00" >
<tr bordercolor="#FF0000" bgcolor="#FF6600">
<td width="50%">Primo</td>
<td width="50%">Secondo</td>
</tr>
<tr bgcolor="#FF6600">
<td>Terzo</td>
<td>Quarto</td>
</tr>
</table>
Primo Secondo
Terzo Quarto
E' possibile imporre una larghezza equamente suddivisa a tutte le colonne, tramite una opportuna indicazione assoluta o in percentuale (come in questo caso) . Si noti l'attributo width= aggiunto su <td...
<table width="179" height="82" border="0" align="center" bgcolor="#FFFF00" >
<tr bordercolor="#FF0000" bgcolor="#FF6600">
<td width="50%">Primo</td>
<td width="50%">Secondo</td>
</tr>
<tr bgcolor="#FF6600">
<td height="80%">Terzo</td>
<td>Quarto</td>
</tr>
</table>
Primo Secondo
Terzo Quarto
La stessa cosa è possibile impostarla sulle righe. L'attributo height influenza in questo caso l'altezza della specifica riga. Nello specifico esempio si è applicata una indicazione percentuale (la seconda riga ha altezza 80% e, di conseguenza, la prima 20%).

Le indicazioni percentuali si basano nel loro calcolo sulla larghezza effettiva attuale della tabella.

N.B. Se esistono contenuti che non possono essere compressi in modo ulteriore, le percentuali di ripartizione indicate vengono rispettate solo "fin dove è possibile".
<table width="179" height="82" border="0" align="center" bgcolor="#FFFF00" >
<tr bgcolor="#FF6600" align="center">
<td width="50%">Primo</td>
<td width="50%">Secondo</td>
</tr>
<tr bgcolor="#FF6600" align="center">
<td height="80%">Terzo</td>
<td>Quarto</td>
</tr>
</table>
Primo Secondo
Terzo Quarto
E' possibile ovviamente dare ai contenuti delle celle l'allineamento voluto.
<table width="179" height="82" border="0" align="center" bgcolor="#FFFF00" >
<tr bgcolor="#FF6600">
<td width="50%" align="left">Primo</td>
<td width="50%" align="right">Secondo</td>
</tr>
<tr bgcolor="#FF6600">
<td height="80%" align="center">Terzo</td>
<td align="right">Quarto</td>
</tr>
</table>
Primo Secondo
Terzo Quarto
O anche con allineamenti differenziati cella per cella...
<table width="179" height="82" border="0" align="center" bgcolor="#FFFF00" >
<tr bgcolor="#FF6600">
<td width="50%" align="left"><font face="Arial"> Primo</font></td>
<td width="50%" align="right"><font face="Courier">Secondo</font></td>
</tr>
<tr bgcolor="#FF6600">
<td height="80%" align="center"><font face="System">Terzo</font></td>
<td align="right"><font face="Times New Roman">Quarto</font></td>
</tr>
</table>
Primo Secondo
Terzo Quarto

Naturalmente è possibile variare il font nelle varie celle...

E possibile definire, per ogni cella, le formattazioni grassetto, sottolineato, corsivo ecc. o cambiare dimensione o colore ai caratteri.

<table width="179" height="82" border="1" align="center">
<tr bgcolor="#0099CC">
<td rowspan="2">Primo</td>
<td>Secondo</td>
</tr>
<tr>
<!-- <td bgcolor="#00CC00">Terzo</td> -->
<td bgcolor="#FF3300">Quarto</td>
</tr>
</table>
Primo Secondo
Quarto



Primo Secondo
Terzo

E' possibile fondere due (o più) celle sulla stessa colonna o sulla stessa riga.

La regole da seguire sono:

  1. L'indicazione colspan o rowspan deve apparire sulla prima cella delle celle della riga o della colonna che si vuole fondere
    (quindi le caratteristiche della "cella fusione" vengono ereditate dalla prima cella)
  2. devono essere rimossi tutti gli elementi in sovrannumero della fusione (ossia tutte le celle della stessa riga o colonna).
<table width="179" height="82" border="1" align="center">
<tr bgcolor="#0099CC">
<td>Primo</td>
<td>Secondo</td>
</tr>
<tr>
<td bgcolor="#00CC00" colspan="2">Terzo</td>
<!-- <td bgcolor="#FF3300">Quarto</td> -->
</tr>
</table>