Hur man ändrar bakgrundsfärgen på en HTML-tabell

Vad du ska veta

  • Enklast: lägg till stilegenskapen bakgrundsfärg till tabellen, raden eller celltaggen.
  • Nästa enklaste: använd attributet bgfärg.

Den här artikeln förklarar metoderna för att ändra bakgrundsfärgerna på delar av ett bord på en webbplats.

Datordrift HTML i orange och blå typ med svart bakgrund

Den äldre metoden använde attributet bgfärg för att ändra bakgrundsfärgen på ett bord. Det kan också användas för att ändra färgen på en tabellrad eller en tabellcell. Men attributet bgcolor har avskaffats till förmån för stilark, så det är inte det bästa sättet att manipulera ett bords bakgrundsfärg.

Det bättre sättet att ändra bakgrundsfärgen är att lägga till stilegenskapen bakgrundsfärg till tabellen, raden eller celltaggen.

Det här exemplet ändrar bakgrundsfärgen på en hel tabell:


För att ändra färgen på en rad, infoga egenskapen bakgrundsfärg i.


Du kan ändra färgen på en enskild cell genom att lägga till attributet till.


Du kan också använda bakgrundsfärger på bordshuvuden eller


Ändra bakgrundsfärg med hjälp av stilark

Det är dock bättre att undvika att använda bakgrundsfärgsattributet till förmån för ett korrekt formaterat stilark. Du kan till exempel ställa in formatmallarna i ett formatmall i HTML-dokumentets HEAD eller ställa in dem i en

instagram viewer
externt stilark. Förändringar som dessa i HEAD eller ett externt stilark kan se ut så här för tabeller, rader och celler:

tabell {bakgrundsfärg: # ff0000; }
tr {bakgrundsfärg: gul; }
td {bakgrundsfärg: # 000; }

Ställa 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 tilldela den sedan till kolumnens celler. Genom att skapa en klass kan du tilldela den klassen till cellerna i en specifik kolumn med ett attribut.

CSS:

td. ColColor {bakgrundsfärg: blå; }

HTML:


cell 1cell 2cell 1cell 2

En betydande fördel med att kontrollera bakgrundsfärger via ett formatmall är att du kan ändra ditt färgval senare. Istället för att gå igenom HTML-dokumentet och göra ändringen för varje cell kan du göra en enda ändring av färgvalet i CSS som omedelbart kommer att tillämpas på varje instans där class = "ColColor" syntax visas.

Även om du blandar in CSS i din HTML, eller ringer till en separat CSS-fil, lägger du till lite administrativ kostnad utöver att bara ändra ett HTML-attribut, kommer du att upptäcka att förlita sig på CSS minskar fel, påskyndar utvecklingen och förbättrar din bärbarhet dokumentera.