Fokko: Tabellenbreiten

Hi,

ich möchte gerne folgendes Layout mit Hilfe von Tabellen verwirklichen.

Tabellenbreite=100%
1. Zeile: Header mit colspan=3
2. Zeile: Menu mit Breite=60
          Inhalt mit variabler Breite
          Hilfe mit Breite=60

Wie kriege ich es hin das die Menus immer auf 60 bleiben und nur der Inhalt skaliert, wenn ich das Fenster kleiner oder größer mache.

Danke

  1. Hallo,

    ich möchte gerne folgendes Layout mit Hilfe von Tabellen verwirklichen.

    Tabellenbreite=100%

    1. Zeile: Header mit colspan=3
    2. Zeile: Menu mit Breite=60
                Inhalt mit variabler Breite
                Hilfe mit Breite=60

    Wie kriege ich es hin das die Menus immer auf 60 bleiben und nur der Inhalt skaliert, wenn ich das Fenster kleiner oder größer mache.

    Gib den Zellen links und rechts in der zweiten Zeile je die Breite 60.
    A propos: 60 was? 60 Pixel scheint mir sehr, sehr wenig zu sein.
    Aber sei's drum. Du kannst es ja immer noch aendern.

    HTML:
    <table id="layouttabelle">
      <tr><td id="header" colspan="3">Header</td></tr>
      <tr>
        <td id="menue">Menue...</td>
        <td id="inhalt">Inhalt...</td>
        <td id="hilfe">Hilfe...</td>
      </tr>
    </table>

    CSS:
    table#layouttabelle { width:100%; margin-top:0; }
    td#menue { width:60px; }
    td#hilfe { width:60px; }

    Die uebrigen IDs habe ich mal schon vorsorglich ins HTML geschrieben,
    auch wenn Du sie fuer diesen Zweck eigentlich noch nicht brauchst.

    ---

    Veraltet - mit HMTL-Attributen - wuerde die Geschichte so aussehen:

    <table width="100%">
      <tr><td colspan="3">Header</td></tr>
      <tr>
        <td width="60">Menue...</td>
        <td>Inhalt...</td>
        <td widht="60">Hilfe...</td>
      </tr>
    </table>

    ---

    Du kannst beides (HTML + CSS) auch kombinieren (im Zweifelsfalle sollte CSS "gewinnen"),
    aber ich wuerde nur noch voll auf CSS setzen.

    Lektuere:
    http://selfhtml.teamone.de/css/index.htm
    http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm
    http://www.w3.org/TR/REC-CSS2/tables.html

    http://selfhtml.teamone.de/html/tabellen/gestaltung.htm#breiten_hoehen
    http://selfhtml.teamone.de/html/tabellen/aufbau.htm#vordefinieren

    Gruesse,

    Thomas

    1. Gib den Zellen links und rechts in der zweiten Zeile je die Breite 60.
      A propos: 60 was? 60 Pixel scheint mir sehr, sehr wenig zu sein.
      Aber sei's drum. Du kannst es ja immer noch aendern.

      HTML:
      <table id="layouttabelle">
        <tr><td id="header" colspan="3">Header</td></tr>
        <tr>
          <td id="menue">Menue...</td>
          <td id="inhalt">Inhalt...</td>
          <td id="hilfe">Hilfe...</td>
        </tr>
      </table>

      CSS:
      table#layouttabelle { width:100%; margin-top:0; }
      td#menue { width:60px; }
      td#hilfe { width:60px; }

      Die uebrigen IDs habe ich mal schon vorsorglich ins HTML geschrieben,
      auch wenn Du sie fuer diesen Zweck eigentlich noch nicht brauchst.


      Veraltet - mit HMTL-Attributen - wuerde die Geschichte so aussehen:

      <table width="100%">
        <tr><td colspan="3">Header</td></tr>
        <tr>
          <td width="60">Menue...</td>
          <td>Inhalt...</td>
          <td widht="60">Hilfe...</td>
        </tr>
      </table>


      Du kannst beides (HTML + CSS) auch kombinieren (im Zweifelsfalle sollte CSS "gewinnen"),
      aber ich wuerde nur noch voll auf CSS setzen.

      Lektuere:
      http://selfhtml.teamone.de/css/index.htm
      http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm
      http://www.w3.org/TR/REC-CSS2/tables.html

      http://selfhtml.teamone.de/html/tabellen/gestaltung.htm#breiten_hoehen
      http://selfhtml.teamone.de/html/tabellen/aufbau.htm#vordefinieren

      Gruesse,

      Thomas

      Das habe ich auch schon probiert nur leider geht es nicht.

      <HTML>
      <BODY leftmargin="0" topmargin="0">
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td colspan="3"><img src="images/header.gif" width="220"></td>
        </tr>
        <tr>
         <td valign="top" width="120">
            ###MENU###
         </td>
         <td valign="top">
            ###CONTENT###
         </td>
         <td valign="top" width="120">
            ###HELP###
         </td>
        </tr>
      </table>
      </BODY>
      </HTML>

      mit diesem Layout haben die zelen am Rand zwar eine mindestbreite von 120 px aber wenn ich das fenster größer mache skalieren sie auch größer, ich will aber das nur der mittlere teil mit skaliert