Il metodo per modificare i colori di sfondo di parti di una tabella su un sito Web è cambiato nel corso degli anni, diventando più semplice e meno laborioso con l'introduzione di fogli di stile.
Il metodo precedente utilizzava l'attributo bgcolor per cambiare il colore di sfondo di una tabella. Potrebbe anche essere usato per cambiare il colore di una riga di tabella o di una cella di tabella. Ma l'attributo bgcolor è stato deprecato a favore dei fogli di stile, quindi non è il modo ottimale per manipolare il colore di sfondo di una tabella.
Il modo migliore per cambiare il colore di sfondo è aggiungere la proprietà di stile background-color alla tabella, riga o tag cella.
Ciò cambierà il colore di sfondo di un'intera tabella:
Per cambiare il colore di una singola riga, inserisci la proprietà background-color in
etichetta:
Puoi cambiare il colore di una singola cella aggiungendo l'attributo al
etichetta:
|
È anche possibile applicare i colori di sfondo alle teste delle tabelle o | tag, allo stesso modo: | Cambia colore di sfondo usando fogli di stile
Se non si desidera aggiungere la proprietà di stile background-color alla tabella, esistono modi alternativi per impostare il colore di sfondo. Ad esempio, è possibile impostare gli stili in un foglio di stile nell'HEAD del documento HTML o impostarli in un foglio di stile esterno. Le modifiche apportate a HEAD o in un foglio di stile esterno potrebbero apparire come queste per tabelle, righe e celle:
table {background-color: # ff0000; } tr {background-color: yellow; } td {background-color: # 000; } Impostazione del colore di sfondo della colonna
Il modo migliore per impostare il colore di sfondo per una colonna è creare una classe di stile e quindi assegnare quella classe alle celle in quella colonna. La creazione di una classe consente di assegnare quella classe alle celle in una colonna specifica utilizzando un attributo.
Il CSS:
td.ColColor {background-color: blue; } L'HTML:
| cella 1 | cella 2 | | cella 1 | cella 2 |
Un vantaggio significativo del controllo dei colori di sfondo attraverso un foglio di stile è la possibilità di modificare la scelta del colore in un secondo momento. Piuttosto che dover passare attraverso il documento HTML e apportare la modifica a ogni singola cella, è possibile apportare una sola modifica alla scelta del colore nel CSS e verrà immediatamente applicata a tutte le istanze in cui viene utilizzata la classe = "ColColor". Ciò consente di risparmiare enormi quantità di tempo e riduce notevolmente le possibilità di errori, come la mancanza di un cambiamento di colore delle celle.
Anche se non hai mai cambiato i colori di sfondo di una tabella in un documento Web, puoi copiare gli esempi sopra e sperimentare questo metodo da solo. Scoprirai rapidamente quanto è facile apportare modifiche al colore utilizzando i tag di stile, in particolare i fogli di stile, se lavori con siti Web di grandi dimensioni. Prova le diverse opzioni presentate e scegli quella che è la più comoda per te.
|
