Thomas: Tabelle effektiver darstellen

Hallo zusammen,

ich betreibe eine Webseite (http://www.autokredit.org/), bei dem ich aktuell mit dem Plugin von Google (Page Speed) die Ladegeschwindigkeit deutlich verbessert habe.

Die Anzahl der Punkte ist durch diverse Maßnahmen von 70 auf 95 (von 100) hochgegangen.

Selbst die kleinen Bilder auf der Startseite sind als Base64 hinterlegt. Ja, ich habe mir da echt viel Mühe gegeben (-:

Nun sitze ich an einem Problem, wo mir leider das Wissen dafür fehlt.

Vermutlich gibt es eine ganz einfache Lösung.

Es geht um die Tabelle auf der Startseite.

Ich möchte diese Tabelle gerne effektiver und einfacher gestalten.
Momentan sind das z.B. so aus

<tr style="background-color: #e1ead5;" class="over">
<td style="border-collapse: collapse; border-bottom-color:#b4b4b4; border-top-color:#b4b4b4; border-left-color:#b4b4b4; border-right-color:#b4b4b4; border: 1px solid #b4b4b4; border-spacing: 1pt;" class="middle" align="center">

Wie kann ich so eine Tabelle besser gestalten und die Befehle auslagern, bzw. irgendwie gesammelt an den Anfang der Tabelle stellen?

Vielen Dank für Eure Hilfe.

Gruß Thomas

  1. inline styles im style-Attribut lassen keine Zusammenfassungen zu. Schau Dir mal das style-Tag und link rel="stylesheet" an.

    Gruß, LX

    --
    RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
    1. Nachtrag: Da Du unterschiedliche Formatierungen für manche Zellen hast, kannst Du für den Header th und ansonsten tr mit den Klassen .odd/.even verwenden.

      Die Liste mit den Fragen ist übrigens standardmäßig eine unnumerierte Liste, das ist semantischer; Bei den Tipps kannst Du auf eine Tabelle verzichten, wenn Du stattdessen eine Liste von gefloateten Elementen mit einer Mindestbreite in einem div mit entsprechender Breite von 2 dieser Elemente (ggf. +1px, um bei Skalierung sicher zu gehen) nimmst.

      Gruß, LX

      --
      RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
  2. [latex]Mae  govannen![/latex]

    Selbst die kleinen Bilder auf der Startseite sind als Base64 hinterlegt. Ja, ich habe mir da echt viel Mühe gegeben (-:

    Das direkte Einbinden der Bilder ist Unsinn. Üblicherweise werden Bilder genau ein Mal vom Server geladen und dann aus dem Browser-Cache abgerufen, egal auf welcher Unterseite man sich befindet. Bei Quelltext-Einbindung muß man jede(!) Bild-Ressource bei jedem(!) Seitenaufruf mit herunterladen (plus ca. jeweils(!) 30% der Bildgröße für Base64).
    Benutze stattdessen CSS-Sprites, dann hast du nur einmalig einen zusätzlichen Request.

    Stur lächeln und winken, Männer!
    Kai

    --
    Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
    in Richtung "Mess up the Web".(suit)
    SelfHTML-Forum-Stylesheet
    1. Das direkte Einbinden der Bilder ist Unsinn. Üblicherweise werden Bilder genau ein Mal vom Server geladen und dann aus dem Browser-Cache abgerufen, egal auf welcher Unterseite man sich befindet. Bei Quelltext-Einbindung muß man jede(!) Bild-Ressource bei jedem(!) Seitenaufruf mit herunterladen (plus ca. jeweils(!) 30% der Bildgröße für Base64).
      Benutze stattdessen CSS-Sprites, dann hast du nur einmalig einen zusätzlichen Request.

      Das direkte einbinden ist vor allem dann interessant, wenn man keine zusätzlichen HTTP-Requests stattfinden dürfen oder der Overhead egal ist.

      Ein Beispiel für eine Sinnvolle anwendung könnte z.B. ein SVG-Hintergrund sein den man nur 1x im CSS-File braucht und dort eben als base64 oder urlencoded reinpackt. Das spart einen HTTP-Request und erzeugt dennoch keinen Overhead.