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

Beitrag lesen

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