Le tabelle giocano un ruolo significativo quando si tratta di presentare i dati in un formato organizzato. In questo tutorial scoprirai come creare tabelle di base HTML e utilizzare i tag essenziali per il layout e la struttura.
Istruzioni passo-passo
Iniziamo a creare la tua prima tabella! Prima di tutto, devi sapere che il tag principale per una tabella è <table>. Questo tag racchiude l'intera tabella.
Ora aggiungiamo una riga. Ogni riga è definita dal tag <tr>, che sta per "table row". In questa riga non ci sono ancora dati, quindi rimane vuota per ora. Puoi immaginare che ogni riga possa ospitare più colonne.
È ora di inserire alcuni dati nella tabella. A questo scopo, utilizziamo il tag <td> e aggiungiamo i valori corrispondenti. Supponiamo che il primo nome sia "Jan", l'email "support@programmierenlern.info" e la data di nascita sia il 23.06.1982. La tua riga dovrebbe apparire come segue:
Assicurati che la tabella ora appaia meglio. Puoi aggiungere quante più righe vuoi semplicemente usando altri tag <tr> e <td>. Aggiungiamo un altro dipendente. Chiamiamolo "Joe Average" e la sua email potrebbe essere "joe@average.com".
Ora, se ricarichiamo la tabella, noteremo che cresce e tutti i dati inseriti sono visibili. La struttura è importante poiché ti fornisce una chiara panoramica delle informazioni.
Che dire se vuoi aggiungere un piè di pagina alla fine della tabella, ad esempio per un copyright? Qui entra in gioco il colspan. Con colspan puoi specificare quante colonne deve occupare una cella. Quindi, per impostare un copyright su tutte e tre le colonne, scrivi: Copyright 2015 coding-geeks.de.
Dopo aver aggiunto questo piè di pagina, dovresti controllare il layout. L'idea è che il piè di pagina sia posizionato sotto le colonne e che i dati siano presentati in modo chiaro. In questo caso, il piè di pagina non ha una propria colonna e quindi dovrebbe trovarsi sopra le altre tre colonne.
Se ora riduci il colspan a un valore di due, potresti anche inserire un secondo avviso. Supponiamo che tu voglia visualizzare "Coding Geeks" in una nuova colonna. Per farlo, usa nuovamente il tag <td>, applicando correttamente il colspan.
Se hai seguito tutti questi passaggi, hai imparato a creare tabelle HTML di base. Tuttavia, la progettazione visiva dovrebbe sempre avvenire tramite CSS, per migliorare il layout e l'usabilità. Ciò include la separazione di contenuti e layout, in modo che in seguito tu possa avere maggiore flessibilità nella progettazione delle tue pagine web.
Riassunto - Creazione di tabelle HTML di base
Hai appreso la struttura e l'uso delle tabelle HTML, partendo dalla costruzione, passando per la disposizione dei dati fino al piè di pagina. Adesso puoi presentare semplici dati tabellari sul tuo sito web.
Domande frequenti
Quali sono i tag di base per le tabelle HTML?I tag di base sono <table>, <tr>, <th> per le intestazioni e <td> per le celle dei dati.
Posso creare un numero illimitato di righe e colonne in una tabella?Sì, teoricamente puoi aggiungere molte righe e colonne, ma è importante tenere presente la leggibilità.
Come dovrei stilizzare le tabelle?Usa CSS per la formattazione, piuttosto che attributi HTML diretti come border.
Cos'è il colspan?Il attributo colspan consente a una cella di estendersi su più colonne.
Perché CSS è migliore per il layout rispetto agli attributi HTML?CSS separa i contenuti dal loro stile, offrendo così maggiore flessibilità e possibilità di design.
