Tabellen aufhübschen

von Sven Lennartz | Veröffentlicht am 09.10.2007 | Letzte Änderung am 9.10.2007. Rubriken: CSS, Tabellen | 14 Kommentare

Aus drögen Datentabellen lässt sich auch etwas machen. Zu Fuß oder mit Tablecloth (zu Deutsch eigentlich "Tischdecke"). Das ist ein wenig CSS und Javascript und sorgt für Bewegung und Style - ohne dass man großen Aufwand betreiben müsste. Denn die Tabellen selbst müssen nicht verändert werden. So könnte es aussehen:

oder so:

Über Sven Lennartz

Sven ist der Erfinder und Leiter des Dr. Web Magazins. Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Autor früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH. Website. Weitere Beiträge für Dr. Web: 1226

14 Kommentare zu “Tabellen aufhübschen”

~~~d(o.o)b~~~ schreibt am 9.10.2007 um 11:24:
Ja, sieht sehr cool aus...
Ich habe so etwas bisher immer mit halbtransparenten PNG`s gemacht, aber mit dem JS sieht das natürlich noch eine ganze Spur besser aus...
Und falls der Besucher JS deaktiviert hat, spielt das auch keine Rolle...

hAVE pHUN
~~~d(o.o)b~~~
Fotogenes Individuum schreibt am 9.10.2007 um 12:12:
Wow, das sieht wirklich mal nett aus. Auch die Implementierung ist easy. Das spart zukünftig definitiv einiges an Handarbeit.

Danke dafür
Jan schreibt am 9.10.2007 um 22:57:
Besonders schön stell ich mir das in Foren vor
gast schreibt am 10.10.2007 um 11:39:
Puh, dieser ewige Web 2.0 shiny Look geht mir langsam sowas von auf die Nerven --- am besten pimpt ihr auch noch eure Häuser und Garagen mit runden Ecken und Plasitkverkleidung auf.... *kopfschüttel*
Paul schreibt am 10.10.2007 um 14:51:
@ gast
was geht mit dir?
ich wäre froh wenn ich doch nur eine Seite mit so einer schönen Tabelle vorfinden würde!

Außerdem ist das nur ein BEISPIEL. Es geht hier um die geniale Nutzung von CSS und Jacascript und nicht um das Aussehen. Lade dir den Sourcecode runter und mache deine eigene Tabelle ohne "shiny Look" (wobei das doch ganz spärlich nur im T Head ist!?) und ohne "runde Ecken" - ach halt, die Beispieltabelle hat doch gar keine rounded Corners!!
Christian schreibt am 10.10.2007 um 22:33:
Vielen Dank für den Tipp. Lässt sich bestimmt mal bei einer Seite einsetzen.
Carsten schreibt am 11.10.2007 um 22:21:
Ich finde es sehr cool, aber irgendwie sieht es nur im Firefox gut aus. Im IE7 ist es aber verzerrt.
Hat jemand ähnliche Beobachtungen gemacht?
Carsten schreibt am 12.10.2007 um 14:41:
Das IE-Problem hat sich erledigt. Wenn man der Tabelle cellspacing und cellpadding direkt mitgibt, kümmert es den Forefox nicht, den IE schon...
dennis schreibt am 20.08.2008 um 08:37:
Sehr cool gemacht. Werde das bei mir auch mal einsetzen, sofern ich eine Tabelle dafür habe ^^.