Abgerundete Ecken

Tabellen mit abgerundeten Ecken

Eine Tabelle in HTML kennt keine runden Ecken und sieht z.B. so aus:

Hier steht ein mehr oder weniger langer Text drin

Der entsprechende Quellcode lautet:

<TABLE BORDER=1>
<TR>
<TD>Text oder auch Grafik</TD>
</TR>
</TABLE>

Durch die Angabe einer Zahl bei BORDER wird ein mehr oder weniger breiter Rand festgelegt. In der Regel sollte auch für den Text die Schriftart und die Schriftgröße mit dem FONT-Befehl angegeben werden. Darauf verzichten wir hier mal.

Um der Tabelle runde Ecken zu spendieren, müssen mit einem Grafikprogramm entsprechende Grafiken konstruiert werden, undzwar für jede Ecke eine. Außerdem nehmen wir noch einen waagerechten Verbindungsbalken dazu. Alles gestalten wir mal mit etwas Farbe:

ecke_lo.gif links oben ecke_lu.gif links unten ecke_ro.gif rechts oben ecke_ru.gif rechts oben balken_w.gif Verbindung

Vorzugsweise sollten Sie als Malfläche ein Quadrat nehmen, z.B. mit der Kantenlänge von 20 Pixel. Ich hatte den Fehler gemacht ein Rechteck mit einer Breite von 19 und einer Höhe von 17 zu wählen. Das brachte einige Probleme mit sich, die ich aber letztlich doch noch lösen konnte. Den Verbindungsbalken habe ich in der Größe 60 mal 17 erstellt. Die Breite könnte aber nach oben oder unten wesentlich variiert werden.

Dermaßen gerüstet, bauen wir uns also eine neue Tabelle:

Hier steht ein mehr oder weniger langer Text drin

Der Quellcode hat sich erheblich aufgebläht, was hier mit einigen Anmerkungen dokumentiert wird:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
Der Rand muß auf 0 gesetzt werden, damit er unsichtbar bleibt. Außerdem müssen CELLPADDING=0 und CELLSPACING=0 hinzugefügt werden. Wer es nicht glaubt, kann es ja mal ohne diese Attribute probieren.

<TR> Hier beginnt die oberste Tabellen-Reihe mit 3 Zellen.
<TD><IMG SRC="ecke_lo.gif"</TD> Die erste Grafik kommt in die erste Zelle.
<TD><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"></TD>
Da unser Verbindungsbalken nicht sehr lang ist, wird er mehrfach wiederholt. Das ist auch abhängig von der Textlänge.
<TD><IMG SRC="ecke_ro.gif"</TD> Die Grafik für die Ecke rechts oben.
</TR> Die erste Reihe ist fertig.

<TR> Zweite Tabellenreihe beginnt.
<TD><BR></TD> Die erste Zelle bleibt leer und erhält daher nur einen BR-Befehl.
<TD> Die zweite Zelle mit dem Text.
<P ALIGN=CENTER>Es folgt der Text…</P> Der Text soll mittig ausgegeben werden.
</TD> Ende der Zelle.
<TD><BR></TD> Die dritte Zelle ist wieder leer.
</TR> Ende der zweiten Reihe.

<TR> Die letzte Tabellen-Reihe mit 3 Zellen beginnt.
<TD><IMG SRC="ecke_lu.gif"</TD> Die Grafik für die Ecke links unten.
<TD><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"></TD>
Der Verbindungsbalken wird erneut mehrfach wiederholt.
<TD><IMG SRC="ecke_ru.gif"</TD> Die Grafik für die Ecke rechts unten.
</TR> Die letzte Reihe ist fertig.

</TABLE> Ende der Tabelle.

Eigentlich können wir mit dem Ergebnis zufrieden sein. Es ist allerdings nicht sehr flexibel. Wenn ein User z.B. eine größere Schrift im Browser einstellt, sieht er vielleicht das hier (Bildschirmfoto):

größere Schriftart

Der Text ist länger als die Länge aller Verbindungsbalken. Das sieht unschön aus. Aber wir werden das relativ einfach ändern, indem wir im Quelltext die Zeilen
<TD><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"><IMG SRC="balken_w.gif"></TD>
durch
<TD BACKGROUND="balken_w.gif">
ersetzen.

Die folgende Tabelle wurde so realisiert. Sie können im Browser die Schriftart vergrößern, um das zu überprüfen. Vergessen Sie aber nicht, die Seite danach zu aktualisieren, ansonsten könnte es sein, daß der Text nicht mehr vollständig sichtbar ist.

Hier steht ein mehr oder weniger langer Text drin

Ich habe hier 2 BRS eingefügt, da sonst manche Browser…

Jetzt soll die Tabelle auch an den Seiten einen Rahmen erhalten. Dazu erstellen wir die Grafik
balken_s.gif
Und wo wir im Quelltext leere Zellen mit <BR> erzeugt haben, schreiben wir stattdessen jeweils <IMG SRC="balken_s.gif">. Mit diesem Ergebnis:

Hier steht ein mehr oder weniger langer Text drin

Wir können auch auf die Verbindungsbalken verzichten und eine andere Methode anwenden. Dazu müssen die RGB-Werte der Farben für die Ecken bekannt sein. Dies leistet eigentlich jedes Grafikprogramm. In unserem Fall ist die RGB-Farbkombination FFD800. Insgesamt 4 Tabellenzellen werden jetzt codiert mit <TD BACKGROUND="#FFD800"></TD>. Zum besseren Verständnis habe ich die 4 Zellen mit Zahlen markiert und die einzelnen Zellen umrandet:

1
2

Hier steht ein mehr oder weniger langer Text drin

3
4

Eine einheitliche Fläche für den Hintergrund erhält man, wenn zusätzlich die Zelle mit dem Text als <TD BACKGROUND="#FFD800"> codiert wird:

Hier steht ein mehr oder weniger langer Text drin

Es folgt der zugehörige Quelltext:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>
<TD><IMG SRC="ecke_1.gif"></TD>
<TD BACKGROUND="#FFD800"></TD>
<TD><IMG SRC="ecke_2.gif"></TD>
</TR>

<TR>
<TD BACKGROUND="#FFD800"></TD>
<TD BACKGROUND="#FFD800"><P ALIGN=CENTER>Hier steht ein mehr oder weniger langer Text drin</P></TD>
<TD BACKGROUND="#FFD800"></TD>
</TR>

<TR>
<TD><IMG SRC="ecke_3.gif"></TD>
<TD BACKGROUND="#FFD800"></TD>
<TD><IMG SRC="ecke_4.gif"></TD>
</TR>

</TABLE>

Wie wäre es aber mit einem schmaleren Rand?
Neue Grafik balken_2.gif mit neuem Ergebnis:

Hier steht ein mehr oder weniger langer Text drin

Allerdings war auch noch ein kleiner Kunstgriff vonnöten. Der schmale Balken muß auf der rechten Seite auch nach rechts ausgerichtet werden. Dies geschieht für die dritte Zelle der zweiten Reihe durch
<TD><DIV ALIGN=RIGHT><IMG SRC="balken_2.gif"></DIV></TD>

Würde man das nicht machen, sähe das so aus:

Hier steht ein mehr oder weniger langer Text drin

Wenn wir auch oben und unten einen schmalen Rand wünschen, müssen ebenfalls neue Grafiken erstellt werden. Um die tatsächliche Größe zu zeigen, habe ich die Grafiken hier mit einem Rahmen versehen:

ecke_1.gif links oben ecke_2.gif rechts oben ecke_3.gif links unten ecke_4.gif rechts unten linie_1.gif Linie oben linie_2.gif Linie unten

Wegen der nicht-quadratischen Form der Ecken war ich gezwungen 2 verschiedene Linien-Grafiken zu erstellen. Eine Linie ist etwas niedriger als die andere. Die neue Tabelle in ihrer ganzen Pracht:

Hier steht ein mehr oder weniger langer Text drin

Es folgt der zugehörige Quelltext:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>
<TD><IMG SRC="ecke_1.gif"></TD>
<TD BACKGROUND="linie_1.gif"></TD>
<TD><IMG SRC="ecke_2.gif"></TD>
</TR>

<TR>
<TD><IMG SRC="balken_2.gif"></TD>
<TD><P ALIGN=CENTER>Hier steht ein mehr oder weniger langer Text drin</P></TD>
<TD><DIV ALIGN=RIGHT><IMG SRC="balken_2.gif"></DIV></TD>
</TR>

<TR>
<TD><IMG SRC="ecke_3.gif"></TD>
<TD BACKGROUND="linie_2.gif"></TD>
<TD><IMG SRC="ecke_4.gif"></TD>
</TR>

</TABLE>