Ogni singolo elemento della tabella corrisponde a uno specifico tag: titolo <caption>, intestazione <thead>, corpo <tbody>, piede <tfoot>.
E’ bene sottolineare come queste quattro parti di una tabella HTML servono a definire lo schema concettuale di questo importante strumento che, lo ricordiamo, serve principalmente per rappresentare dati aggregati, ma non sono obbligatorie. Quindi nella definizione di una tabella si possono omettere le parti non presenti (spesso il titolo e il piede).
Inoltre si potrebbero omettere anche i tag che definiscono le singole parti della tabella senza che questo causi alcune problema (ad esempio si potrebbe non specificare il tag <tbody> per raggruppare le righe del corpo), però dal mio punto di vista per una maggiore correttezza formale della pagina HTML sarebbe bene non farlo.

Ecco di seguito un esempio completo per meglio comprendere quanto detto finora:

<table width="75%" border="1" bordercolor="#666666">
<caption><div align="center"><b>ACME s.r.l.</b><br>Fatturato 1° semestre 2009</div></caption>
<thead>
<tr>
<th width="20%">Mesi</th>
<th width="40%">Vendita al dettaglio</th>
<th width="40%">Vendita all'ingrosso</th>
</tr>
</thead>
<tbody>
<tr><td>gennaio</td><td>3.000</td><td>9.000</td></tr>
<tr><td>febbraio</td><td>2.000</td><td>8.600</td></tr>
<tr><td>marzo</td><td>2.500</td><td>7.500</td></tr>
<tr><td>aprile</td><td>1.900</td><td>7.950</td></tr>
<tr><td>maggio</td><td>2.200</td><td>8.200</td></tr>
<tr><td>giugno</td><td>3.200</td><td>9.500</td></tr>
</tbody>
<tfoot>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td><b>Totale</b></td>
<td>14.800</td>
<td>50.750</td>
</tr>
</tfoot>
</table>

che viene visualizzato così:

N.B. Il testo inserito all’interno di un <th> (l’equivalente del <td> per le righe presenti nell’intestazione <thead>) viene visualizzato centrato all’interno della cella e in grassetto.

N.B. Alcuni browser non visualizzano il bordo -se presente con l’attributo border della table- delle celle che non hanno alcun contenuto. In questo caso l’inconveniente si risolve inserendo uno spazio vuoto con il carattere speciale &nbsp;. Si utilizza questo carattere e non il normale spazio (quindi il codice <td>&nbsp;</td> anziché <td> </td>) perchè alcuni browser ignorano lo spazio inserito tramite la barra della tastiera.

I tag necessari per creare una tabella sono:

• <table> – apre la tabella
• <tr> – indica l’apertura di una riga
• <td> – indica l’apertura di una colonna

L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio:

<table border="1">
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>

Viene visualizzato così:

Possiamo specificare la larghezza e l’altezza delle tabelle tramite gli attributi width e height che possono essere indicati per tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi due attributi può essere specificato in maniera fissa, cioè in pixel (basta indicare un numero intero), oppure in percentuale (in questo caso al numero deve seguire il simbolo “%”). Nel caso di misure in percentuale la dimensione si adatta secondo lo spazio a disposizione.

<table width="300" height="200" border="1">
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>

Viene visualizzato così:

Oppure:

<table width="75%" border="1">
<tr>
<td width="25%">prima cella</td>
<td width="75%">seconda cella</td>
</tr>
<tr>
<td width="25%">terza cella</td>
<td width="75%">quarta cella</td>
</tr>
</table>

che viene visualizzato così:

N.B. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser.

In pratica, ogni colore è identificato da tre numeri: il primo indica la “quantità” di rosso presente nel colore in questione, il secondo la “quantità” di verde”, il terzo la “quantità” di blu.

La “quantità” di ciascun colore di base viene espresso con un numero compreso tra 0 (componente non presente) e 255 (componente dominante).
Ad esempio il nero corrisponde ai valori RGB 0, 0, 0, il bianco invece corrisponde ai valori RGB 255, 255, 255.

Nel linguaggio HTML i valori RGB vengono indicati utilizzando la codifica esadecimale anziché quello decimale. In questo caso i numeri si basano su un sistema in base 16 che comprende le cifre da 0 a 9 e le lettere da A a F, con la A che “vale” 10 e la F che “vale” 15.

I colori possono essere usati in molti tag del codice HTML, ma il valore, oltre che essere racchiuso fra doppie virgolette, deve essere preceduto dal segno #.

Per velocità di scrittura all’interno del codice HTML è possibile specificare il nome di alcuni colori al posto del loro valore esadecimale, ma non tutti i browser supportano tali nomi, quindi, in caso di dubbio, è preferibile utilizzare il valore esadecimale.

I colori “sicuri” sono quelli visualizzabili da tutti i browser e che non sono modificati quando il sistema del navigatore che visita il sito ha una modalità a 256 colori (clicca qui per visualizzare la tavolozza universale valida per tutti i browser). Sebbene l’ipotesi che un navigatore abbia una modalità a 256 colori sia molto remota nei limiti del possibile è sempre meglio utilizzare colori “sicuri” all’interno del proprio sito.

1. Elementi di blocco: sono gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo (es. i paragrafi con il tag <p> o il tag <div>)
2. Elementi inline: sono gli elementi che – non andando a capo – determinano l’aspetto del testo o possono essere integrati con esso (es. le immagini con il tag <img>)
3. Liste: numerate, o non numerate

N.B. E’ buona regola non aprire un elemento di blocco se tutti gli elementi inline non sono stati chiusi.

<b><p>paragrafo in grassetto</p></b>


L’esempio precedente sebbene produca il risultato che tutti ci aspettiamo è formalmente errato e dovrebbe essere scritto nel modo seguente:

<p><b>paragrafo in grassetto</b></p>

N.B. E’ buona regola non aprire un blocco con <p> o <div> all’interno di un altro blocco aperto con il tag <p>

<p>testo dentro il paragrafo
    <p>paragrafo dentro il paragrafo</p>
</p>

Anche ques’esempio sebbene produca il risultato che tutti ci aspettiamo è formalmente errato.

Altre regole di buona scrittura:
- utilizzare dei caratteri di tabulazione per aumentare la leggibilità del codice;
- scrivere tutto in minuscolo per compatibilità con l’XHTML.

I tag che si devono provare per questa lezione sono quasi tutti legati alla formattazione del testo e il loro uso è assolutamente intuitivo (<b> <i> <u> <strike> <sup> <sub> <h1>..<h6>).

I tag <p> <div> (con l’attributo align che ha come valori “center”, “left”, “right” e “justify”) permettono di raggruppare il testo in blocchi separati, <br> forza un a capo, <hr> disegna una linea orizzontale.

I tag per la formattazione del testo sono importantissimi, perchè all’interno di una pagina web basta una piccola modifica per creare un contrasto visivo che attira l’occhio. Esistono strumenti tipografici consolidati che permettono di dare risalto ad un blocco di testo, ma è importante non utilizzarli in modo errato.

Infatti, se mettiamo tutto il testo in grassetto, niente risalterà e otterremo soltanto un effetto sgradito alla maggior parte dei lettori; analizziamo adesso in dettaglio i tag conosciuti:

Corsivo – Il corsivo attira l’occhio perché è in contrasto con la forma del corpo del testo; va utilizzato come convenzione o all’interno del testo per parole o frasi accentuate o straniere. Poiché la leggibilità del testo in corsivo è inferiore rispetto al testo normale della stessa misure, è preferibile non usarlo per lunghi blocchi di testo.

Grassetto – Il testo in grassetto conferisce risalto essendo in contrasto con il colore del testo normale. Il grassetto è abbastanza leggibile su schermo, ma grossi blocchi di testo in grassetto mancano di contrasto e si perde quindi il risalto.

Sottolineato – Il testo sottolineato, risale ai tempi delle macchine da scrivere, quando il corsivo e il grassetto non erano disponibili, e risulta troppo pesante interferendo con la forma delle lettere. Inoltre la sottolineatura nei documenti web ha un significato funzionale, infatti indica un collegamento ipertestuale. Quindi se usiamo testo sottolineato in una pagina web, questa sarà sicuramente confuso con un collegamento ipertestuale.

Testo colorato – Anche l’uso del colore, come la sottolineatura ha un significato funzionale speciale nei documenti web. È sconsigliabile usare testo colorato all’interno del testo, perché i lettori penseranno che si tratta di un collegamento ipertestuale. Tuttavia il testo colorato funziona bene per dare risalto ai titoli di sezione e di paragrafo. Scegliete colori scuri in contrasto con lo sfondo della pagina e non utilizzate il blu e il viola che sono i colori predefiniti dei collegamenti web.

Lettere maiuscole – Il testo in lettere maiuscole è uno dei metodi più comuni e meno efficaci per aggiungere risalto tipografico. L’occhio legge soprattutto riconoscendo la forma generale delle parole, non analizzando tutte le lettere e riunendole in una parola riconoscibile. Le parole o i titoli tutti maiuscoli formano rettangoli monotoni che non catturano l’occhio. Per leggere un blocco di testo tutto maiuscolo è necessario leggere il testo lettera per lettera, il che si traduce in una lettura scomoda e lenta.

Spaziatura e rientri – Uno dei modi più efficaci e sottili per variare il contrasto visivo e l’importanza relativa di una porzione di testo consiste semplicemente nell’isolarla o trattarla in modo diverso dal testo circostante. Se desiderate evidenziare le intestazioni principali di una pagina senza ingrandirle, aggiungete uno spazio sopra e sotto ogni intestazione per separarla dalle altre intestazioni e dal testo successivo. Anche i rientri rappresentano un altro modo efficace per distinguere porzioni di testo come gli elenchi puntati, le citazioni o il testo di esempio.

Comunque in generale l’importante è cercare di non colpire troppo agli occhi.

I tag vanno inseriti tra parentesi uncinate (minore e maggiore) e sono caratterizzati da un nome e da eventuali attributi. Ovviamente poiché stiamo parlando di marcatori (elementi che racchiudono un contenuto soggetto a determinate “regole”) bisogna indicare anche la chiusura del tag. Questa operazione viene effettuata con uno “/” prima del nome del tag stesso.

L’inserimento di un tag sarà quindi del tipo:
<tag nome_attributo_1=”valore_1″ nome_attributo_2=”valore_2″>contenuto</tag>

N.B. Quando si chiude un tag gli attributi non vanno ripetuti. Inoltre, poichè alcuni particolari tag non “contengono contenuto” non hanno neanche chiusura.

L’organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: Word Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio, e – da un certo punto in poi – l’HTML si è evoluto in XHTML.

L’aver rilasciato diverse versioni vuol dire che nel tempo, oltre a diverse regole di buona scrittura delle pagine web, sono stati inseriti nuovi tag o nuovi attributi, mentre l’uso di altri è stato deprecato (es. il tag <font>).

N.B. Un tag il cui uso è deprecato può essere ancora usato sebbene questo sia fortemente sconsigliato. A prescindere dall’uso o meno che se ne farà in ogni caso si tratta di un argomento che un webmaster non può ignorare.

Una caratteristica importante del codice HTML è che i tag possono essere annidati l’uno dentro l’altro. Così facendo è possibile attribuire delle formattazioni successive al contenuto che vogliamo visualizzare.

<b>tutto in grassetto - <i>in corsivo fino a qui</i> - ancora in grassetto</b>

L’esempio precedente all’interno del browser verrà visualizzato così:

tutto in grassetto – in corsivo fino a qui – ancora in grassetto