Tutor- Lezione 4

Leviamoci di torno CELLPADDING e CELLSPACING e torniamo alla nostra vecchia e semplice tabella.

<TABLE BORDER=3>

<TR>
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pippo Pluto Quo

Una caratteristica dei browser più recenti è la possibilità di specificare un colore di sfondo per ciascuna cella, riga o per l'intera tabella. Per fare questo si usa l'attributo BGCOLOR proprio come nel tag <BODY>.

<TABLE BORDER=3 BGCOLOR="#FFCC66">

<TR>
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pippo Pluto Quo

<TABLE BORDER=3>

<TR BGCOLOR="#FF9999">
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR BGCOLOR="#99CCCC">
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pippo Pluto Quo

<TABLE BORDER=3>

<TR BGCOLOR="#FFCCFF">
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD BGCOLOR="#FF0000">Pippo</TD>
<TD>Pluto</TD>
<TD BGCOLOR="#3366FF">Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pippo Pluto Quo

Un'ultima cosa riguardo ai colori di sfondo nelle tabelle... un colore di sfondo di cella (<TD>) copre quello di riga (<TR>) e uno di riga (<TR>) copre uno di tabella (<TABLE>). Non credo servano ulteriori spiegazioni, per cui vi passo un esempio:

<TABLE BORDER=3 BGCOLOR="#FF6633">

<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pippo Pluto Quo

Dammi un minuto adesso per spiegare una cosa. Un browser cerca di interpretare nel migliore modo possibile le istruzioni che riceve. Se c'è qualcosa che non è stato specificato in un modo o nell'altro, la maggior parte dei browser cercherà di visualizzare la pagina nella maniera che ritiene migliore. E' quindi estremamente importante che un autore di pagine HTML specifichi esplicitamente più cose possibile, specialmente gli attributi cruciali perchè le pagine vengano visualizzate correttamente. E' anche molto importante visualizzare il proprio lavoro utilizzando i browser più comuni. Dal momento che moltissimi usano Netscape, questo è un buon punto di partenza. In ogni caso tieni anche una copia di qualche altro browser per essere sicuro che anche con quelli le tue pagine abbiano un buon aspetto.
Un'altra cosa da tenere di conto è la risoluzione dello schermo. Io lavoro con un 800x600. Molti utilizzano 480x600 e alcuni anche 1024x768. Questa semplice differenza può interferire drammaticamente con l'aspetto delle tue pagine. C'è un piccolo programmino che si chiama QuickRes che è in grado di modificare la risoluzione dello schermo semplicemente schiacciando un tasto. Non sarebbe una cattiva idea visualizzare le proprie pagine con diverse risoluzioni.

Adesso giocheremo con COLSPAN (eSPANsione su COLonne) e ROWSPAN (eSPANsione su ROWs=righe). Immaginimo che Tom non voglia Mauro e lo scaraventi fuori dalla tabella. Ecco quello che succede in questo caso.

<TABLE BORDER=3>

<TR>
<TD>Tom</TD>
<TD>Paolok</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Paolo
Pippo Pluto Quo
Viene lasciato un buco e Paolo scivola di lato a riempire il vuoto.

Se però vogliamo che Tom si impossessi dello spazio che prima era di Mauro, allora dobbiamo utilizzare l'attributo COLSPAN.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Tom</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Paolo
Pippo Pluto Quo

Tanto per rimarcare quello che ho detto poc'anzi, riguardo al browser che cerca di visualizzare al meglio le pagine, facciamo che Tom si allarga per due colonne ma rimettiamo Mauro al suo posto. Abbiamo deliberatamente introdotto una discrepanza tanto per vedere che cosa si inventa il browser.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pippo Pluto Quo
C'è da sottolineare questo:

OK... rimettiamo ancora fuori dal gioco il povero Mauro.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Tom</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Paolo
Pippo Pluto Quo

Paolo se ne va pure lui. Tom si prende il suo spazio e si piazza nel bel mezzo della cella.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>Tom</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom
Pippo Pluto Quo

Naturalmente all'interno di una cella è possibile utilizzare tutti gli altri codici HTML. Ad esempio possiamo mettere Ed in grassetto <STRONG>.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>Tom</STRONG></TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Ed
Pippo Pluto Quo

Possiamo piazzare un link

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://www.fauser.edu">Tom</A></TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom
Pippo Pluto Quo

Ora ripuliamo la tabella e rimettiamoci Mauro e Paolo per passare al <ROWSPAN>.

<TABLE BORDER=3>

<TR>
<TD>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pippo</TD>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pippo Pluto Quo

Come forse puoi immaginare, <ROWSPAN> funziona esattamente come <COLSPAN> tranne per il fatto che si espandono righe invece che colonne.
Se leviamo Pippo e assegnamo ad Tom la sua parte di spazio, otteniamo questo.

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Tom</TD>
<TD>Mauro</TD>
<TD>Paolo</TD>
</TR>

<TR>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro Paolo
Pluto Quo

Naturalmete è anche possibile utilizzare una combinazione dei due attributi.

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Tom</TD>
<TD COLSPAN=2>Mauro</TD>
</TR>

<TR>
<TD>Pluto</TD>
<TD>Quo</TD>
</TR>

</TABLE>

Tom Mauro
Pluto Quo

<--BACK        SEGUIMI-->
Lezione 1 Lezione 2 Lezione 3 Lezione 5 Lezione 6 Lezione 7