Tabelle durch CSS DIV ersetzen

[Marcus V.]

Ich möchte langsam mal meine Seiten auf CSS umrüsten.
Mir sind einige Mechanismen noch nicht ganz klar.

Folgendes bekomme ich z.B. nicht anständig gelößt.
Warscheinlich denke ich zu kompliziert.

Kleine Tabelle mit 4 Spalten, in CSS ohne <table>.

Bin mir auch nicht so ganz klar ob man da div Container nehmen soll, oder besser nicht. Ich hab mal von div Suppen gelesen und man diese vermeiden sollte.
Und wenn man einsteigt, will man ja auch nicht direkt das "alte und schlechte" Webdesign, gegen "neues und schlechtes" Webdesign austauschen.

Die Tabelle sieht so aus :

<table width='100%' border='0'><tr>
  <td width='160'><a href='test.htm' target='_blank'><img src='pic.png' alt='Blabla' width='150' height='108'></a></td>
  <td width='30%'><a href='test.htm' target='_blank'>Blabla</a></td>
  <td width='160'><a href='test.htm' target='_blank'><img src='pic.png' alt='Blubb' width='150' height='126'></a></td>
  <td width='30%'><a href='test.htm' target='_blank'>Blubb</td>
</tr></table>

Und sollte jetzt in ein schönes CSS gebracht werden.

Für Tipps und "Schnipsel" würde ich mich freuen.

[wucher wichtel]

Hallo!

Die Tabelle sieht so aus :

Du musst dir _immer_ überlegen, was deine Tabelle enthält. Wenn es tabellarische Daten sind (Stundenplan, Fahrplan...) dann ist eine Tabelle angebracht. Wenn es ein Textabsatz ist, dann nimm ein <p>. Wenn es eine Liste ist, dann nimm <ul>, <ol>, oder <dl>. So kann man das unendlich weiter machen :) In deinem Fall ist es scheinbar eine Navigation. Eine Navigation enthält eine _Liste_ von Links. Also wäre es hier sinnvoll <ol> oder <ul> zu benutzen.

<table width='100%' border='0'><tr>
  <td width='160'><a href='test.htm' target='_blank'><img src='pic.png' alt='Blabla' width='150' height='108'></a></td>
  <td width='30%'><a href='test.htm' target='_blank'>Blabla</a></td>
  <td width='160'><a href='test.htm' target='_blank'><img src='pic.png' alt='Blubb' width='150' height='126'></a></td>
  <td width='30%'><a href='test.htm' target='_blank'>Blubb</td>
</tr></table>

in deinem Beispiel würde es so aussehen:

  
<ul id="navi">  
  <li>  
   <a href="test.html">  
    <img src="bla.png" alt="bla" width="150" height="108">  
   </a>  
  </li>  
</ul>  

Da kannst du jetzt beliebig viele Menüpunkte mittels <li> eiinfügen. Damit sind auch verschachtelte Menüs möglich.

Hier noch ein paar Links zum Weiterlesen:
 * http://de.selfhtml.org/css/layouts/index.htm
 * http://css.fractatulum.net/sample/suppe/div_suppe1.htm
 * http://de.wikipedia.org/wiki/Divitis

ciao, ww

[Marcus V.]

Danke ...

Problem damit gelößt und wieder etwas mehr Licht im dunkel.