Tabellen als Div Container

  • Hallo alle zusammen,

    man soll ja anstelle von tabellen nur noch div container verwenden.

    Nun habe ich versucht meine index.html (Tabellen verseucht ) durch div container zu ersetzen.

    Aber iwie haut das nicht so hin. Am ende sieht alles sehr komisch aus.
    Wäre jemand so nett und könnte mir meine index.html mal anpassen damit ich sehe wie es richtig aussehen muss.

    Schon mal vielen Dank

    Hier die index.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Titel - Startseite</title>

    </head>
    <body id="page1">

    <table class="main_table">
    <tr>
    <td class="site_center">
    <table class="site_center1">
    <tr>
    <td>
    <!-- Header -->
    </td>
    </tr>
    <tr>
    <td>
    <table id="content">
    <tr>
    <td>
    <table class="row2">
    <tr>
    <td>
    <table class="col2">
    <tr>
    <td style="height:314px; width:233px" class="bg_color">
    <!-- Inhalt linke Box -->
    </td>
    </tr>

    <tr>
    <td style="height:28px"></td>
    </tr>
    </table>
    </td>
    <td>
    <table class="col3">
    <tr>
    <td class="box1">
    <div>
    <img alt="" src="" /><br />
    <p style="line-height:20px;">
    <!-- Content -->
    </p>
    <img alt="" src="" class="indent" />
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <table class="box2">
    <tr>
    <td style="width:295px">
    <div style="margin:0px 30px 10px 48px">
    <img alt="" src="" />
    </div>
    </td>
    <td style="width:1px" class="bg_li_bot"><img alt="" style="margin-top:79px" src="" /></td>
    <td style="width:295px">
    <div style="margin:0px 30px 10px 48px">
    <img alt="" src="" />
    </div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <table>
    <tr>
    <td>
    <table id="footer">
    <tr>
    <td class="row1"></td>
    </tr>
    <tr>
    <td class="row2">
    <div style="float:left; width:600px;">
    <!-- Footer Inhalt -->
    </div>

    <!-- PAYPAL SPENDE BUTTON -->
    <div>
    <!-- Button -->

    </div>
    <!-- PAYPAL SPENDE BUTTON -->
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- Monitoring -->
    </body>
    </html>

  • Zitat

    man soll ja anstelle von tabellen nur noch div container verwenden.


    Diese Aussage ist so falsch. Man soll nach wie vor Tabellen verwenden, allerdings nur für tabellarisch strukturierte Inhalte und nicht für's Seitenlayout.

    Dein Code macht in keinster Weise Sinn, so dass er auch nicht umgebaut werden kann. Er ist weder valide, noch ist erkennbar, was damit dargestellt werden soll.
    Beschäftige dich zunächst mit HTML und CSS und eigne dir einige Grundkenntnisse an.
    Einige Layoutbeispiele - ohne Tabellen - findest du z.B. hier und kannst sie anhand des Quelltextes nachbauen:
    dreispaltiges Layout
    zweispaltiges Layout