B-18Plus: Tabelle-Ausrichtung

Moinsen allerseits,
ich möchte ein bestimmtes Design für einen Artikel haben und habe mir dafür die folgende Tabellenkostruktion ausgedacht:

Die 1: Header
Die 2: Texte
Die 3: Äusseres Design

Mein Problem ist zunächst einmal dass ich es nicht schaffe dass die verschiedenen Textfelder (2) untereinander erscheinen, iwie wende ich rowspan falsch an...im folgenden mal mein bisheriger Entwurf, ich bitte um die Verbesserung dessselben:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html">
  <title></title>
  <meta name="" content="">
</head>

<body bgcolor="#F4F4F4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>

<table width="610" cellspacing="0">
        <tr>
          <th><!-- Design_oben_links!--></th>
          <th><!-- Design_oben_mitte!-->
          <img src="Design_oben_mitte.jpg" width="600" height="5" border="0" alt="">
          </th>
          <th><!-- Design_oben_rechts!--></th>
        </tr>
        <tr>
          <th rowspan="19"><!-- Design_mitte_links !--></th>
          <th><!--Header!-->
          <img src="http://img527.imageshack.us/img527/2010/2bundesligavi1.png" width="600">
          </th>
          <th rowspan="19"><!-- Design_mitte_rechts !--></th>
        </tr>
        <tr>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_1!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_2!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_3!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_4!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_5!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_6!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_7!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Spiel_8!--></th>
          <th><!-- Design_Zwischen-Artikel!-->
          <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
          </th>
          <th><!-- Sonstiges!--></th>
        </tr>
        <tr>
          <th><!-- Design_unten_links!--></th>
          <th><!-- Design_unten_mitte!-->
          <img src="Design_unten_mitte.jpg" width="600" height="5" border="0" alt="">
          </th>
          <th><!-- Design_unten_rechts!--></th>
        </tr>
        </table>
</center>
</body>
</html>

------------------

lg benni

Schöne Ostertage euch allen!

  1. Sooo..ich habe mal weiterprobiert und bin nun soweit:

    Das Problem ist nun dass ich nicht weiss wie ich die weissen lücken zwischen den verschiedenen Teilen wegbekomme:

    http://img149.imageshack.us/img149/5219/vorschauzt9.jpg

    Hier noch der entsprechende HTML Text...würde mich freuen wenn mir jmd. helfen könnte:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html">
      <title></title>
      <meta name="" content="">
    </head>

    <body bgcolor="#F4F4F4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <center>

    <table width="610" cellspacing="0" border="0">
            <tr>
              <th><!-- Design_oben_links!-->
              <img src="Design_oben_links.jpg" width="5" height="5" border="0" alt="">
              </th>
              <th><!-- Design_oben_mitte!-->
              <img src="Design_oben_mitte.jpg" width="600" height="5" border="0" alt="">
              </th>
              <th><!-- Design_oben_rechts!-->
              <img src="Design_oben_rechts.jpg" width="5" height="5" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th rowspan="19"><!-- Design_mitte_links !-->
              <img src="Design_mitte_links.jpg" width="5" height="800" border="0" alt="">
              </th>
              <th  bgcolor="#87DB7D"><!--Header!-->
              <img src="http://img527.imageshack.us/img527/2010/2bundesligavi1.png" width="600">
              </th>
              <th rowspan="19"><!-- Design_mitte_rechts !-->
              <img src="Design_mitte_rechts.jpg" width="5" height="800" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_1!-->Spiel1</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_2!-->Spiel2</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_3!-->Spiel3</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_4!-->Spiel4</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_5!-->Spiel5</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_6!-->Spiel6</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_7!-->Spiel7</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Spiel_8!-->Spiel8</th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
              <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
              </th>
            </tr>
            <tr>
              <th  bgcolor="#87DB7D"><!-- Sonstiges!--></th>
            </tr>
            <tr>
              <th><!-- Design_unten_links!-->
              <img src="Design_unten_links.jpg" width="5" height="5" border="0" alt="">
              </th>
              <th><!-- Design_unten_mitte!-->
              <img src="Design_unten_mitte.jpg" width="600" height="5" border="0" alt="">
              </th>
              <th><!-- Design_unten_rechts!-->
              <img src="Design_unten_rechts.jpg" width="5" height="5" border="0" alt="">
              </th>
            </tr>
            </table>

    </center>
    </body>
    </html>

    -----------------------

    lg benni

    1. Sooo..ich habe mal weiterprobiert und bin nun soweit:

      mit css hättest du 30% des codes und keine probleme die du jetzt hast ;)

      versuch mal deine  <img src="Design_unten_rechts.jpg" width="5" height="5" border="0" alt=""> usw als hintergrundbilder einzubinden ...

      1. mit css hättest du 30% des codes und keine probleme die du jetzt hast ;)

        versuch mal deine  <img src="Design_unten_rechts.jpg" width="5" height="5" border="0" alt=""> usw als hintergrundbilder einzubinden ...

        »»

        Das Problem ist das cih kein CSS kann ;) ...naja, habs mal so gemacht wie du gesagt hast...oben funktioniert das so aber unten ist immernoch ne Lücke :(

        Bild:
        http://img522.imageshack.us/img522/539/vorschau3jo9.jpg

        Code:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
          <meta http-equiv="Content-Type" content="text/html">
          <title></title>
          <meta name="" content="">
        </head>

        <body bgcolor="#F4F4F4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <center>

        <table width="610" cellspacing="0" border="0" cellpadding="0">
                <TR>
                  <TD COLSPAN="3" cellspacing="0" border="0" cellpadding="0" background="Design_oben_groß.jpg">

        <center><img src="Platzhalter.png" width="5" height="5" border="0" alt="">  </center>
                  </TD>
               </TR>
                <tr>
                  <th rowspan="20" cellspacing="0" border="0" cellpadding="0"><!-- Design_mitte_links !-->
                  <img src="Design_mitte_links.jpg" width="5" height="800" border="0" alt="">
                  </th>
                  <th  bgcolor="#87DB7D"><!--Header!-->
                  <img src="http://img527.imageshack.us/img527/2010/2bundesligavi1.png" width="600">
                  </th>
                  <th rowspan="20"  cellspacing="0" border="0" cellpadding="0"><!-- Design_mitte_rechts !-->
               <img src="Design_mitte_rechts.jpg" width="5" height="800" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_1!-->
                  Ypiel 1
                  <!--<img src="msvduisburg_spieltaganalyse.png" width="500" height="50" border="0" alt="">  !-->
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_2!-->Spiel2</th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_3!-->Spiel3</th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_4!-->Spiel4</th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_5!-->Spiel5</th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_6!-->Spiel6</th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_7!-->Spiel7</th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Spiel_8!-->Spiel8</th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <th  bgcolor="#87DB7D"><!-- Sonstiges!-->Sonstiges</th>
                </tr>
                <tr>
                  <th bgcolor="#87DB7D" ><!-- Design_Zwischen-Artikel!-->
                  <img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
                  </th>
                </tr>
                <tr>
                  <td COLSPAN="3" cellspacing="0" border="0" cellpadding="0" background="Design_unten_groß.jpg">
                  <!--<img src="Design_unten.jpg" width="610" height="5" border="0" alt="">      !-->
                  <center><img src="Platzhalter.png" width="1" height="5" border="0" alt="">  </center>
                  </td>
               </tr>

        </table>

        </center>
        </body>
        </html>

        1. Das Problem ist das cih kein CSS kann ;) ...naja, habs mal so gemacht wie du gesagt hast...oben funktioniert das so aber unten ist immernoch ne Lücke

          beschränke dich auf das wesentliche

          nimm ALLE formatierungen aus der tabelle raus und kümmere dich NICHT ums design, wenn der code dann valide ist, kannst du dich ums css kümmern (ist nicht schwer, also zeit das zu lernen)

            
          <table>  
            <tr>  
              <th>kopf</th>  
            </tr>  
            <tr>  
              <td>zeile</td>  
            </tr>  
          </table>  
          
          

          mehr brauchst du nicht
          alternativ sollest du dir noch listen ansehen, ggf ist eine tabelle also das falsch für dich - alle dinge die nur 1 spalte haben sind per definition keine tabellen - 2 spaltige dinge sind ab und an defintionslisten, 3 spaltige fast immer tabellen

  2. Hallo,

    warum nutzt Du auch Tabellen, wo keine angebracht sind?

    Konzentriere Dich erst einmal nur auf die HTML-Elemente (Text entspricht <p> etc.), danach kümmerst Du Dich um das Aussehen der Seite mit CSS.

    Die Spieltabellen sind ja okay.

    Gruß, Ich