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.
|
