Le tabelle 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: <table> Sul browser sarà così: Cella 1 Cella 2 Che differenza c'è tra 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 <table> e il tag di chiusura iniziano e terminano la tabella. Logico. è 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 <table>, seguito da un, che indica l'inizio di una nuova riga. In ogni riga vengono inserite due celle: e. 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:
Cella 1 Cella 2 Cella 1 e Cella 2 formano una riga. Cella 1 e Cella 3 formano una colonna. Nell'esempio sopra la tabella è formata da due righe e due colonne. Tuttavia, una tabella può avere un numero illimitato di righe e di colonne. Esempio 2: <table> <td>cella 5</td> <td>cella 6</td> <td>cella 7</td> <td>cella 8</td> <td>cella 9</td> <td>cella 10</td> <td>cella 11</td> <td>cella 12</td> Cella 1 Cella 2 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:
Cella 1 Cella 2 Lo spessore del bordo viene specificato in pixel Così come si fa con le immagini, puoi definire la larghezza della tabella in pixel - o, alternativamente, in percentuale dello schermo: Esempio 4: <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: <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. I due attributi colspan e rowspan vengono usati quando vuoi creare delle tabelle elaborate. Colspan è l'abbreviazione delle parole inglesi "column span" (cioè, colonne accoppiate). Colspan viene usato nel tag <td> per specificare quante colonne dovranno essere unite insieme: Esempio 1: <td colspan="3">cella 1</td> Cella 1 Cella 2 FIssando colspan a "3", la cella nella prima riga occupa tre colonne. Se invece avessimo fissato colspan a "2", la cella sarebbe stata formata solo da due colonne e sarebbe stato necessario inserire una cella aggiuntiva nella prima riga in modo da fare combaciare le due righe. E cosa mi dici di rowspan? Come potrai già immaginare, rowspan specifica quante righe dovrebbero essere comprese in una cella: Esempio 3: <td rowspan="3">cella 1</td>
Cella 1 Cella 2 Cella 3 Cella 4 Nell'esempio sopra rowspan è fissato a "3" nella Cella 1. Questo significa che la cella sarà formata da 3 righe (la sua stessa riga più altre due). Così la Cella 1 e la Cella 2 stanno sulla stessa riga, mentr la Cella 3 e la Cella 4 formano due righe indipendenti. Confuso? Bene, non è semplice ed è facile perdersi. Quindi, sarebbe una buona idea disegnare la tabella su un pezzo di carta prima di iniziare con l'html.