Cosa sapere
- Più semplice: aggiungi la proprietà di stile colore di sfondo al tag di tabella, riga o cella.
- Il prossimo più semplice: usa l'attributo bgcolor.
Questo articolo spiega i metodi per cambiare i colori di sfondo di parti di una tabella su un sito web.
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à dello stile colore di sfondo al tag di tabella, riga o cella.
Questo esempio cambia il colore di sfondo di un'intera tabella:
Per cambiare il colore di una singola riga, inserisci la proprietà background-color nel file.
È possibile modificare il colore di una singola cella aggiungendo l'attributo a.
Puoi anche applicare i colori di sfondo alle teste dei tavoli, o il
Cambia il colore di sfondo usando i fogli di stile
Tuttavia, è meglio evitare di utilizzare l'attributo background-color a favore di un foglio di stile formattato correttamente. Ad esempio, puoi impostare gli stili in un foglio di stile all'inizio del tuo documento HTML o impostarli in un foglio di stile esterno. Modifiche come queste nell'HEAD o in un foglio di stile esterno potrebbero apparire come queste per tabelle, righe e celle:
table { background-color: #ff0000; }
tr { colore di sfondo: giallo; }
td { colore di sfondo: #000; }
Impostazione del colore di sfondo della colonna
Il modo migliore per impostare il colore di sfondo per una colonna è creare un classe di stile e quindi assegnarlo alle celle della colonna. La creazione di una classe consente di assegnare quella classe alle celle in una colonna specifica utilizzando un attributo.
Il CSS:
td. ColColor { colore di sfondo: blu; }
L'HTML:
cella 1cella 2cella 1cella 2
Un vantaggio significativo del controllo dei colori di sfondo tramite un foglio di stile è che puoi modificare la scelta del colore in un secondo momento. Piuttosto che passare attraverso il documento HTML e apportare la modifica a ogni singola cella, puoi apportare una singola modifica alla scelta del colore nel CSS che verrà immediatamente applicato a ogni caso in cui il class="ColColor" appare la sintassi.
Sebbene l'inserimento di CSS nel tuo HTML o la chiamata a un file CSS separato, aggiunga un po' di sovraccarico amministrativo oltre alla semplice modifica un attributo HTML, scoprirai che fare affidamento sui CSS riduce gli errori, accelera lo sviluppo e migliora la portabilità del tuo documento.