Estensione di celle su più righe e colonne
Quando una tabella viene utilizzata come elemento di layout, diventa necessario riprodurre forme grafiche complicate che non possono essere ricondotte alla struttura a scacchiera classica e che richiedono la costruzione di celle che si estendono in orizzontale e in verticale.
Fase 1: estendere una cella in verticale
partendo dalla tabella già costruita nell'articolo precedente (Dimensionare tabelle e celle miste) trasformiamo la colonna di sinistra in modo che estenda per l'intera lunghezza della tabella. Allo scopo utilizziamo il tag <td rowspan="2">
<table width="75%" border="1">
<tr>
<td rowspan="2" width="120"><strong>Cella estesa in verticale</strong></td>
<td>Cosa succede invece se nella nostra tabella fluida volessimo estendere una cella? </td>
<td>Cosa succede invece se nella nostra tabella fluida volessimo estendere una cella? </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="5"><img src="pixel.gif" alt="spaziatore" width="114" height="1"></td>
<td></td>
<td></td>
</tr>
</table>
Notiamo che la prima colonna ora contiene una sola cella che abbraccia 2 righe (la terza riga viene lasciata nella sua forma originale perché serve unicamente da supporto per bloccare la dimensione della colonna e non ospiterà mai contenuto). Per far funzionare la tabella così modificata abbiamo anche dovuto togliere una cella dalla seconda riga della prima colonna, che si fonde con la cella della prima riga:

Proviamo a restringere la finestra e notiamo la colonna estesa in lunghezza conserva le caratteristiche originali della cella su cui è stata costruita, in questo caso una cella a dimensione fissa:

Regola: è possile estendere una cella in verticale a coprire più righe mediante l'attributo rowspan, mantenendo invariato il funzionamento degli attributi della cella originale.
Fase 2: estendere una cella in orizzontale
selezioniamo la prima cella della seconda riga (che nella tabella viene raffigurata come seconda poiché la prima cella originale della seconda riga si è già fusa con la prima cella della prima riga. Aggiungiamo l'attributo "colspan="2" per fare in modo che si estenda anche alla colonna adiacente e si fonda con la cella contigua che dovremo eliminare:
<table width="75%" border="1">
<tr>
<td rowspan="2" width="120"><strong>Cella estesa in verticale</strong></td>
<td>Cosa succede invece se nella nostra tabella fluida volessimo estendere una cella? </td>
<td>Cosa succede invece se nella nostra tabella fluida volessimo estendere una cella? </td>
</tr>
<tr>
<td colspan="2" align="center"><strong>Cella estesa in orizzontale</strong></td>
</tr>
<tr>
<td height="5"><img src="pixel.gif" alt="spaziatore" width="114" height="1"></td>
<td></td>
<td></td>
</tr>
</table>
Abbiamo usato anche l'attributo align="center" per centrare la scritta nella cella estesa in orizzontale. Notate che adesso la seconda riga della tabella contiene una sola cella delle tre originali. La prima si è fusa con la prima cella della prima riga per produrre l'estensione verticale e la seconda e la terza si sono fuse assieme per produrre l'estensione orizzontale:

Anche la cella estensa in orizzontale conserva le proprie caratteristiche, in questo caso quelle di una cella a dimensione variabile:

Regola: è possile estendere una cella in orizzontale a coprire più colonne mediante l'attributo colspan, mantenendo invariato il funzionamento degli attributi della cella originale se questa è a dimensione variabile.
Fase 3: particolarità di una cella estesa in orizzontale
proviamo ora a togliere il testo dalla seconda cella della prima riga:

Vediamo che le due colonne unite dalla cella estesa in orizzontale si comportano come un'unità autonoma all'interno della tabella, ridimensionandosi reciprocamente. Proviamo ora a inserire un'immagine nella cella da cui abbiamo tolto il testo:

Vediamo che le dimensioni delle due colonne si assestano di nuovo per fare spazio al nuovo inserimento, pur mantenendo una relazione reciproca a prescindere dalle dimensioni complessive della tabella. Questo genere di soluzione si presta ad esempio per l'impaginazione di articoli che possano contenere immagini a corredo a cui destinare spazio variabile, spazio che si può anche azzerare quando l'immagine è assente.
Regola: le colonne unite da una cella estesa in orizzontale assume un comportamento reciprocamente coordinato all'interno della tabella.
Fase 4: vincoli dimensionali
Avrete notato che, quanlunque sia l'operazione compiuta, la colonna di sinistra, composta dalla cella estesa in verticale, ha comunque mantenuto le proprie dimensioni, fissate sia dall'impostazione width="120" nella cella stessa sia dalla presenza di un'immagine spaziatrice alla base della colonna stessa. Se tuttavia proviamo a controllare direttamente le dimensioni delle colonne racchiuse dalla cella estesa in orizzontale, il controllo svanisce:
<table width="75%" border="1">
<tr>
<td rowspan="2" width="120"><strong>Cella estesa in verticale</strong></td>
<td> </td>
<td width="50%">Abbiamo impostato la larghezza di questa cella al 50% del totale della tabella</td>
</tr>
<tr>
<td colspan="2" align="center"><strong>Cella estesa in orizzontale</strong></td>
</tr>
<tr>
<td height="5"><img src="pixel.gif" alt="spaziatore" width="114" height="1"></td>
<td></td>
<td></td>
</tr>
</table>
abbiamo impostato la seconda delle due celle racchiuse in modo che occupi il 50% dello spazio complessivo della tabella, notiamo perciò che assume tale dimensione influenzando anche le altre e lascia che la prima colonna si estenda oltre le sue dimensioni originali.

Riportiamola alla sua larghezza originale impostando una dimensione fissa per la cella estesa in orizzontale:
<table width="75%" border="1">
<tr>
<td rowspan="2" width="120"><strong>Cella estesa in verticale</strong></td>
<td><p> </p>
<p> </p></td>
<td width="50%">Abbiamo impostato la larghezza di questa cella al 50% del totale della tabella</td>
</tr>
<tr>
<td colspan="2" align="center" width="200"><strong>Cella estesa in orizzontale a 200 pixel</strong></td>
</tr>
<tr>
<td height="5"><img src="pixel.gif" alt="spaziatore" width="114" height="1"></td>
<td></td>
<td></td>
</tr>
</table
Abbiamo riportato la prima colonna all'ordine bloccandola alla dimensione scelta e lasciando che le due colonne fluide (la seconda e la terza) siano libere di espandersi a coprire l'area utile:

La presenza del valore fisso a 200 pixel nella cella estesa in orizzontale non vincola in alcun modo le due celle superiori che si espangono e si contraggono liberamente a variare della dimensione della finestra.
Regola: le celle espanse costituiscono una sorta di livello superiore alle celle singole e si influenzano tra loro, ma risentono dell'impostazione dimensionale assegnata alle colonne/righe che racchiudono rispetto alla quale hanno priorità inferiore, così come le indicazioni di tabella hanno priorità inferiore rispetto alle indicazioni fornite a livello di singola cella.
Per vedere in dettaglio i vari esempi, guardate il file Dimensionare una tabella complessa>
|