Edle Tabellen mit CSS

von Thomas Salvador.

In "Edle Tabellen erklärt" wurde gezeigt, wie man Tabellen mit einem ein Pixel breiten Rahmen erzeugt. Dies ist in HTML so direkt nicht möglich und erforderte einen Trick.

Heutzutage ist das einfacher. Zwar geht es mit HTML selbst immer noch nicht, jedoch ist es mit CSS gar kein Problem. Der Vorteil an dieser CSS-Version ist, dass es kein Trick ist, wo Fähigkeiten genutzt werden, um etwas anderes zu simulieren. Nein, es ist eine reguläre Formatierung.

Legen Sie folgende Formatierung fest:

<style type="text/css">
table.einpixel {border:1px solid black;}
</style>

Nutzen Sie diese Klasse in HTML, um die Tabelle mit 1-Pixel-Rahmen zu erzeugen.

<table class="einpixel">...</table>

Obiges Beispiel erzeugt einen ein Pixel breiten (1px) durchgängigen (solid) Rahmen in Schwarz (black) und sieht so aus:

1px solid black

Hinweise

Die Breite können Sie mit allen in CSS verfügbaren Größenangaben festlegen, wobei hier die Pixelangabe am ehesten Sinn macht.

Als Farbe können Sie Farbnamen aber auch präzise Werte nutzen.

CSS unterstützt folgende Zeichenarten für Rahmen (hier in vier Pixeln, damit Sie alle Effekte sehen):

  • none: kein Rahmen:
    4px none black
  • hidden: kein Rahmen:
    4px hidden black
  • dotted: gepunktet:
    4px dotted black
  • dashed: gestrichelt:
    4px dashed black
  • solid: durchgezogen:
    4px solid black
  • double: doppelt:
    4px double black
  • groove: 3D-Effekt:
    4px groove black
  • ridge: 3D-Effekt:
    4px ridge black
  • inset: 3D-Effekt:
    4px inset black
  • outset: 3D-Effekt:
    4px outset black