Metoden för att ändra bakgrundsfärgerna på delar av ett bord på en webbplats har förändrats genom åren, blir lättare och mindre arbetsintensiv med introduktionen av stilark.
Den äldre metoden använde attributet bgcolor för att ändra bakgrundsfärgen på en tabell. Det kan också användas för att ändra färgen på en tabellrad eller en tabellcell. Men bgcolor-attributet har avlägsnats till förmån för stilark, så det är inte det optimala sättet att manipulera ett bords bakgrundsfärg.
Det bättre sättet att ändra bakgrundsfärgen är att lägga till bakgrundsfärgen för stilegenskapen till tabellen, raden eller celltaggen.
Detta kommer att ändra bakgrundsfärgen på ett helt bord:
För att ändra färgen på en enda rad lägger du in bakgrundsfärgegenskapen i
märka:
Du kan ändra färgen på en enda cell genom att lägga till attributet till
märka:
|
Du kan också använda bakgrundsfärger till tabellhuvuden, eller | tagg på samma sätt: | Ändra bakgrundsfärg med hjälp av stilark
Om du inte vill lägga till bakgrundsfärgen till stilegenskapen finns det alternativa sätt att ställa in bakgrundsfärgen. Du kan till exempel ställa in stilar i ett stilark i HEAD i ditt HTML-dokument, eller ange dem i ett externt stilark. Ändringar av dessa i HEAD eller i ett externt stilark kan verka som dessa för tabeller, rader och celler:
bord {bakgrundsfärg: # ff0000; } tr {bakgrundsfärg: gul; } td {bakgrundsfärg: # 000; } Ställ in kolumnens bakgrundsfärg
Det bästa sättet att ställa in bakgrundsfärgen för en kolumn är att skapa en stilklass och sedan tilldela den klassen till cellerna i den kolumnen. Genom att skapa en klass kan du tilldela den klassen till cellerna i en viss kolumn med ett attribut.
CSS:
td.ColColor {bakgrundsfärg: blå; } HTML:
| cell 1 | cell 2 | | cell 1 | cell 2 |
En viktig fördel med att styra bakgrundsfärger genom ett stilark är möjligheten att ändra ditt färgval vid en senare tidpunkt. I stället för att behöva gå igenom HTML-dokumentet och göra ändringen till varje cell, kan du göra en enda ändring i färgvalet i CSS och det tillämpas omedelbart i varje fall där klassen = "ColColor" används. Detta sparar enorma mängder tid och minskar risken för fel, vilket till exempel saknar en cellfärgsändring.
Även om du aldrig har ändrat bakgrundsfärgerna på ett bord i ett webbdokument tidigare kan du kopiera exemplen ovan och experimentera med den här metoden själv. Du kommer snabbt att upptäcka hur lätt det är att göra färgändringar med stilkoder, särskilt stilark, om du arbetar med stora webbplatser. Prova de olika alternativen som presenteras och välj den som är ultimat den mest bekväma för dig.
|
