Sommario
In passato, le tabelle HTML venivano utilizzate per controllare il layout dei siti, al fine di mantenere le proporzioni del contenuto, creare sezioni, dividere le informazioni, ecc. Attualmente questa è una cattiva pratica, infatti con le nuove specifiche dell'articolo tavolo In HTML5, è stato fatto ogni sforzo affinché questo venga utilizzato per il suo vero scopo, che è quello di visualizzare i dati in array bidimensionali.Elemento da tavolo
L'elemento tavolo è il grande contenitore e può stare all'interno di qualsiasi elemento che sia flusso, come il div. Elemento interno tavolo avremo gli elementi: caption, colgroup, thead, tbody, tfoot, tr, th sì td, che sono tenuti a dare la costituzione al nostro tavolo, inoltre il nuovo standard ha reso obsoleti i seguenti attributi all'interno tavolo e devono essere utilizzati esclusivamente da CSS: sommario, allinea, larghezza, bgcolor, cellpadding, cellspacing, cornice, regole. La convenzione CSS per questo elemento sarà questa:
tabella {display: tabella; confine-collasso: separato; spaziatura dei bordi: 2px; colore del bordo: grigio; } Tr elemento
Come ben sappiamo le tabelle sono composte da due elementi base, righe e colonne, dove le righe rappresentano ogni record informativo e le colonne la struttura e il tipo delle informazioni, vediamo l'elemento utilizzato per creare le righe, questo elemento è il vero. Questo può essere figlio dei seguenti elementi: table, thead, tfoot, tbodyCome si vede può essere figlio diretto di una tabella oppure figlio degli elementi che sono figli della tabella e che ne definiscono la struttura. Deve contenere 1 o più elementi td o ns a seconda dei casi, alcuni dei suoi attributi obsoleti sono stati inseriti anche nel nuovo standard HTML5, questi sono: align, char, charoff, valign, bgcolor. Che devono essere lavorati esclusivamente da CSS, detto CSS ha per convenzione la seguente struttura:
tr {display: riga-tabella; vertical-align: eredita; colore del bordo: eredita;} Td elemento
Questo elemento definisce le colonne all'interno delle nostre righe nella tabella, che ci permette di separare le informazioni all'interno di un record e quindi di poterlo classificare in base alle nostre esigenze, è figlio dell'elemento tr, gli attributi validi che può avere sono: colspan, rowspan, headers e gli attributi obsoleti che ora devono essere gestiti nel CSS sono: abbr, asse, allinea, larghezza, char, charoff, valign, bgcolor, altezza, nowrap, ambito. La convenzione CSS per questo elemento è la seguente:
td {display: cella-tabella; vertical-align: eredita; }Il nostro primo tavolo
Mettiamo in pratica quanto visto finora, sappiamo già che per la nostra tabella abbiamo bisogno di righe e colonne all'interno del nostro contenitore o elemento genitore, vediamo come lo portiamo al codice HTML:
Esempio
| Mele | Verde | medio |
| Arance | arancia | Grande |
Questo codice ci dà la struttura di una tabella con 2 righe con 3 colonne, come vediamo è un testo semplice, che ci porta a vedere questo risultato:
