Korinna: Tabellenzelle grösser als die darin enthaltene Tabelle

Hallo Leute,

ich weiss, mann sollte keine Layouts mit Tabellen machen, aber für mich ist das der leichteste Weg um das gewünschte Bild hinzubekommen.
Nun habe ich aber ein Problem.
Ich habe eine grosse Tabelle (Tabelle1) über die ganze Seite für das grobe Layout. In dieser Tabelle1 habe ich in einer Zeile per rowspan zwei Zeilen zusammengefasst und darin ist Tabelle2 mit dem Inhalt untergebracht.
Links daneben ist die Menüleiste in der oberen Zeile. In dieser Zelle befindet sich Tabelle3. Diese Tabelle ändert sich je nachdem wieviele Menüpunkte angezeigt werden. Die Höhe der Zelle, in der sich Tabelle3 befindet passt sich aber nicht der Grösse der darin enthaltenen Tabelle an, sondern ist viel zu gross. Gibt es da eine Option für?
Hier noch ein paar Code-Schnipsel:

<table border="0"  class="tabelle1" cellspacing="0" cellpadding="0" >
<tr>
<td class="td_w10h10"></td>
<td class="td_w-Leiste_hbraun"></td>
<td class="td_w10h10"></td>
<td class="td_w-Rest"></td>
</tr>

<!-- Titelzeile -->
<tr>
<td class="td_h-Kopf_dbraun">&nbsp;</td>
<td class="td_hbraun"><img src="5.+April+2009-095_braun.jpg" alt="Lattenzaun" class="img2"></td>
<td class="td_dbraun">&nbsp;</td>
<td class="td_dbraun">

	<!-- Seitenkopf -->  
	<table border="0" class="tabelle4">  
	<tr>  
		<td class="td\_Kopf-ce"> Kurrer - Zaunbau </td>  
		<td class="td\_Kopf-ri"><img src="logo.gif" alt="Logo" class="img1"></td>  
	</tr>  
	</table>  
	<!-- ENDE Seitenkopf -->  

</td>  

</tr>
<!-- ENDE Titelzeile -->

<tr>
<td colspan="3" class="td_top"> <!-- HIER IST IRGENDWO DER FEHLER -->

	<!-- Menuepunkte -->  
	<table class="tabelle3" border="0" cellspacing="0" cellpadding="0" >  
	<tr>  
		<td class="td\_w10">&nbsp;</td>  
		<td class="td\_w-Leiste\_hbraun">&nbsp;</td>  
		<td class="td\_w10">&nbsp;</td>  
	</tr>  
	<tr>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td class="td\_padding\_hbraun"><a href="index.html" class="link">Startseite</a></td>  
		<td></td>  
	</tr>  
	<tr>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td class="td\_padding\_hbraun"><a href="wir.html" class="link">Wir über uns</a></td>  
		<td></td>  
	</tr>  
	<tr>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td class="td\_padding\_hbraun"><a href="leistungen.html" class="link">Leistungen</a></td>  
		<td></td>  
	</tr>  
	<tr>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td class="td\_padding\_hbraun"><a href="kontakt.html" class="link">Kontakt</a></td>  
		<td></td>  
	</tr>  
	<tr>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td class="td\_padding\_hbraun"><a href="impressum.html" class="link">Impressum</a></td>  
		<td></td>  
	</tr>  
	<tr>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
		<td class="td\_h5color"></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td class="td\_hbraun">&nbsp;</td>  
		<td></td>  
	</tr>  
	</table>  
	<!-- ENDE Menuepunkte -->  
</td>	  
<td rowspan="2" class="td\_top">  

	<!-- Seiteninhalt -->  
	<table border="0" class="tabelle2" >  
	<tr>  
		<td class="td\_Inhalt">  
			BLA,BLA,BLA  
		</td>  
	</tr>  
	</table>  
	<!-- ENDE Seiteninhalt -->  
</td>  

</tr>

<tr>
<td></td>
<td>&nbsp;</td>
<td></td>
</tr>

</table>

css-style.css:

body
{
background-color:#F5F5DC;
color:#8B4513;
}
.tabelle1 /* SeitenLayout */
{
width:800px;
border-width:0px;
border-spacing:0px;
padding:0px;
border-collapse:collapse;
border:0px;
/*color:#F5F5DC;*/
vertical-align:middle;
table-layout:fixed;
empty-cells:show;
}
.tabelle2 /* Seiteninhalt */
{
/*width:600px;*/
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:20px;
border-width:0px;
border-spacing:0px;
padding:20px;
border-collapse:collapse;
border:0px;
color:#8B4513;
vertical-align:top;
table-layout:fixed;
empty-cells:show;
}
.tabelle3 /* Menueleiste */
{
width:100%;
border-width:0px;
border-spacing:0px;
padding:0px;
border:0px;
border-collapse:collapse;
/*color:#F5F5DC;*/
table-layout:fixed;
vertical-align:middle;
empty-cells:show;
}
.td_Inhalt /* Seiteninhalt */
{
padding:20px;
vertical-align:top;
}
.td_w-Rest
{
width:*;
}
.td_h10dbraun
{
height:15px;
font-size:10px;
color:#CD853F;
text-align:right;
background-color:#8B4513;
vertical-align:middle;
padding-right:20px;
}
.td_top
{
vertical-align:top;
}

Ich bin für jeden Tip dankbar.

Ciao Korinna

  1. Die Höhe der Zelle, in der sich Tabelle3 befindet passt sich aber nicht der Grösse der darin enthaltenen Tabelle an, sondern ist viel zu gross. Gibt es da eine Option für?

    Sieht es so aus? Und Zelle A ist zu hoch?
    +--------------------+---------------------+
    ! Zelle A              !                       !
    +--------------------+ Zelle C               !
    ! Zelle B              !                       !
    +--------------------+---------------------+

    Du kannst Zelle A ein max-height geben. Aber ich glaube, den IE kümmert das nicht sonderlich.

    Du kannst auch die Zelle B höher machen, dann muss A zwangsweise kleiner werden.

    1. Die Höhe der Zelle, in der sich Tabelle3 befindet passt sich aber nicht der Grösse der darin enthaltenen Tabelle an, sondern ist viel zu gross. Gibt es da eine Option für?

      Sieht es so aus? Und Zelle A ist zu hoch?
      +--------------------+---------------------+
      ! Zelle A              !                       !
      +--------------------+ Zelle C               !
      ! Zelle B              !                       !
      +--------------------+---------------------+

      Du kannst Zelle A ein max-height geben. Aber ich glaube, den IE kümmert das nicht sonderlich.

      Du kannst auch die Zelle B höher machen, dann muss A zwangsweise kleiner werden.

      Hallo Atomi,

      ja der Teil der Tabelle, um den es geht ist so aufgebaut.
      Die Tabelle in Zelle A kann von der Grösse her variieren und der Inhalt in Zelle C ist im Normalfall wesentlich grösser als die Tabelle mit den Menüpunkten in Zelle A. Gibt es eine Option, damit die Zelle A nie grösser ist als die Tabelle, die darin enthalten ist?
      Danke für die Hilfe.

      Ciao Korinna

      1. Die Tabelle in Zelle A kann von der Grösse her variieren und der Inhalt in Zelle C ist im Normalfall wesentlich grösser als die Tabelle mit den Menüpunkten in Zelle A. Gibt es eine Option, damit die Zelle A nie grösser ist als die Tabelle, die darin enthalten ist?

        Gibt A 1% Höhe und B 99% Höhe.

        Ach ja: JEHOVA! Ich würde dir eindringlich Raten, von Tabellenlayouts Abstand zu nehmen, die Waren vor 10 Jahren noch irgendwie relevant - aber seit dem Tod von IE 5.5 sind sie in Webseiten nicht mehr relevant - bestenfalls braucht man die noch für irgendwelche uralt E-Mail-Clients ind HTML-Newslettern die ohnehin keiner liest :)

  2. Hallo,

    Ich bin für jeden Tip dankbar.

    Probiere es mit einem CSS-Layout. Wenn du dabei auf Probleme stößt wird dir sicherlich im Forum weitergeholfen.

    Das Tabellenwirrwarr gucke ich mir nicht an. Aber vielleicht macht es ja jemand anderes.

    Viele Grüße Novi

    --
    "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)