✔ Tabelle in divs konvertieren

Transmitter · 9. Juli 2010

Hallo,

ich habe folgendes:

Code:

<table width="640" height="101" border="0">
  <tr>
    <td rowspan="2">Bild</td>
    <td colspan="2">&Uuml;berschrift</td>
  </tr>
  <tr>
    <td><p>Titel 1</p>
    <p>Titel 2  </p></td>
    <td>Daten<br />
      Daten<br />
      Daten</td>
  </tr>
</table>

Und würde das gerne ohne Tabelle erstellen.
Kennt jemand dafür ein Tutorial irgendwo?
Oder eine Website wo es ohne Tabellen gemacht wird?

Danke schon mal
Bye, Transmitter

Maik · 9. Juli 2010

Hi,

eine Anleitung, die sich speziell dem Konvertieren von Tabellenstrukturen in die einzelnen DIV-Blöcke widmet, ist mir persönlich so nicht bekannt, dafür aber einige Artikel, Workshops, Demos, die sich mit tabellenlosen Layouts beschäftigen, und die CSS-Technik beleuchten, die dahinter steckt.

CSS stellt dir zum einen die tabellenspezifischen display-Eigenschaftswerte zur Verfügung (siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display), um eine Tabellenstruktur beispielsweise mit dem allg. Blockelement <div> nachzuzeichnen (siehe http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm), die in der IE-Familie (5.x, 6, 7, 8) aber erst seit der aktuellen Version interpretiert werden.

Zum anderen kannst du die DIV-Blöcke mit Hilfe der float-Eigenschaft (siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float) aus ihrem normalen Textfluß nehmen, und sich nebeneinander umfliessen lassen. Details dazu erfährst du in der Linkliste.

Zum Thema "CSS-Layouts" kannst du zusätzlich in unserem LDM stöbern gehen, wo ich weiteres Anschauungsmaterial (Beispiele) zusammengetragen habe

http://www.tutorials.de/forum/local_links/links/164

Eine Anmerkung zum Schluß: Bitte nicht dem Irrglauben aufsitzen, dass jegliche Tabellen aus dem Code zu verbannen, und durch "DIVs & CSS" zu ersetzen wären. Wo eine Tabelle im HTML-Code semantisch ihre Daseinsberechtigung besitzt, die Daten in tabellerischer Form aufzubereiten, zum Vergleich gegenüberzustellen, braucht keine DIV-Suppe (http://webstandard.kulando.de/post/...pe_oder_div_chaos_-_wie_kann_man_es_vermeiden) aufgetischt werden.

mfg Maik

Transmitter · 10. Juli 2010

Danke dir .. hat geholfen.

Habe nochmal einen Barebone gebaut .. es lag nur an der Reihenfolge:

Code:

<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.bild {
    border: 1px solid #666666;
        float:left;
    margin:0px 15px 0 0;
    width:100px;
    height:100px;
}



.ueberschrift
{
    width:490px;
    float:left;
    margin:0 15px 0 0;
}
 
.titel1, .titel2
{
    width:230px;
    float:left;
    margin:10px 15px 0 0;
}


.daten
{
    width:230px;
    float:right;
    margin:0 15px 0 0;
}
-->
</style>
</head>

<body>
<table width="566" border="0">
  <tr>
    <td><table width="640" height="101" border="0">
      <tr>
        <td rowspan="2">Bild</td>
        <td colspan="2">&Uuml;berschrift</td>
      </tr>
      <tr>
        <td><p>Titel 1</p>
            <p>Titel 2 </p></td>
        <td>Daten<br />
          Daten<br />
          Daten</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>
        <div class="bild">Bild</div> 
        <div class="ueberschrift"> &Uuml;berschrift</div> 
        <div class="titel1">Titel 1</div>
        <div class="daten">Daten<br />
        Daten<br />
        Daten</div>
        <div class="titel2">Titel 2</div>
    </td>
  </tr>
</table>
</body>

Bye, Transmitter

Maik · 10. Juli 2010

Hm... ich dachte du wolltest es ohne Tabelle umsetzen, und diese in DIVs konvertieren :suspekt:

Die Nachbildung deiner gestern vorgestellten Tabelle mit DIV-Blöcken kannst du übrigens in dem Thema Hilfe bei div Positionierung vom heutigen Tage einsehen ;-)

mfg Maik

✔ Tabelle in divs konvertieren

Transmitter

Erfahrenes Mitglied

Maik

Transmitter

Erfahrenes Mitglied

Maik

Neue Beiträge