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>

sagen zu können.

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