Le tabelle di dati elencano varie informazioni in colonne e righe per una facile lettura. I dati sono generalmente in parte numerici con etichette di testo. Un esempio è una tabella di dati che mostra quante calorie una persona mangia ogni giorno. La creazione di una tabella di dati online può essere eseguita con HTML o il più complesso linguaggio del browser CSS. La tabella finale ha l'aspetto di una tabella di dati creata in un foglio di calcolo o su carta. L'unica differenza è la codifica in background, che non si vede se non guardando il codice sorgente. La codifica può essere creata da editor HTML, testo o altri modi. Ci sono molti siti online che offrono la possibilità di inserire dati, impostare alcuni attributi e creare tutta la codifica della tabella per te. Le tabelle di dati in linea vengono solitamente utilizzate come parte di una pagina Web. Le tabelle di dati vengono spesso utilizzate per creare elenchi di articoli con categorie, ad esempio articoli in vendita. Alcune pagine Web li utilizzano per mostrare statistiche a scopo informativo. Sebbene le tabelle di dati possano essere utilizzate offline per la stampa o nei report, di solito è meglio usare software per fogli di calcolo, come Microsoft Office Excel, che offre molte più funzionalità per lavorare con dati. Questa guida mostra come creare una tabella dati HTML con Blocco note.
Apri un editor HTML o semplicemente un normale documento di testo del Blocco note per inserire il codice HTML. Il blocco note funziona bene se sei abituato alla codifica HTML. Gli editor HTML rendono più veloci le attività ripetitive, ma alcuni, come Frontpage, aggiungono ulteriore codice non necessario che può rallentare le pagine Web. La cosa migliore da fare è programmare prima con un editor HTML, quindi tornare indietro e modificare il codice manualmente per ripulirlo.
Decidi gli attributi della tabella per il bordo, la larghezza, il colore di sfondo e i colori dei caratteri. È necessario prendere in considerazione il layout della pagina Web, la larghezza, i colori e altri attributi per rendere la tabella facilmente leggibile. È inoltre necessario decidere quante righe e colonne sono necessarie per i dati. Inizia a definire gli attributi della tabella. (Il nostro esempio mostra il numero di calorie consumate a pranzo e a cena in ogni giorno della settimana. Abbiamo bisogno di tre colonne (Giorno, Pranzo e Cena) e sette righe (due per le etichette e una per ogni giorno della settimana).
Aggiungi un bordo intorno alla tabella e alle celle di dati. I bordi separano i dati in celle per una facile visualizzazione. Viene misurato in pixel e può essere assegnato un valore 0 per non utilizzarli. Un bordo di uno o due pixel generalmente va bene. Il tag per il bordo è
bgcolor=border="CHOSEN_BORDER_WIDTH"
Il colore del bordo può essere modificato con il tag
bordercolor="CHOSEN_COLOR"
che utilizza i termini dei colori di base, come rosso o nero o codici colore esadecimali a sei cifre. Gli esadecimali offrono più colori. Il nostro esempio usa border="2" e bordercolor="black".
Determinare la larghezza dell'intera tabella. Viene misurato in pixel o percentuale della dimensione dello schermo. I pixel sono definitivi e le percentuali consentono alla tabella di adattarsi alle diverse dimensioni dello schermo. Prova a giudicare la larghezza in base alla larghezza dei dati tra le righe. Se in seguito scopri che il tavolo è troppo sottile o largo, puoi cambiarlo. Il nostro esempio usa width="175".
Imposta il colore di sfondo delle celle di dati. È diverso dal colore di sfondo della pagina, che può offrire un buon contrasto. Il tag è
bgcolor="COLORE_SCELTO"
proprio come il colore del bordo. Il nostro esempio usa bgcolor="white".
Imposta il colore del carattere del testo nelle celle. Assicurati che il colore contrasti bene con lo sfondo, in modo che sia facilmente leggibile. Luce su buio o scuro su luce funzionano sempre meglio. Il tag è
font="SCELTO_COLORE"
Il nostro esempio è font="black", che contrasta bene con lo sfondo bianco.
Scrivi i tag della tabella completi tra una freccia sinistra e una freccia destra con uno spazio tra gli attributi del tag e iniziando con il tag della tabella davanti. L'ordine dei tag non ha importanza, purché "table" sia in primo piano.
Determinare le larghezze delle colonne. La larghezza di ogni colonna dipende dalla larghezza dell'intera tabella. Prendi la larghezza della tabella e dividila per il numero di celle per ottenere colonne di dimensioni uniformi. Se necessario, regolare le larghezze delle colonne, ma il totale non può superare la larghezza della tabella. Quando cambia la larghezza di una cella, le altre celle devono essere regolate per ottenere il totale della larghezza della tabella. (Il nostro esempio ha una larghezza di 175 e tre colonne per riga, quindi una divisione uniforme di circa 59. La divisione effettiva è 70, 60, 40.)
Inizia ad aggiungere i tuoi dati. Innanzitutto, inizia una nuova riga e aggiungi una riga della tabella con il codice
Inserisci i tuoi dati per la cella; usando questo codice per rappresentare le celle vuote:
Chiudi la cella con il tag. Il tag bordercolor viene utilizzato per specificare il colore del bordo della cella, se lo si desidera. Se viene omesso, viene utilizzato il colore di bordo predefinito della tabella. Il primo codice di cella del nostro esempio è:
Ripeti la creazione di celle di dati della tabella, ciascuna su una nuova riga, finché tutte le celle della riga non sono complete. Quindi termina la riga con il tag. Inizia la riga successiva con lo stesso processo, iniziando con
Chiudi il codice della tabella con il con etichetta. Il nostro codice della tabella finale, se termina dopo due righe di dati, è sotto.
Cose di cui avrai bisogno
- Editor HTML o Blocco note
- Dati