In HTML una tabella è formata da una serie di celle suddivise in righe e in colonne:
| prima cella | seconda cella | terza cella |
| quarta cella | quinta cella | sesta cella |
| settima cella | ottava cella | nona cella |
| decima cella | undicesima cella | dodicesima cella |
Le celle possono contenere qualsiasi cosa: testo, liste, immagini e persino altre tabelle.
Le tabelle sono state create per visualizzare dati in forma tabellare, come per esempio una tabella che riporti la popolazione italiana censita in diversi anni. Tuttavia il loro uso si è diffuso anche allo scopo di disporre ordinatamente il testo e le immagini su una pagina web. Tale risultato si ottiene mediante l'uso di tabelle nascoste, invisibili all'utente. Attualmente la disposizione degli elementi della pagina per mezzo delle tabelle nascoste è deprecato, in quanto è stato sostituito dal posizionamento con i fogli stile.
Una tabella è delimitata da un tag <table> di apertura e un tag </table> di chiusura. All'interno di tali tag, si trovano le righe <tr> e le celle <td> che compongono la tabella.
Si consideri l'esempio seguente:
<tr> <!-- INIZIO PRIMA RIGA -->
<td> Prima cella della prima riga </td>
<td> Seconda cella della prima riga </td>
<td> Terza cella
della prima riga </td>
</tr> <!-- FINE PRIMA RIGA -->
<tr> <!-- INIZIO SECONDA RIGA -->
<td> Prima cella della seconda riga </td>
<td> Seconda cella della seconda riga </td>
<td> Terza cella
della terza riga </td>
</tr> <!-- FINE SECONDA RIGA -->
</table>
che produce la seguente visualizzazione nel browser
| Prima cella della prima riga | Seconda cella della prima riga | Terza cella della prima riga |
| Prima cella della seconda riga | Seconda cella della seconda riga | Terza cella della terza riga |
L'attributo border="1" serve per visualizzare il bordo della tabella. Gli unici valori possibili per questo attributo sono 1 (presenza di bordo) oppure 0 (nessun bordo - equivale ad omettere l'attributo border).
Attualmente in HTML 5 l'attributo border è deprecato e deve essere sostituito con gli stili. Tuttavia per i nostri semplici esempi il suo uso è comodo, in quanto non ci obbliga a specificare nel dettaglio il bordo di ogni singola cella della tabella.
Si osservi che
- l'elemento <table> contiene una serie di elementi <tr> (righe)
- gli elementi <tr> contengono una serie di elementi <td> (celle)
- gli elementi <td> contengono il contenuto delle celle (testo, immagini etc.)
- l'elemento <tr> può stare solo dentro a <table> e l'elemento <td> può stare solo dentro <tr>
- il numero di celle su ogni riga è uguale
Per centrare il testo all'interno di una cella bisogna usare l'attributo style="text-align:center" che abbiamo già incontrato per centrare i paragrafi e le immagini.
Si osservi questo esempio (in cui, per comodità, abbiamo usato l'attributo border attualmente deprecato):
<table border="1">
<tr> <!-- INIZIO PRIMA RIGA -->
<td style="text-align:center" > Al centro! </td>
<td> Seconda cella della prima riga </td>
<td> Terza cella
della prima riga </td>
</tr> <!-- FINE PRIMA RIGA -->
<tr> <!-- INIZIO SECONDA RIGA -->
<td> Prima cella della seconda riga </td>
<td> Seconda cella della seconda riga </td>
<td> Terza cella della terza riga </td>
</tr> <!-- FINE SECONDA RIGA -->
</table>
che produce la seguente visualizzazione:
| Al centro! | Seconda cella della prima riga | Terza cella della prima riga |
| Prima cella della seconda riga | Seconda cella della seconda riga | Terza cella della terza riga |
VIDEO
LEZIONE:
Creare tabelle in HTML
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
