Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray136 und Farbwert #555555

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Beispiele zur Kombination von Farbe gray136 und Farbwert #555555

Füllen und Umranden von Tag tfoot

Hier umranden wir <tfoot> mit einem 4 Punkte dicken, herausstehenden Rahmen in Farbwert #555555 . Den Hintergrund von <tfoot> färben wir entsprechend mit Farbe gray136. In HTML ist dies nicht machbar. Daher verwenden wir CSS.

<style type="text/css"><!--
  tfoot { 
    border-color: #555555; 
    background-color: gray136; 
    border-width: 4pt; 
    border-style: outset;
  }
//-->
</style>

Mehr zu tfoot finden Sie in Tabellen in HTML. Möglichkeiten vom hier genutzten HTML-Tag tfoot finden Sie in der HTML Referenz unter <tfoot>.

Zebra-Effekt mit Befehl tr

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <tr> mit den Hintergrundfarben Farbe gray136 und Farbwert #555555.

<style type="text/css"><!--
  tr.ying { 
    background-color: gray136;
  }
  tr.yang { 
    background-color:#555;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr class="ying"><td><tt>A,A</td><td></tt>B,A</td><td><tt>C,A</td></tr>
<tr class="yang"><td></tt>A,B</td><td><tt>B,B</td><td></tt>C,B</td></tr>
<tr class="ying"><td><tt>A,C</td><td></tt>B,C</td><td>@C,C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML lesen. Weiteres zum hier gezeigten Tag tr erfahren Sie in der HTML Referenz unter <tr>.