Tabellen aufhübschen

Werbung

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

Weitere Beiträge:

Über Sven Lennartz

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

,

14 Kommentare zu Tabellen aufhübschen

  1. ~~~d(o.o)b~~~ 9. Oktober 2007 at 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~~~

  2. Fotogenes Individuum 9. Oktober 2007 at 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 :-)

  3. Jan 9. Oktober 2007 at 22:57 #

    Besonders schön stell ich mir das in Foren vor ;)

  4. gast 10. Oktober 2007 at 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*

  5. Paul 10. Oktober 2007 at 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!!

  6. Christian 10. Oktober 2007 at 22:33 #

    Vielen Dank für den Tipp. Lässt sich bestimmt mal bei einer Seite einsetzen.

  7. Carsten 11. Oktober 2007 at 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?

  8. Carsten 12. Oktober 2007 at 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…

  9. dennis 20. August 2008 at 08:37 #

    Sehr cool gemacht. Werde das bei mir auch mal einsetzen, sofern ich eine Tabelle dafür habe ^^.

Trackbacks

  1. Daves Blog » Blog Archive » Tabellen verschönern mit Tablecloth - 9. Oktober 2007

    [...] Gefunden im Dr. Web Weblog [...]

  2. Hübsche Tabellen mit CSS und Javascript - Ankes und HGs Blogin - 9. Oktober 2007

    [...] Tabellen aufpolieren mittels Tablecloth, kann man vielleicht mal gebrauchen. via Dr. Web [...]

  3. Tablecloth - Tabellen aufgepeppt » blog.dasrecht.net - 9. Oktober 2007

    [...] Dr. Web Weblog] Abgelegt unter Webwork Trackback Share [...]

  4. links for 2007-10-10 - 10. Oktober 2007

    [...] Tabellen aufhübschen | Webdesign, Javascript (tags: webdesign tables css javascript) [...]

  5. Hübsche Tabellen gestallten » blog-webdesign - 10. Oktober 2007

    [...] Via [...]

Hinterlasse eine Antwort

Bitte bei weiteren Kommentaren per Email benarichtigen! Auch möglich: Abo ohne Kommentar.

Spam protection by WP Captcha-Free