Le tabelle HTML sono la spina dorsale dei dati strutturati sul web. Non sono più solo per i fogli di calcolo. Puoi modellarli, colorarli e controllare esattamente come respirano all’interno di una finestra del browser. Il metodo della vecchia scuola si basa su attributi di presentazione specifici. Funzionano. Sono diretti. Non sono necessari framework CSS complessi per ottenere un layout dall’aspetto decente.
Modifica del colore di sfondo della tabella
Inizia con il quadro generale. Vuoi che tutta la griglia scoppi? Non hai bisogno di un foglio di stile separato. Basta inserire un attributo bgcolor nel tag di apertura
.
Esempio:
Questo pone le basi. Ogni cellula eredita quell’atmosfera a meno che tu non la ignori.
Puoi anche ingrandire. Colora una singola riga o solo una cella specifica. Rilascia bgcolor="color" nel tag
o
| .
Esempio:
|
È un piccolo dettaglio. Ma cambia il modo in cui l’occhio si muove attraverso i dati.
Dimensioni della tabella
I browser sono pigri per impostazione predefinita. Espandono righe e colonne per adattarle al contenuto. Se i dati sono brevi, la tabella si allunga per riempire la finestra. Se è lungo, diventa lungo.
A volte vuoi il controllo. Vuoi dimensioni fisse.
Aggiungi “width” e “height” al tag iniziale “
“. Puoi utilizzare pixel o percentuali.
Esempio:
I pixel ti danno limiti rigidi. Le percentuali lasciano respirare la tabella con il viewport. Quello che scegli dipende dai tuoi obiettivi di progettazione.
Puoi anche bloccare singole celle. Aggiungi width="value" a un tag
o
| . Ciò sovrascrive l’impostazione globale per quel punto specifico.
Sperimentare. Prova un valore in pixel. Quindi prova una percentuale. Guarda come si rompe o tiene insieme in diversi schermi.
Imbottitura delle celle
Lo spazio è progettazione. Nello specifico, lo spazio tra il bordo di una cella e il testo al suo interno.
Questo è “cellpadding”. Prende un valore di pixel.
Utilizzalo nel tag iniziale “
“.
Esempio 1:
Esempio 2:
Cinque pixel sono pochi. Quindici sono ariosi. Il contenuto sembra diverso. Sembra più pulito con più imbottitura.
Spaziatura delle celle
Poi c’è il divario tra le cellule.
Questo è “spaziatura delle celle”. Richiede anche un valore in pixel.
Aggiungilo al tag “
“.
Esempio 1:
Esempio 2:
Una piccola spaziatura delle celle rende la griglia densa. Uno grande lo fa sembrare una lista di controllo.
Intestazioni delle tabelle
I dati hanno bisogno di struttura. Le intestazioni lo forniscono.
Per far risaltare una colonna o una riga come intestazione, scambia “
” con “
| ” nella prima riga.
Il testo viene automaticamente messo in grassetto. Lo centra anche lui.
Esempio:
| Colonna 1 |
Colonna 2 |
| A |
B |
| C |
| | |
