Abbiamo già visto che le tabelle svolgono un ruolo essenziale per costruire il layout di una pagina Web. Inserendo brani di testo e immagini entro le celle di una tabella invisibile, possiamo stabilirne le posizioni e gli allineamenti. Un impiego particolare di questa funzione consiste nell'usare la tabella come elemento di unione per più immagini oppure per gli elementi frazionati di una singola immagine più grande.
Il primo caso è il più comune e lo troviamo nella gran parte dei siti. Prendiamo ad esempio il sito italiano www.film.it che parla di novità cinematografiche. Se scomponiamo la sua home page, vediamo che contiene una tabella che salda tra loro testo, fotografie, pulsanti navigazione e testatine grafiche (vedi la figura).
Il secondo caso adotta invece una tecnica di frammentazione dell'immagine sviluppata dai progettisti Web per sveltire il caricamento di un'immagine di grandi dimensioni e per usare la stessa immagine come strumento di navigazione. L'operazione richiede una certa dimestichezza con i programmi di grafica e prevede la suddivisione di un'immagine in tanti riquadri di dimensione variabile, che saranno uniti mediante una tabella così da ricomporre visivamente l'immagine originale senza lasciar trasparire la tabella sottostante.
Poiché ogni singola porzione dell'immagine sarà contenuta in una cella indipendente e sarà un'immagine autonoma, diventerà possibile abbinarle un collegamento ipertestuale così da creare un sistema di navigazione grafico (vedi l'esempio). Potremo anche animare alcune porzioni dell'immagine, creando un GIF animato per quel particolare frammento, e creare i cosiddetti rollover, vale a dire cambiamento d'immagine al passaggio del mouse. La frammentazione (slicing) di un im'immagine comporta notevoli benefici anche nel regolare il peso della pagina. Supponiamo infatti di avere una figura che contenga ampi spazi a tinta unita con magari porzioni di testo al loro interno. Realizzare il tutto in grafica vorrebbe dire appesantire la pagina e complicare qualsiasi successiva modifica del testo. Mediante la frammentazione, invece, possiamo rimpiazzare con un semplice sfondo HTML tutte le porzioni dell'immagine che hanno una tinta unita e che magari contengono testo. Oggi esistono numerosi programmi con strumenti dedicati alla frammentazione automatica delle immagini, in particolare Photoshop, ImageReady e Fireworks MX. È sufficiente posizionare le guide di taglio per identificare le varie porzioni e in alcuni casi è anche possibile assegnare, già dall'interno del programma di grafica, l'effetto rollover e generare automaticamente la tabella HTML finale.
Per vedere un esemedi l'esempio nelle due figure che seguono sotto oppure il file sul CD).
Tabella di layout per unire le immagini
In questa pagina presa dal Web (www.film.it) vediamo cerchiate in rosso e in verde tutte le immagini che sono state unite mediante la tabella invisibile che regge l'intera pagina. Nella parte alta di navigazione, il riquadro nero, le immagini si mescolano con lo sfondo della cella sembrando un tutt'uno.

Suddivisione di una foto
Qui vediamo Fireworks MX usato per suddividere una foto in porzioni che andranno a riempire altrettante celle di una tabella che viene generata automaticamente dal programma.

Tabella che unisce la foto
Ecco la tabella visualizzata all'interno di Dreamweaver MX. Notiamo le celle e le singole immagini che vi sono contenute. A ciascuna possiamo assegnare un link ipertestuale così da creare un elemento grafico di navigazione. Per vedere il file originale di esempio rimandiamo alla pagina Ninkon_5000 sul CD.

Risultato finale
Una volta visualizzata nel browser, l'immagine sembra completamente ricomposta e la tabella sottostante sarà invisibile. Tuttavia se porteremo il cursore sulle diverse porzioni vedremo che contengono link ipertestuali attivi.

Slicing ottimizzato
Ottimizziamo l'immagine già elaborata prima, definendo altre due porzioni di taglio (slicing) che trasformiamo in aree HTML visto che hanno uno sfondo bianco tinta unita che può essere facilmente riprodotto mediante i colori di sfondo della tabella. Durante la fase di esportazione, Fireworks MX genera automaticamente la tabella finale.

Tabella finale
Nella tabella finale vediamo che sono presenti due celle vuote con sfondo bianco che sostituiscono due porzioni dell'immagine contenute nella versione precedente. Da 64 a 52

|