Table Tutor- Lezione 4

Table Tutor- Lezione 4

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

<TABLE BORDER=3>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick

Larry Curly Mo

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>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick

Larry Curly Mo

<TABLE BORDER=3> <TR BGCOLOR="#FF9999"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR BGCOLOR="#99CCCC"> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Tom Rick Larry Curly Mo <TABLE BORDER=3> <TR BGCOLOR="#FFCCFF"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD BGCOLOR="#FF0000">Larry</TD> <TD>Curly</TD> <TD BGCOLOR="#3366FF">Mo</TD> </TR> </TABLE> Ed Tom Rick Larry Curly Mo Ecco qui una mappa pratica che di solito utilizzo per scegliere i colori dello sfondo. 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, ma mi diverte giocherellare coi colori per cui vi passo un esempio: <TABLE BORDER=3 BGCOLOR="#FF6633"> <TR BGCOLOR="#009900"> <TD BGCOLOR="#9999FF">Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Tom Rick Larry Curly Mo 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 640x480. Molti utilizzano 800x600 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) and ROWSPAN (espansione su righe). Immaginimo che Ed se la prenda a morte con Tom e lo scaraventi fuori dalla tabella. Ecco quello che succede in questo caso. <TABLE BORDER=3> <TR> <TD>Ed</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Rick Larry Curly Mo Viene lasciato un buco e Rick scivola di lato a riempire il vuoto. Se però vogliamo che Ed si impossessi dello spazio che prima era di Tom, allora dobbiamo utilizzare l'attributo COLSPAN. <TABLE BORDER=3> <TR> <TD COLSPAN=2>Ed</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Rick Larry Curly Mo Tanto per rimarcare quello che ho detto poc'anzi, riguardo al browser che cerca di visualizzare al meglio le pagine, facciamo che Ed si allarga per due colonne ma rimettiamo Tom al suo posto. Abbiamo deliberatamente introdotto una discrepanza tanto per vedere che cosa si inventa il browser. <TABLE BORDER=3> <TR> <TD COLSPAN=2>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Tom Rick Larry Curly Mo C'è da sottolineare questo: Il browser ha una sua idea molto personale nel cercare di interpretare al meglio quello che gli si dice. E' molto importante specificare il più possibile ed essere sicuri che non vi siano discrepanze, altrimenti potresti avere delle sorprese. Per quanti errori tu possa mettere in un testo HTML non c'è verso che tu faccia piantare il browser di chi scarica le tue pagine, per cui non preoccuparti di questo (sfortunatamente non si può dire lo stesso per il JAVA e per le GIF animate). OK... risbattiamo fuori il povero Tom. <TABLE BORDER=3> <TR> <TD COLSPAN=2>Ed</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Rick Larry Curly Mo Rick, spaventato, se ne va pure lui. Ed si prende il suo spazio e si piazza nel bel mezzo della cella tanto per mostrare di che pasta è fatto. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER>Ed</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Larry Curly Mo 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>Ed</STRONG></TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Larry Curly Mo Possiamo piazzare un link alla mia Home Page. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER> <A HREF="http://junior.apk.net/~jbarta/">Ed</A></TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Larry Curly Mo Ora ripuliamo la tabella e rimettiamoci Tom e Rick per passare al <ROWSPAN>. <TABLE BORDER=3> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Tom Rick Larry Curly Mo Come forse puoi immaginare, <ROWSPAN> funziona esattamente come <COLSPAN> tranne per il fatto che si espandono righe invece che colonne. (E' più semplice della Cosmogonia Sumera non trovi?) Se leviamo Larry e assegnamo ad Ed la sua parte di spazio, otteniamo questo. <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Tom Rick Curly Mo Naturalmete è anche possibile utilizzare una combinazione dei due attributi. <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Ed</TD> <TD COLSPAN=2>Tom</TD> </TR> <TR> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE> Ed Tom Curly Mo <--BACK NEXT--> Introduzione Lezione 1 Lezione 2 Lezione 3 Lezione 4 Lezione 5 Lezione 6 Lezione 7 Indice