enrico: Übertragung einer HTML-Tabelle in CSS-DIVs

SELF-Forum

Übertragung einer HTML-Tabelle in CSS-DIVs

enrico
– Informationen zu den Bewertungsregeln

Hallo und guten Abend,

ich habe über die herkömmliche - und mittlerweile wohl nicht mehr empfehlenswerte - Art und Weise
eine Tabelle zusammengestellt, die folgende Ausgabe bewirkt:

+----+---------------------------------+-------+-----+
|    |                                 |       |     |
+----+---------------------------------+-------+-----+
|                                                    |
+----------------------------------------------------+

Erreicht habe ich dies über folgenden HTML-Code:

<table width="100%">
      <tr>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_Eck_links_oben.png" width="13" height="13"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_oben.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_oben.png" width="23" height="13"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_oben.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_oben.png" width="23" height="13"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_oben.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_oben.png" width="23" height="13"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_oben.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_Eck_rechts_oben.png" width="18" height="13"></td>
      </tr>
      <tr>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_links.png"></td>
         <td>Nr.</td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_senkrecht.png"></td>
         <td width="100%"><div align="center">Titel</div></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_senkrecht.png"></td>
         <td nowrap>Genre</td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_senkrecht.png"></td>
         <td>FSK</td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_rechts.png"></td>
      </tr>
      <tr>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_links.png" width="13" height="23"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_waagrecht.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_unten.png" width="23" height="23"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_waagrecht.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_unten.png" width="23" height="23"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_waagrecht.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_unten.png" width="23" height="23"></td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_waagrecht.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_T_rechts.png" width="18" height="23"></td>
      </tr>
      <tr>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_links.png"></td>
         <td colspan="7" width="100%">Inhalt</td>
         <td background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_rechts.png"></td>
      </tr>
      <tr>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_Eck_links_unten.png" width="13" height="18"></td>
         <td colspan="7" background="GRAFIKEN/LAYOUT/Tabelle_Rahmen_unten.png"></td>
         <td><img src="GRAFIKEN/LAYOUT/Tabelle_Eck_rechts_unten.png" width="18" height="18"></td>
      </tr>
   </table>

Ich möchte dieses Konstrukt nun in - hoffentlich - wesentlich kürzeren css-Code umwandeln.

Wie gehe ich hier am besten vor?
Wie würdet Ihr vorgehen?
Wie sähe Eure Struktur aus?
Welche Seiten könnt Ihr mir als Hilfestellung für einen css-Neuling empfehlen?

Vielen Dank im Voraus.

By the way: Ich finde dieses Forum wirklich absolute spitzenklasse...

Viele Grüße
enrico

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Übertragung einer HTML-Tabelle in CSS-DIVs

    suit
    – Informationen zu den Bewertungsregeln

    eine Tabelle zusammengestellt, die folgende Ausgabe bewirkt:

    vergiss einen moment die tabelle

    Ich möchte dieses Konstrukt nun in - hoffentlich - wesentlich kürzeren css-Code umwandeln.

    gute idee

    Wie gehe ich hier am besten vor?
    Wie würdet Ihr vorgehen?
    Wie sähe Eure Struktur aus?

    denke darüber nach, die das dokument aussehen soll, wenn es keine stylesheets, kein layout und sonst nix gibt - sprich wie ist es logisch stukturiert,

    hauptüberschrift/seitenkopf

    • breadcrumbs (wo bin ich?)
    • springe zu #menu, #suche
    • eigentlicher inhalt (gegliedert, mit überschriften aufgeschlüsselt)
    • #menu/seitennavigation
    • #suche
    • fussziele (copyright, impressumlink was auch immer)

    warum das menu unter dem inhalt: ganz einfach, wenn du eine lange navigation hast, sollte man diese nicht vor den wesentlichen inhalt stellen - das ist benutzerunfreundlich wenn man den text ohne stylesheet liest oder vorgelesen bekommt

    siehe als beispiel zb die wikipedia (nicht vom aufbau des codes sondern von der reihenfolge und struktur - die seite macht ohne css auch noch was her)
    http://de.wikipedia.org/wiki/Akademie_für_Jugendführung

    wenn du das gemacht hast, denk darüber nach, wie sich die seite im browser verhalten soll und wie du das ganze formatierst - und welche (gruppierenden) elemente du jetzt zusätzlich benötigst, um das ganze zu formatieren (meistens braucht man ein paar container für die grobe struktur)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln