Kategorien
Design HTML/CSS

Tabellen aufhübschen

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 […]

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:

Screenshot Tabelle

oder so:

Screenshot Tabelle

Von Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…

14 Antworten auf „Tabellen aufhübschen“

Das IE-Problem hat sich erledigt. Wenn man der Tabelle cellspacing und cellpadding direkt mitgibt, kümmert es den Forefox nicht, den IE schon…

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?

@ 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!!

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*

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~~~

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.