mook: verschiedene Tabellenbreite innerhalb einer Tabelle

Hallo,

folgende Tabelle:

<table style="width:400px">
<tr><td style="width:80%">bla1</td><td style="width:20%">bla2</td></tr>
<tr><td style="width:20%">blu1</td><td style="width:80%">blu2</td></tr></table>

Ich moechte, dass die Breitenverhaeltnisse so aussehen, wie ich sie auch bestimmt habe.
Aber wenn ich sie mit dem Browser oeffne, habe ich fuer beide rows dieselben breitenverhaeltnisse.

so in etwa moechte ich das haben:

|---------|
|80   | 20|
|---------|
|20 |     |
|---------|

Kann mir jemand weiterhelfen?
danke

  1. Hallo mook,

    <table style="width:400px">
    <tr><td style="width:80%">bla1</td><td style="width:20%">bla2</td></tr>
    <tr><td style="width:20%">blu1</td><td style="width:80%">blu2</td></tr></table>

    |---------|
    |80   | 20|
    |---------|
    |20 |     |
    |---------|

    Dafür solltest du als erstes mit einer weiteren Zeile mit drei vordefinierten Zellen (die mittlere mit einer Breite von 60%) und dem colspan-Attribut arbeiten.

    Gruß Gernot

  2. so?

    <table width="400" border="0" cellspacing="0" cellpadding="0">

    <tr>
        <td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

    <tr>
              <td width="80%">&nbsp;</td>
            </tr>
        </table></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">

    <tr>
              <td width="80%">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
    </table>

    1. uups!

      doch lieber so:

      <table width="400" border="0" cellspacing="0" cellpadding="0">

      <tr>
          <td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

      <tr>
                <td width="80%">&nbsp;</td>
              </tr>
          </table></td>
          <td width="20%">&nbsp;</td>
        </tr>
        <tr>
          <td width="20%">&nbsp;</td>
          <td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">

      <tr>
                <td width="80%">&nbsp;</td>
              </tr>
          </table></td>
        </tr>
      </table>

      1. aha, danke.
        hm. etwas 'leichtere'(im sinne von weniger codes) loesung per css gibt es nicht..?

        uups!

        doch lieber so:

        <table width="400" border="0" cellspacing="0" cellpadding="0">

        <tr>
            <td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

        <tr>
                  <td width="80%">&nbsp;</td>
                </tr>
            </table></td>
            <td width="20%">&nbsp;</td>
          </tr>
          <tr>
            <td width="20%">&nbsp;</td>
            <td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">

        <tr>
                  <td width="80%">&nbsp;</td>
                </tr>
            </table></td>
          </tr>
        </table>

        1. Hallo mook,

          ohne Tim zu nahe treten zu wollen, die klassische Lösung ist das nicht, dann schon eher diese hier:

            
          <table style="[code lang=css]width:100%;table-layout:fixed
          ~~~" border="1">  
          <colgroup>  
            <col width="20%">  
            <col width="60%">  
            <col width="20%">  
          </colgroup>  
          <tr>  
           <td colspan="2" style="`width:80%`{:.language-css}">&nbsp;</td>  
           <td style="`width:20%`{:.language-css}">&nbsp;</td>  
          </tr>  
          <tr>  
           <td  style="`width:20%`{:.language-css}">&nbsp;</td>  
           <td colspan="2"  style="`width:80%`{:.language-css}">&nbsp;</td>  
          </tr>  
          </table>  
          [/code]  
            
          Gruß Gernot
          
          1. ah~ das ist es genau.
            danke Gernot
            danke Tim.

            Hallo mook,

            ohne Tim zu nahe treten zu wollen, die klassische Lösung ist das nicht, dann schon eher diese hier:

            <table style="[code lang=css]width:100%;table-layout:fixed

            
            > <colgroup>  
            >   <col width="20%">  
            >   <col width="60%">  
            >   <col width="20%">  
            > </colgroup>  
            > <tr>  
            >  <td colspan="2" style="`width:80%`{:.language-css}">&nbsp;</td>  
            >  <td style="`width:20%`{:.language-css}">&nbsp;</td>  
            > </tr>  
            > <tr>  
            >  <td  style="`width:20%`{:.language-css}">&nbsp;</td>  
            >  <td colspan="2"  style="`width:80%`{:.language-css}">&nbsp;</td>  
            > </tr>  
            > </table>  
            > [/code]  
            >   
            > Gruß Gernot