I tag table, tr, td

Le tabelle sono definite con il tag <table>..</table>
Una tabella è divisa in righe definite dal tag <tr>..</tr> (tr sta per table row)
Ogni riga è divisa in celle definite dal tag <td>..</td> (td sta per table data cioè il contenuto di una cella).
Il numero delle celle all'interno di una riga determina il numero delle colonne.
All'interno di una cella (cioè nel tag td) si può mettere del testo, immagini, link e altri oggetti.
Non si può mettere nulla nei tag table e tr.

Codice

Output

Note

<table>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
</table>

A1	A2
B1	B2

Tabella 2*2 (2 righe, 2 colonne)

Uno stile per le tabelle: il bordo

La proprietà di stile border può essere utilizzata con il selettore td se si vuole mettere un bordo ad ogni cella, con tr per un bordo delle righe o con table per mettere un bordo all'intera tabella.

I valori del bordo indicano lo spessore (in pixel), il tipo (solido, punteggiato, tratteggiato ..) ed il colore.

Tutte le proprietà vanno inserite nel tag style nella sezione head.
Ecco degli esempi di bordo applicato alle celle:

Codice css	Output	Codice css	Output
td {border: 2px dotted red}	A1	td {border: 1px solid bleu}	B1
td {border: 1px dashed green}	C1	td {border: 2px solid brown}	D1
td {border: 2px solid brown}	E1	td {border: 2px dashed violet}	F1

Facciamo spazio: il padding

La proprietà padding definisce lo spazio tra il bordo e il contenuto di una cella.

Codice css	Output
td { border: 1px solid blue; padding: 5x}	A1	A2
td { border: 1px solid brown; padding: 30px}	B1	B2

Il colore di sfondo

Si può attribuire la proprietà background-color, già vista con altri selettori, anche agli elementi di una tabella.

Codice css

Output

table {background-color:yellow;}
td {padding: 30px; border: 1px solid brown}

A1	A2
B1	B2

Una tabella può diventare un album di foto!

Codice

Output

<table>
<tr>
<td><img src="image/album1.jpg" /></td>
<td><img src="image/album2.jpg" /></td>
</tr>
<tr>
<td><img src="image/album3.jpg" /></td>
<td><img src="image/album4.jpg" /></td>
</tr>
</table>

Metti una tabella nella tua pagina web!

Apri il tuo file index.htm (oppure un altro file come pagina2.htm, o pagina3.htm ...) e inserisci una tabella.
Ricorda: ogni tag tr è una riga, ogni tag td è una cella!

<html>
<head>
<style>
....
table {border:...;background-color:...;  }
td {border: ...; padding: ...; }
</style>
</head>

<body>
..........
 <table>
 <tr>
   <td> inserisci qualcosa qui! (Testo, immagine, link!)</td>
   <td> inserisci qualcosa qui!</td>
 </tr>
<table>

</body>
</html>

Dai uno stile alla tabella con le proprietà border, padding e background-color.

Salva il file nel tuo sito locale e osserva il risultato.

Carica (upload) il file nel tuo sito remoto.

Scrivi un messaggio nel forum "Tabelle" per avvertire che la tua pagina con tabella è pronta!

HTML

UNITA' 8 TABELLE

I tag table, tr, td

Uno stile per le tabelle: il bordo

Facciamo spazio: il padding

Il colore di sfondo

Una tabella può diventare un album di foto!

Metti una tabella nella tua pagina web!