Chris: 2 Tabellen in einer großen ausrichten

Hi :)

Ich habe eine Tabelle mit 100% x 100%, da drin sind 3 Tabellen, die mittlere soll 500px hoch sein, die beiden anderen sollen den leeren Raum ausfüllen.

Code:
------------------------------------------------------------
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle"> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
      <table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
------------------------------------------------------------

Wie schaffe ich es denn, dass die beiden schwarzen Tabellen den leeren Raum auffüllen?

  1. Hi Chris,

    Ich habe eine Tabelle mit 100% x 100%, da drin sind 3 Tabellen, die mittlere soll 500px hoch sein, die beiden anderen sollen den leeren Raum ausfüllen.

    Bist du sicher, dass du nicht lieber ein barrierefreies CSS Layout verwenden willst?

    Wie schaffe ich es denn, dass die beiden schwarzen Tabellen den leeren Raum auffüllen?

    Warum gibst du nicht einfach der äußeren Tabelle die schwarze Hintergrundfarbe? Dann brauchst du die beiden "schwarzen" Tabellen innen gar nicht.

    Abgesehen davon, sieht mir dein Code ziemlich nach Dreamweaver Style aus...

    MfG, Dennis.

    --
    Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:( mo:} zu:|
    Die Definition des SelfCodes ist hier zu finden, es gibt auch einen Encoder.
    1. Bist du sicher, dass du nicht lieber ein barrierefreies CSS Layout verwenden willst?

      Im Moment ja

      Wie schaffe ich es denn, dass die beiden schwarzen Tabellen den leeren Raum auffüllen?

      Warum gibst du nicht einfach der äußeren Tabelle die schwarze Hintergrundfarbe? Dann brauchst du die beiden "schwarzen" Tabellen innen gar nicht.

      Naja .. das war nur ein simples Beispiel, ich kann die Hintergrundfarbe nicht verwenden, weil da noch Inhalte drin sind und die müssen an den freien Raum angepasst werden.

      Ich bräuchte schon genau die Lösung, wonach ich gefragt habe.

  2. Hallo Chris,

    <body>
    <table width="100%" height="100%" border="1" height="">
      <tr>
        <td height="50%">
         <table width="100%" height="100%" border="1" bgcolor="#000000">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
      </td>
      </tr>
      <tr>
        <td height="400">
          <table width="100%" height="100%" border="1" bgcolor="#CCCCCC">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td height="50%">
          <table width="100%" height="100%" border="1" bgcolor="#000000">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    </body>

    Mit Gruß

    1. Hi Chris,

      vielleicht hilft dir das ja auch weiter, ist eine andere Möglichkeit, könte man ausbauen.

      <html>
         <head>
           <style type="text/css">
           <!--
           body { margin:0; padding:0; background-color:silver; }
           table { width:100%; height:100%; border-collapse:collapse; }
           td { border:solid 0; padding:0; }
           div { height:400px; background-color:gray; }
           -->
           </style>
         </head>
      <body>
         <table>
           <tr>
             <td>
               Über dem div-Element
               <div>
                 In dem div-Element
                </div>
                Unter dem div-Element
              </td>
           </tr>
         </table>
      </body>
      </html>

      Gruß von Aybee