Um eine HTML Tabelle optisch ansprechend zu gestalten, bietet es sich an, Farben mit ins Spiel zu bringen. In diesem Post wird dir gezeigt, wie du die Text- und Hintergrundfarbe nach Belieben ändern kannst.

Als Beispiel habe ich hier eine Tabelle der Formel1 Teams mit aktuellem Punktestand erstellt. Um die Teams leichter zu erkennen habe ich die Zellen in den Teamfarben eingefärbt.

Zusätzlich dazu ist die Schriftfarbe von "Ferrari" und "Red Bull" weiß, um einen besseren Kontrast zum Hintergrund herzustellen.

Team Punkte
Mercedes 438
Ferrari 288
Red Bull 244

Der gesamte HTML Code der Tabelle sieht folgendermaßen aus:

<table>
  <tr>
    <th>Team</th>
    <th>Punkte</th>
  </tr>
  
  <tr>
    <td bgcolor="silver">Mercedes</td>
    <td>438</td>
  </tr>
   
  <tr>
    <td bgcolor="#DF0101" style="color: white;">Ferrari</td>
    <td>288</td>
  </tr>
   
  <tr>
    <td bgcolor="darkblue" style="color: white;">Red Bull</td>
    <td>244</td>
  </tr>
</table>

Entscheidend ist hierbei die Position an der die Attribute eingefügt werden. Innerhalb der Klammer <td> wird nur die Zelle formatiert. Schreibt man die Farbe in die Klammer <tr>, wird die gesamte Zeile formatiert.

Hintergrundfarbe der Zelle

Um den Hintergrund einer Zelle Silber zu färben, verändert man die Klammer <td> zu <td bgcolor="silver">. Danach kommt wie gewohnt der Text, der in der Zelle stehen soll.

<td bgcolor="silver">Mercedes</td>`

Farbe der Schrift

Zum Ändern der Schriftfarbe auf Weiß wird die Klammer <td> diesmal zu <td style="color: white;"> abgeändert. In unserem Beispiel war das kombiniert mit einer neuen Hintergrundfarbe. Mehrere Attribute werden, wie im Beispiel oben, mit einem Leerzeichen getrennt:

<td bgcolor="darkblue" style="color: white;">Red Bull</td>

HTML Farbcodes

Die Farben können in HTML auf verschiedene Weisen bezeichnet werden. Zum einen ist es möglich, eine Farbe einfach auf Englisch zu benennen, wie in unserem Beispiel: "silver" liefert uns Silber, "darkblue" liefert Dunkelblau. Das funkioniert relativ einfach, lässt aber nur eine sehr überschaubare Anzahl an Farben zu.

Es ist aber auch möglich, HTML Farbcodes zu verwenden. Dadurch lässt sich die Farbe deutlich genauer definieren, wie ich das oben bei "Ferrari" gemacht habe. Denn das ist kein einfaches "red", sondern der Farbcode #DF0101. Auf der Website HTML-Color-Codes lässt sich der Farbcode zu jeder beliebigen Farbe berechnen.

HTML