Abgerundete Tabellenkanten ohne Images

In diesem Tutorial zeige ich euch, wie Ihr Abgerundete Tabellenkanten ganz ohne Bilder nur mit CSS realiesieren könnt.

Zuerst erstellt Ihr eine CSS-Datei, in die Ihr alle Sylesheets schreibt. Macht dazu der Übersicht halber am besten eine komplett neue (bspw. 'rounded.css'), weil da einiges an Stylesheets rein kommen wird. Diese könnt Ihr dann per '@import url("rounded.css");' in Eure eigentliche CSS-Datei einfügen, um eine Zeile Script pro Seite zu sparen.

Unser Ziel ist es, runde Ecken zu zaubern, ohne dass irgend welche Bilder verwendet werden. Auch JS wird nicht verwendet, was also keine Probleme verursacht, wenn JS browserseitig ausgeschalten wird.

Wie machen wir das?
Stellt Euch das mal vor (oder malt es Euch auf):
Die Tabelle lässt sich ja als Rechteckige Box darstellen.
Wir erstellen nun in 4 Schritten zeilenweise Linien mit bestimmten Höhen und Seitenabständen zum 'Rand' der Tabelle.
Dazu benutzen wir <b>-Tags und zwar auf folgende Weise:

Zu aller erst wollen wir ja, dass die Linien jeweils in einer neuen Zeile und sie auf keinen Fall über den Rand der Tabelle hinaus gezeichnet werden. Außerdem wollen wir die höhe der Linien Pixel genau steuern können und somit dürfen eventuell durch Verschreiben im HTML-Code enstandene Texte innerhalb der <b>-Tags nicht die Höhe beeinflussen. Das sieht in CSS folgendermaßen aus:

.rounded .b1, .rounded .b2, .rounded .b3, .rounded .b4 {
display:block; /* erzwingt Zeilenumbruch
overflow:hidden; /* verhindert ein Hinausschreiben über die
gewünschte Breite der Tabelle hinaus
font-size:1px; /* Eventuell auftretende Texte bekommen die
Schrifthöhe:1px
}

Somit wäre das Fundament gelegt und wir können mit den eigentlichen Linien anfangen.

Die 1. Zeile ist 1 Pixel hoch, hat als Hintergrundfarbe die gewünschte Randfarbe der Tabelle und jeweils einen Seitenabstand von 5 Pixeln zum Rand der Tabelle und bildet den oberen Rand der Tabelle.

.rounded .b1 {
margin:0 5px; /* Abstand oben und unten:0px, links und rechts:5px
background:#ffcc66; /* Hintergrundfarbe (gewünschte Randfarbe)
height:1px; /* Höhe:1px
}

Die 2.Zeile ist ebenfalls 1 Pixel hoch, hat nun aber als Hintergrundfarbe die gewünschte Hintergrundfarbe der Tabelle und als Rand links und rechts 2 Pixel (Seitenabstand von b1 - Seitenabstand von b2, damit keine Lücke entsteht und wir einen durchgezogenen Rand bekommen) mit der Randfarbe. Der Seitenabstand, nach dem der Rand anfängt, beträgt nun nur noch 3 Pixel.

.rounded .b2 {
background:#ffcc66; /* Hinergrundfarbe (gewünschte Hintergrundfarbe) */
border-left:2px solid #ffcc66; /* Ränder links und rechts mit Breite */
border-right:2px solid #ffcc66; /* von 2px und Farbe: gew. Randfarbe */
margin:0 3px; /* Abstand oben und unten:0px, links und rechts:3px */
height:1px; /* Höhe:1px */
}

Die 3. Zeile ist der 2. sehr ähnlich, denn sie ist genau so aufgebaut, nur dass der Seitenabstand hier 2 Pixel beträgt und der Rand somit nur 1 Pixel (Seitenabstand von b2 - Seitenabstand von b1 = 1).

.rounded .b3 {
background:#ffcc66; /* Hinergrundfarbe (gewünschte Hintergrundfarbe) */
border-left:1px solid #ffcc66; /* Ränder links und rechts mit Breite */
border-right:1px solid #ffcc66; /* von 1px und Farbe: gew. Randfarbe */
margin:0 2px; /* Abstand oben und unten:0px, links und rechts:2px */
height:1px; /* Höhe:1px */
}

Die 4. Zeile ist wieder etwas Besonderes. Sie entspricht im Grunde der 2. Zeile, nur um 90° gedreht. D.h. sie ist 2 Pixel hoch, hat links und rechts einen 1 Pixel dicken Rand mit der Farbe der gewünschten Randfarbe und einen Seitenabstand von 1 Pixel. Der Hintergrund hat die Farbe des gewünschten Hintergrundes der Tabelle.

.rounded .b4 {
background:#ffcc66; /* Hinergrundfarbe (gewünschte Hintergrundfarbe) */
border-left:1px solid #ffcc66; /* Ränder links und rechts mit Breite */
border-right:1px solid #ffcc66; /* von 1px und Farbe: gew. Randfarbe */
margin:0 1px; /* Abstand oben und unten:0px, links und rechts:1px */
height:2px /* Höhe:2px */
}

Damit haben wir eigentlich schon unsere Rundung. was jetzt noch fehlt ist eine Box, in die die Tabelle geschrieben wird. Diese hat keine definierte Höhe, weil die Tabellenhöhen ja variieren können. Außerdem hat sie keinen Seitenabstand, da sie der kompletten Breite der Tabelle entspricht. Somit bleibt nur noch links und rechts ein Rand in der Farbe der gewünschten Randfarbe und ein Hintergrund in der Farbe der gewünschten Hintergrundfarbe der Tabelle.

.rounded .boxcontent {
display:block; /* erzwingt Zeilenumbruch */
background: #ddffee; /* Hinergrundfarbe (gewünschte Hintergrundfarbe) */
border-left:1px solid #ffcc66; /* Ränder links und rechts mit Breite */
border-right:1px solid #ffcc66; /* von 1px und Farbe: gew. Randfarbe */
}

Die Stylesheets sind fertig. Jetzt müssen wir sie nur noch in eine HTML-Datei einfügen. Dazu benutzen wir die <b>-Tags für die Rundungen und einen <div>-Tag für die eigentliche Tabellen-Box:

<div style="width:100px"> /* Breite der Tabelle */
<b class="b1"></b> /* 1. Zeile */
<b class="b2"></b> /* 2. Zeile */
<b class="b3"></b> /* 3. Zeile */
<b class="b4"></b> /* 4. Zeile */
<div class="boxcontent"> /* Tabellen-Box */

So, damit hätten wir die oberen Rundungen der Tabelle. Jetzt wollen wir noch die unteren Ecken abrunden. Dazu kann man genau das gleiche Verfahren anwenden, nur muss man beachten, dass man die Zeilen genau in entgegengesetzter Reihenfolge zeichnet. D.h. mit der 4. Zeile anfängt, dann kommt die 3. usw.

</div>
<b class="b4"></b> /* 4. Zeile */
<b class="b3"></b> /* 3. Zeile */
<b class="b2"></b> /* 2. Zeile */
<b class="b1"></b> /* 1. Zeile */
</div>

Damit wäre eine Tabelle mit einer Zelle gescripted. Diese befindet sich zwischen den mittleren <div>-Tags (class="boxcontent") und kann mit allem gefüllt werden, was das Herz begehrt, auch einer weiteren Tabelle damit man mehrere Zellen wzischen abgerundeten Ecken unterbringen kann. Dabei ist dann aber zu beachten, dass die Tabelle width="100%" hat, damit die komplette Breite des 1. <div>-Tags ausgenutzt wird und die 'Rand-Zeilen' nicht länger sind als die Tabelle. Außerdem darf die Tabelle dann keinen eigenen äußeren Rand haben, also border="0".

Damit man die HTML-Tags nicht jedes mal neu eingeben muss, kann man diese auch in eine Funktion schreiben und dann bei bedarf abrufen. Dazu müssten aber leichte Änderungen vogenommen werden, damit die Breite der Tabelle dynamisch wird.
Im Folgenden schreibe ich die kompletten Funktionen für die oberen und unteren Abrundungen: (Ist einfachstes PHP, sollte jedem klar sein)

<?php
function rounded_in($width)
{
echo "
<div style='width:".$width."'>
<b class='b1'></b>
<b class='b2'></b>
<b class='b3'></b>
<b class='b4'></b>
<div class='boxcontent'>
";
}

function rounded_out()
{
echo "
</div>
<b class='b4'></b>
<b class='b3'></b>
<b class='b2'></b>
<b class='b1'></b>
</div>
";
}
?>

Jetzt kann man die Tabelle folgendermaßen erstellen:

<?php rounded_in('250px') ?>

<?php rounded_out() ?>

Das wär´s vorerst. Wenn mir noch was einfällt, schreibe ich noch was dazu.
Vielen Dank, für die Zeit, die Ihr aufgebracht habt, dieses Tutorial zu lesen.