So ändern Sie die Hintergrundfarbe einer HTML-Tabelle

click fraud protection

Was Sie wissen sollten

  • Am einfachsten: fügen Sie die Stileigenschaft hinzu Hintergrundfarbe zum Tabellen-, Zeilen- oder Zellen-Tag.
  • Am einfachsten: Verwenden Sie das Attribut bgcolor.

In diesem Artikel werden die Methoden zum Ändern der Hintergrundfarben von Teilen einer Tabelle auf einer Website erläutert.

Computerskript-HTML in orange und blauer Schrift mit schwarzem Hintergrund

Die ältere Methode verwendet das Attribut bgcolor um die Hintergrundfarbe einer Tabelle zu ändern. Es könnte auch verwendet werden, um die Farbe einer Tabellenzeile oder einer Tabellenzelle zu ändern. Aber das bgcolor-Attribut wurde zugunsten von Stylesheets veraltet, daher ist es nicht die optimale Methode, die Hintergrundfarbe einer Tabelle zu manipulieren.

Die bessere Möglichkeit, die Hintergrundfarbe zu ändern, besteht darin, die Stileigenschaft hinzuzufügen Hintergrundfarbe zum Tabellen-, Zeilen- oder Zellen-Tag.

In diesem Beispiel wird die Hintergrundfarbe einer ganzen Tabelle geändert:


Um die Farbe einer einzelnen Zeile zu ändern, fügen Sie die Eigenschaft background-color in die ein.

instagram viewer

Sie können die Farbe einer einzelnen Zelle ändern, indem Sie das Attribut zum hinzufügen.


Sie können den Tischköpfen auch Hintergrundfarben zuweisen, oder


Hintergrundfarbe mit Stylesheets ändern

Es ist jedoch besser, die Verwendung des background-color-Attributs zugunsten eines korrekt formatierten Stylesheets zu vermeiden. Sie können die Stile beispielsweise in einem Stylesheet am HEAD Ihres HTML-Dokuments oder in einem externes Stylesheet. Änderungen wie diese im HEAD oder einem externen Stylesheet können für Tabellen, Zeilen und Zellen wie folgt aussehen:

Tabelle { Hintergrundfarbe: #ff0000; }
tr { Hintergrundfarbe: gelb; }
td { Hintergrundfarbe: #000; }

Einstellen der Spaltenhintergrundfarbe

Der beste Weg, um die Hintergrundfarbe für eine Spalte festzulegen, besteht darin, a zu erstellen Stilklasse und weisen Sie es dann den Zellen der Spalte zu. Wenn Sie eine Klasse erstellen, können Sie diese Klasse mithilfe eines Attributs den Zellen in einer bestimmten Spalte zuweisen.

Das CSS:

td. ColColor { Hintergrundfarbe: blau; }

Der HTML-Code:


Zelle 1Zelle 2Zelle 1Zelle 2

Ein wesentlicher Vorteil der Steuerung von Hintergrundfarben über ein Stylesheet besteht darin, dass Sie Ihre Farbauswahl später ändern können. Anstatt das HTML-Dokument durchzugehen und jede einzelne Zelle zu ändern, können Sie die Farbauswahl im in CSS die sofort auf jeden Fall angewendet wird, in dem die class="ColColor" Syntax erscheint.

Obwohl das Einfügen von CSS in Ihren HTML-Code oder das Aufrufen einer separaten CSS-Datei einen gewissen Verwaltungsaufwand verursacht, der über das bloße Ändern hinausgeht ein HTML-Attribut, werden Sie feststellen, dass die Verwendung von CSS Fehler reduziert, die Entwicklung beschleunigt und die Portabilität Ihres Dokument.

instagram story viewer