-
mariuskunk
| .
|
|
|
|
Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.
E' difficile?
All'inizio costruire le tabelle in HTML può sembrare complicato, ma se mantieni la calma e fai attenzione, in effetti è esattamente logico - proprio come ogni altra cosa in HTML.
Esempio 1:
CODICE <table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
Sul browser sarà così:
| Cella 1 | Cella 2 | | Cella 3 | Cella 4 |
Che differenza c'è tra <tr> e <td>?
Come vedrai dall'esempio sopra, questo probabilmente è l'esempio HTML più complicato che abbiamo fatto finora. Scomponiamolo e spieghiamo i diversi tag:
Vengono usati 3 elementi diversi per costruire una tabella:
il tag di apertura iniziano e terminano la tabella. Logico.
<tr> è la sigla delle parole inglesi "table row" (cioè, riga della tabella) e inizia e termina una riga orizzontale. Ancora logico.
<td> è la sigla delle parole inglesi "table data" (cioè, dati della tabella). Questo tag inizia e termina ogni cella della riga della tua tabella. Tutto semplice e logico.
Questo è quello che succede nell'Esempio 1: la tabella inizia con un , seguito da un, che indica l'inizio di una nuova riga. In ogni riga vengono inserite due celle:| Cella 1 | eCella 2 | . In seguito la riga viene chiusa con un e immeditamente dopo inizia una nuova riga. Anche la nuova riga contiene due celle. La tabella viene chiusa con .
Solo per chiarire: le righe sono le linee orizzontali di celle e le colonne sono linee verticali di celle:
Esempio 2:
CODICE <table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
<tr>
<td>Cella 5</td>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td>
</tr>
<tr>
<td>Cella 9</td>
<td>Cella 10</td>
<td>Cella 11</td>
<td>Cella 12</td>
</tr>
</table>
Sul browser si vedrà così:
| Cella 1 | Cella 2 | Cella 3 | Cella 4 | | Cella 5 | Cella 6 | Cella 7 | Cella 8 | | Cella 9 | Cella 10 | Cella 11 | Cella 12 |
Ci sono degli attributi?
Naturalmente ci sono degli attributi. Per esempio, l'attributo border viene usato per specificare lo spessore del bordo intorno alla tua tabella:
Esempio 3:
CODICE <table border="1">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
Sul browser si vedrà così:
| Cella 1 | Cella 2 | | Cella 3 | Cella 4 |
Lo spessore del bordo viene specificato in pixel (Vedi la lezione 9)
Così come si fa con le immagini, puoi definire la larghezza della tabella in pixel - o, alternativamente, in percentuale dello schermo:
Esempio 4:
CODICE <table border="1" width="30%">
Questo esempio visualizzerà sul tuo browser una tabella di larghezza 30% dello schermo. Provalo da sola.
Altri attributi?
Ci sono tanti attributi per le tabelle. Qui ne vedi altri due:
align: specifica l'allineamento orizzontale di tutta la tabella, in una riga o in una singola cella. Per esempio, sinistro, centro o destro.
valign: specifica l'allineamento verticale del contenuto di una cella. Per esempio, alto, mezzo o basso.
Esempio 5:
CODICE <td align="right" valign="top">Cell 1</td>
Cosa posso inserire nella mia tabella?
In teoria nella tabella puoi inserire qualsiasi cosa: testo, link, imagini ...MA, le tabelle sono destinate alla presentazione di dati tabellari (cioè dati che possono essere significativamente presentati in righe e colonne), quindi evita di mettere nelle tabelle oggetti, semplicemente perchè vuoi che siano posizionatii uno accanto all'altro.
Tempo fa su Internet - cioè pochi anni fa - le tabelle venivano spesso usate come strumento per il layout. Ma se vuoi avere il controllo di come verranno presentati testo e immagini c'è un modo molto più interessante per farlo (suggerimento: CSS). Ne parleremo di più in seguito.
Adesso metti in pratica quello che hai appena imparato e progetta tabelle di diverse misure, con diversi attributi e contenuto. Questo ti dovrebbe tenere impegnato per un po' di ore.
|
|
|
| .
|
0 replies since 28/1/2012, 17:59 54 views
.
.
