Nei due post precedenti si è trattato della formattazione di tabelle semplici, mentre adesso vedremo come si crea una tabella complessa con aggiunta di bordi.
Una delle prima cose che si notano riguardo alla tabella, oltre al grassetto applicato automaticamente ai titoli della tabella, è la formattazione delle celle. Il contenuto di ogni cella della tabella è centrato. I tag <TH> e <TD> supportano entrambi l’attributo ALIGN (allineamento), che controlla la giustificazione dei dati, inserendo semplicemente l’attributo nel tag. Per esempio, per usare l’allineamento a sinistra si userà <TH ALIGN=”LEFT”>, mentre per l’allineamento a destra si userà <TD ALIGN=”RIGHT”>. Come altri attributi HTML, è necessario racchiudere gli attributi della tabella tra le doppie virgolette (“”).
E’ inoltre possibile controllare la larghezza e l’altezza delle colonne delle righe usando gli attributi COLSPAN e ROWSPAN. Per esempio il codice <TH ROWSPAN=3> crea un titolo altro tre righe, mentre <TD COLSPAN=2> crea una cella larga due colonne.
Attraverso gli attributi sopra elencati è possibile creare una tabella complessa ed è inoltre possibile renderla provvista di bordi attraverso l’uso dell’attributo BORDER del tag <TABLE>. Dunque per bordare una tabella si dovrà usare il tag <TABLE BORDER>.

Ecco il codice sorgente di una tabella complessa con bordi, come quelle da me fatte nei post sulle giornate calcistiche:

<TABLE BORDER>
<TR>
<TH ALIGN=”LEFT”>Catania</TH>
<TH>Roma</TH>
<TH COLSPAN=”25″ ALIGN=”RIGHT”>1-1</TH>
</TR>
<TR>
<TH ALIGN=”LEFT”>Parma</TH>
<TH>Inter</TH>
<TH COLSPAN=”25″ ALIGN=”RIGHT”>0-2</TH>
</TR>
<TR>
<TH ALIGN=”LEFT”>Sampdoria</TH>
<TH>Juventus</TH>
<TH COLSPAN=”25″ ALIGN=”RIGHT”>3-3</TH>
</TR>
</TABLE>

Per facilitare la comprensione ecco un video tutorial sull’argomento:

[daily ID=http://dailymotion.alice.it/video/x5uh01_tutorial09_tech]

Per scaricare e vedere il video con una risoluzione migliore cliccate qui.