De methode voor het wijzigen van de achtergrondkleuren van delen van een tabel op een website is in de loop der jaren veranderd en werd eenvoudiger en minder arbeidsintensief met de introductie van stylesheets.
De oudere methode gebruikte het attribuut bgcolor om de achtergrondkleur van een tabel te veranderen. Het kan ook worden gebruikt om de kleur van een tabelrij of een tabelcel te wijzigen. Maar het bgcolor-attribuut is afgeschaft ten gunste van stijlbladen, 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 stijlgebonden achtergrondkleur toe te voegen aan de tabel, rij of celtag.
Hierdoor verandert de achtergrondkleur van een hele tabel:
Als u de kleur van een enkele rij wilt wijzigen, voegt u de eigenschap voor de achtergrondkleur in de
label:
U kunt de kleur van een enkele cel wijzigen door het kenmerk toe te voegen aan
label:
|
U kunt ook achtergrondkleuren toepassen op tabelkoppen of de | tag, op dezelfde manier: | Achtergrondkleur wijzigen met behulp van stijlbladen
Als u de achtergrondkleur van de stijleigenschap niet aan de tabel wilt toevoegen, zijn er alternatieve manieren om de achtergrondkleur in te stellen. U kunt bijvoorbeeld de stijlen in een stijlblad instellen op de HEAD van uw HTML-document, of deze in een externe stijlpagina instellen. Wijzig deze in de HEAD of in een externe stylesheet kan er als volgt uitzien voor tabellen, rijen en cellen:
tabel {achtergrondkleur: # ff0000; } tr {background-color: yellow; } td {background-colour: # 000; } Kolom achtergrondkleur instellen
De beste manier om de achtergrondkleur in te stellen voor een kolom is om een stijlklasse te maken en die klasse vervolgens toe te wijzen aan de cellen in die kolom. Als u een klasse maakt, kunt u die klasse toewijzen aan de cellen in een specifieke kolom met één kenmerk.
De CSS:
td.ColColor {achtergrondkleur: blauw; } De HTML:
Een belangrijk voordeel van het besturen van achtergrondkleuren via een stylesheet is de mogelijkheid om uw kleurenkeuze op een later tijdstip te wijzigen. In plaats van het HTML-document te moeten doorlopen en de wijziging in elke afzonderlijke cel aan te brengen, kunt u een enkele wijziging in de kleurkeuze in de CSS aanbrengen en deze wordt onmiddellijk toegepast op elke instantie waarbij de klasse = "ColColor" wordt gebruikt. Dit bespaart enorm veel tijd en vermindert de kans op fouten aanzienlijk, zoals het missen van een wijziging in de celkleur.
Zelfs als u nog nooit de achtergrondkleuren van een tabel in een webdocument hebt gewijzigd, kunt u de bovenstaande voorbeelden kopiëren en zelfstandig met deze methode experimenteren. U zult snel ontdekken hoe eenvoudig het is om kleurwijzigingen door te voeren met behulp van stijllabels, met name stijlpagina's als u met grote websites werkt. Probeer de verschillende gepresenteerde opties en kies degene die uiteindelijk het meest comfortabel voor je is.
|
