721870

Elegante Tabellen in HTML

21.04.2004 | 11:21 Uhr |

Die üblichen, eckigen HTML-Tabellen sind Ihnen zu schlicht - Sie möchten Tabellen mit abgerundeten Ecken. Für diese Formatierung gibt es keine Style-Angabe. Wir zeigen Ihnen wie es funktioniert.

Anforderung

Fortgeschrittener

Zeitaufwand

Mittel

Problem:

Die üblichen, eckigen HTML-Tabellen sind Ihnen zu schlicht - Sie möchten Tabellen mit abgerundeten Ecken. Für diese Formatierung gibt es keine Style-Angabe.

Lösung:

Platzieren Sie winzige Grafiken an den Ecken der Tabelle. Zeichnen Sie in einem Grafikprogramm einen Kreis oder eine Ellipse in der Farbe der Tabelle. Teilen Sie den Kreis in vier gleich große Sektoren auf, und speichern Sie die Grafiken unter aussagekräftigen Namen - etwa L_OBEN.GIF für die linke obere Ecke.

Halten Sie die Auflösung der Grafiken möglichst gering. 30 x 30 Pixel sind völlig ausreichend. Da die Farbe der Ecken exakt die gleiche sein soll wie die des Tabellenhintergrunds, kommt als Grafik-Format nur GIF in Frage - PNG-Grafiken zeigt der Internet Explorer mit deutlicher Farbabweichung an.

In der Tabelle setzen Sie nun in die Zellen an den Ecken die passenden Bilder mittels IMG-Tag ein. Damit sie die Tabellenecken sauber abschließen, müssen die Bilder in den Zellen vertikal und horizontal am Rand ausgerichtet sein.

Wenn die Tabelle skaliert wird, ergeben sich Unregelmäßigkeiten bei der Darstellung der Zellen, die die Grafiken enthalten, da diese innerhalb der Zellen wandern. Um das zu verhindern, geben Sie die Maße der Zelle fest vor, so dass diese die gleichen Dimensionen wie die Grafik hat.

Ein Beispiel für die linke obere Tabellenzelle in HTML:

<td style="vertical-align:top; width:29px;"><img src="L_OBEN.GIF" width="30" height="30"></td>

In pcwDemotable.ZIP finden Sie ein Beispiel, das den kompletten Aufbau einer HTML-Tabelle mit abgerundeten Ecken zeigt.

0 Kommentare zu diesem Artikel
721870