Le tabelle si basano sull'impiego di un numero ristretto di tag, i principali sono i seguenti: <table> per aprire e chiudere la tabella, <tr> per aprire e chiudere le righe che la compongono e <td> per delimitare le celle che contengono le informazioni all'interno di ciascuna riga.
Le regole da osservare nella costruzione di qualsiasi tabella HTML sono le seguenti:
- Ogni tabella deve contenere almeno una riga con almeno una cella.
- Il numero di celle deve essere costante nelle diverse righe a meno di costruire celle che coprano più righe o più colonne.
- La più grande delle celle di una colonna determina la larghezza dell'intera colonna.
- La larghezza di una riga corrisponde alla larghezza delle singole celle oppure alla larghezza definita per la tabella. Nel caso in cui la larghezza cumulativa delle varie celle superasse quella della tabella avrebbe precedenza su quest'ultima.
- La larghezza di una tabella o di una cella/colonna può essere espressa in termini assoluti (pixel) oppure relativi (percentuale) alla dimensione della finestra del browser.
- La presenza di un'immagine vincola le dimensioni di una cella e della relativa tabella e ha la precedenza su qualsiasi dimensione indicata precedentemente.
Passiamo ora a costruire una semplice tabella composta di due righe e tre colonne partendo dalla pagina vergine realizzata nell'esercizio "Creare una pagina vergine".
Passo 1
Prendiamo il codice della pagina vergine originale, togliamo i commenti (meta) che non c'interessano, lasciando lo stretto indispensabile, dopo di che inseriamo tra i due tag <body></body> il tag d'inizio della nostra tabella <table> e aggiungiamo tre attributi: summary="Tabella di prova a larghezza fissa" per fornire un'indicazione testuale a chi non può vedere la tabella, width="300" per indicare che si tratta di una tabella a larghezza fissa (300 pixel), border="1" per fare in modo che il bordo sia visibile e abbia una larghezza di 1 pixel.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una tabella semplice</title>
</head>
<body>
<table summary="Tabella di prova a larghezza fissa" width="300" border="1">
</body>
</html>
Passo 2
Aggiungiamo la prima riga e inseriamo tre celle utilizzando i tag <tr> (table row) e <td> (table data). Inseriamo in ciascuna cella un testo che la identifichi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una tabella semplice</title>
</head>
<body>
<table summary="Tabella di prova a larghezza fissa" width="300" border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
</tr>
</body>
</html>
Passo 3
Adesso aggiungiamo una seconda riga con altre tre celle, ciascuna con il proprio testo di contenuto e chiudiamo la tabella:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una tabella semplice</title>
</head>
<body>
<table summary="Tabella di prova a larghezza fissa" width="300" border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td>Cella 5</td>
<td>Cella 6</td>
</tr>
</table>
</body>
</html>
Passo 4
A questo punto la tabella è completa. Selezioniamo le due celle centrali e definiamo un colore di sfondo utilizzando l'attributo bgcolor="#ffff00" che definisce il colore di background e lo imposta a un valore esadecimale corrispondente al giallo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una tabella semplice</title>
</head>
<body>
<table summary="Tabella di prova a larghezza fissa" width="300" border="1">
<tr>
<td>Cella 1</td>
<td bgcolor="#ffff00">Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td bgcolor="#ffff00">Cella 5</td>
<td>Cella 6</td>
</tr>
</table>
</body>
</html>
Passo 5
Eseguiamo un'anteprima della tabella creata sinora:
|