Le tabelle HTML sono facili da creare dopo aver compreso le basi delle righe e delle colonne e anche dopo aver compreso quando è opportuno utilizzare una tabella e quando evitarle.
Una breve storia di tabelle e web design
Molti anni fa, prima che accettassero i CSS e gli standard web, i web designer usavano l'HTML
elemento per creare un layout di pagina per i siti. I design dei siti web sarebbero "tagliati" in piccoli pezzi come un puzzle e poi combinati con una tabella HTML per il rendering nel browser come previsto. È stato un processo molto complesso che ha creato un sacco di markup extra HTML e che non sarebbe mai utilizzabile oggi nel mondo multischermo in cui i nostri siti web vivono. Poiché il CSS è diventato il metodo accettato per le immagini e il layout delle pagine web, l'uso delle tabelle è diventato evitato e molti web designer credevano erroneamente che "i tavoli erano cattivi". Questo era ed è falso. Le tabelle per il layout sono pessime, ma hanno ancora un posto nel web design e HTML, ovvero per visualizzare dati tabulari come un calendario o un orario dei treni. Per quel contenuto, usare un tavolo è ancora un approccio accettabile e buono.Quindi come si impagina un tavolo? Iniziamo creando una tabella semplicemente 2x2. Questo avrà 2 colonne (questi sono i blocchi verticali) e 2 file (i blocchi orizzontali). Dopo aver creato una tabella 2x2, puoi creare qualsiasi tabella di dimensioni che desideri semplicemente aggiungendo righe o colonne aggiuntive.
Ecco come
-
Per prima cosa apri il tavolo
Apri la prima riga con il tag tr
Apri la prima colonna con il tag td
Scrivi il contenuto della cella
Chiudi la prima cella e apri la seconda
Scrivi il contenuto della seconda cella
Chiudi la seconda cella e chiudi la riga
Scrivi la seconda riga esattamente come la prima
Quindi chiudi il tavolo
Questo è tutto!
Puoi anche scegliere di aggiungere le intestazioni della tabella al tuo tavolo usando
elemento. Queste intestazioni di tabella sostituiscono i pezzi "dati tabella" nella prima riga della tabella, in questo modo:
| Nome | Ruolo |
|---|---|
| Jeremy | progettista |
| Jennifer | Sviluppatore |
Quando questa pagina veniva visualizzata nel browser, quella prima riga con le intestazioni della tabella veniva, per impostazione predefinita, visualizzata in grassetto e centrata nella cella della tabella in cui appaiono.
Quindi, è OK usare le tabelle in HTML?
Sì, purché non li utilizzi per scopi di layout, è OK utilizzare le tabelle. Se è necessario visualizzare informazioni tabulari, una tabella è il modo per farlo. In effetti, evitare un tavolo a causa di una purezza fuorviata per evitare questo elemento HTML legittimo è come fare i conti con l'uso per motivi di layout in questo giorno ed età.
Scritto da Jennifer Kyrin. A cura di Jeremy Girard.
