De achtergrondkleur van een HTML-tabel wijzigen

click fraud protection

Wat te weten

  • Eenvoudigst: voeg de eigenschap stijl toe Achtergrond kleur naar de tabel-, rij- of celtag.
  • Volgende makkelijkste: gebruik het attribuut bgcolor.

In dit artikel worden de methoden uitgelegd voor het wijzigen van de achtergrondkleuren van delen van een tabel op een website.

Computerscript HTML in oranje en blauw type met zwarte achtergrond

De oudere methode gebruikte het attribuut bgcolor om de achtergrondkleur van een tabel te wijzigen. Het kan ook worden gebruikt om de kleur van een tabelrij of een tabelcel te wijzigen. Maar het attribuut bgcolor is verouderd ten gunste van stylesheets, dus het is niet de optimale manier om de achtergrondkleur van een tabel te manipuleren.

De betere manier om de achtergrondkleur te wijzigen, is door de eigenschap stijl toe te voegen Achtergrond kleur naar de tabel-, rij- of celtag.

In dit voorbeeld wordt de achtergrondkleur van een hele tabel gewijzigd:


Als u de kleur van een enkele rij wilt wijzigen, voegt u de eigenschap background-color in de.


U kunt de kleur van een enkele cel wijzigen door het kenmerk toe te voegen aan de.

instagram viewer

U kunt ook achtergrondkleuren toepassen op tafelkoppen, of de


Achtergrondkleur wijzigen met stijlbladen

Het is echter beter om het attribuut background-color te vermijden ten gunste van een correct opgemaakte stylesheet. U kunt bijvoorbeeld de stijlen in een stylesheet aan de HEAD van uw HTML-document instellen of ze in een externe stylesheet. Wijzigingen zoals deze in de HEAD of een externe stylesheet kunnen er als volgt uitzien voor tabellen, rijen en cellen:

tabel { achtergrondkleur: #ff0000; }
tr { achtergrondkleur: geel; }
td { achtergrondkleur: #000; }

Achtergrondkleur kolom instellen

De beste manier om de achtergrondkleur voor een kolom in te stellen, is door een stijl klasse en wijs het vervolgens toe aan de cellen van de kolom. Door een klasse te maken, kunt u die klasse toewijzen aan de cellen in een specifieke kolom met behulp van één attribuut.

De CSS:

td. ColColor { achtergrondkleur: blauw; }

de HTML:


cel 1 cel 2 cel 1 cel 2

Een belangrijk voordeel van het beheren van achtergrondkleuren via een stylesheet is dat u uw kleurkeuze later kunt wijzigen. In plaats van door het HTML-document te gaan en de wijziging in elke cel aan te brengen, kunt u een enkele wijziging aanbrengen in de kleurkeuze in de CSS die onmiddellijk wordt toegepast op elke instantie waar de class="KleurKleur" syntaxis verschijnt.

Hoewel het tussenvoegen van CSS in uw HTML, of het aanroepen van een apart CSS-bestand, een beetje administratieve overhead toevoegt die verder gaat dan alleen wijzigen modify een HTML-kenmerk, zult u merken dat het vertrouwen op CSS het aantal fouten vermindert, de ontwikkeling versnelt en de draagbaarheid van uw document.

instagram story viewer