Florian M.: Tabellen-Layout

Guten abend,

ich benötige ein wenig Hilfe, in Bezug auf mein Tabellen-Layout.
Die Struktur ist unten abgebildet. Etwas funktioniert nicht:
Beachtet mal die Höhe der Zelle bei dem "Willkommen". So möchte
ich sie nicht haben. Sie sollte in etwa 10px hoch sein (oder weniger ... je nach Schriftgröße des Textes).
Daher habe ich ihr eine feste Höhe vergeben -> 10.
Trotzdem funktioniert es nicht. Woran kann dies liegen?

Danke schon einmal im Voraus.

Florian M.

PS: Ich benutze Windows 2000 + IE6 + VIM
Bild1 u. Bild2 -> sollen Platzhalter für spätere Grafiken sein.

<html>
<head>
<title>Title</title>
</head>

<body>
<table width="750" border="1" cellspacing="3" cellpadding="3" align="center">
  <tr>
    <td colspan="3">Banner logo</td>
  </tr>
  <tr>
    <td rowspan="2" width="20%"><img src="bild1.jpg" width="116" height="91"></td>
    <td width="60%" height="10">Willkommen</td>
    <td rowspan="2" width="20%"><img src="bild2.jpg" width="116" height="91"></td>
  </tr>
  <tr>
    <td rowspan="3" height="200">Text</td>
  </tr>
  <tr>
    <td>
 link<br>
       link<br>
       link<br>
       link<br>
       link<br>
       link</td>
    <td>rechts</td>
  </tr>
  <tr>
    <td>
 link<br>
        link<br>
       link<br>
       link </td>
    <td>rechts unten</td>
  </tr>
</table>
</body>
</html>

  1. Hallo,

    es liegt an der Höhe der beiden Bilder:

    »» <td rowspan="2" width="20%">
      »»  <img src="bild1.jpg" width="116" height="91">
      »» </td>                            ----------/

    Die Zellenhöhe einer Zeile richtet sich nach der höchsten Angabe, in Deinem Fall 'height="91"'.

    Gruß
    FB

    1. Hallo FB,

      welche Lösungsmöglichkeiten würdest Du mir raten?
      Besteht die Chance über CSS dieses Problem aus der Welt zu schaffen?
      Oder wäre es besser eine neue Tabelle in der jeweiligen Zelle zu
      erstellen?

      danke nochmal für die Antwort.

      Florian M.

      1. Hallo Florian,

        schaue Dir mal folgendes an:

        <html>
         <head>
          <title>Something wicked this way comes...</title>
         </head>
         <body>
          <div align='center'>
           <!--banner logo-->
           <table border='1' cellpadding='3' cellspacing='3' width='750'>
            <tr valign='top'>
             <td align='left'>Something wicked this way comes...</td>
            </tr>
           </table>
           <!--alles unterhalb des logos-->
           <table border='1' cellpadding='3' cellspacing='3' width='750'>
            <tr valign='top'>

        <td>
              <table border='1' cellpadding='3' cellspacing='3'>
               <tr valign='top'>
                <td><img src='1.png' height='91' width='116'></td>
               </tr>
               <!--links-->
               <tr valign='top'>
                <td>
                 <table border='0' cellpadding='3' cellspacing='3' width='100%' height='100%'>
                  <tr valign='top'>
                   <td>link #1</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #2</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #3</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #4</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #5</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #6</td>
                  </tr>
                 </table>
                </td>
               </tr>
               <!--links unten-->
               <tr valign='top'>
                <td>
                 <table border='0' cellpadding='3' cellspacing='3' width='100%' height='100%'>
                  <tr valign='top'>
                   <td>link #1</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #2</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #3</td>
                  </tr>
                  <tr valign='top'>
                   <td>link #4</td>
                  </tr>
                 </table>
                </td>
               </tr>
              </table>
             </td>

        <!--willkommen-->
            <td width='100%'>
             <table border='1' cellpadding='3' cellspacing='3' width='100%'>
              <tr valign='top'>
               <td>WILLKOMMEN</td>
              </tr>
             </table>

        <!--text-->
             <table border='0' cellpadding='3' cellspacing='3' width='100%' height='350'>
              <tr valign='top'>
               <td>TEXT</td>
              </tr>
             </table>
            </td>

        <!--rechts-->
             <td>
              <table border='1' cellpadding='3' cellspacing='3'>
               <tr valign='top'>
                <td><img src='2.png' height='91' width='116'></td>
               </tr>
               <tr valign='top'>
                <td>
                 <table border='0' cellpadding='3' cellspacing='3' width='100%'>
                  <tr valign='top'>
                   <td>rechts #1</td>
                  </tr>
                  <tr valign='top'>
                   <td>rechts #2</td>
                  </tr>
                 </table>
                </td>
               </tr>
               <!--rechts unten-->
               <tr valign='top'>
                <td>
                 <table border='0' cellpadding='3' cellspacing='3' width='100%'>
                  <tr valign='top'>
                   <td>rechts unten #1</td>
                  </tr>
                  <tr valign='top'>
                   <td>rechts unten #2</td>
                  </tr>
                 </table>
                </td>
               </tr>
              </table>
             </td>

        </tr>
           </table>
          </div>
         </body>
        </html>

        Viel Spass.

        Gruss FB