[HTML] Problem mit Tabellen

Nirtak · 29 September 2004

Problem mit Tabellen

Hallo ....

.. ich bastle momentan an einer Webseite und habe ziemliche Probleme mit den Tabellen ...

Wenn ich feste Breiten für eine Spalte angebe ... und für die andere dann automatisch setze, dann verzerrt er mir trotzdem die Tabelle mit der fixen Breite und hält sich nicht daran ...

Wieso ???

Kann ich nur mit Prozenten arbeiten um variabel zu bleiben oder wie funktioniert das ?

Gibt es irgendwo noch was anderes als dieses Self-HTML, in das man sich einlesen kann ???

Grüßle und danke!
Katrin

the-loser · 29 September 2004

Hi Katrin,

poste doch mal Deine Tabelle (oder einen Auszug daraus), dann kann man das vielleicht besser erklären. Interessant wäre auch zu wissen, mit welchem Browser Du Dir die Seiten anguckst (Internet Explorer, Mozilla, Opera, etc.).

Und zu SelfHTML, das ist _die_ Quelle für Infos und aus meiner Sicht eine gut geschriebene und allumfassende Dokumentation...

Andere Dokus habe ich bisher noch nicht gebraucht und kann Dir daher leider keine Empfehlungen aussprechen, sorry!

Nirtak · 29 September 2004

So ...

ich möchte gerne die erste Spalte fest auf 200 Pixel, die 2. auf 15 Pixel und die 3. auf 600 Pixel - variabel soll die 4. Spalte sein ...

Mein Browser ist der IE ....

Wenn ich nun diese Seite ankucke .... dann wird die erste Spalte breiter, je größer ich das fenster mche und die 4. Spalte ist gar nicht zu sehen ...

Wo liegt der Fehler ???

<csscriptdict import>
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"></script>
</csactiondict>

<csscriptdict import>
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"></script>
</csactiondict>

<body><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="160">
<td bgcolor="#cb003f" width="200" height="160"><img src="bilder/Logo_grau_klein.jpg" alt="" height="160" width="200" border="0"></td>
<td bgcolor="white" width="15" height="160"></td>
<td bgcolor="#999999" width="600" height="160"><img src="bilder/Verlauf_hell.jpg" alt="" height="160" width="680" border="0"></td>
<td bgcolor="black" height="160"></td>
</tr>
<tr height="15">
<td bgcolor="white" width="200" height="15"></td>
<td bgcolor="white" width="15" height="15"></td>
<td bgcolor="white" width="600" height="15"></td>
<td bgcolor="white" height="15"></td>
</tr>
<tr align="left" valign="top" height="400">
<td bgcolor="#999999" width="200" height="400">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr height="80">
<td height="80"></td>
</tr>
<tr>
<td><a onmouseover="changeImages('Startseite','buttons/Startseite_over.gif');return true" onmouseout="changeImages('Startseite','buttons/Startseite.gif');return true" href="#"><img id="Startseite" src="buttons/Startseite.gif" alt="" name="Startseite" height="40" width="200" border="0"></a></td>
</tr>
<tr>
<td><a onmouseover="changeImages('Wir','buttons/Wir_over.gif');return true" onmouseout="changeImages('Wir','buttons/Wir.gif');return true" href="#"><img id="Wir" src="buttons/Wir.gif" alt="" name="Wir" height="40" width="200" border="0"></a></td>
</tr>
<tr>
<td><a onmouseover="changeImages('Leistungen','buttons/Leistungen_over.gif');return true" onmouseout="changeImages('Leistungen','buttons/Leistungen.gif');return true" href="#"><img id="Leistungen" src="buttons/Leistungen.gif" alt="" name="Leistungen" height="40" width="200" border="0"></a></td>
</tr>
<tr>
<td><a onmouseover="changeImages('Referenzen','buttons/Referenzen_over.gif');return true" onmouseout="changeImages('Referenzen','buttons/Referenzen.gif');return true" href="#"><img id="Referenzen" src="buttons/Referenzen.gif" alt="" name="Referenzen" height="40" width="200" border="0"></a></td>
</tr>
<tr>
<td><a onmouseover="changeImages('Kontakt','buttons/Kontakt_over.gif');return true" onmouseout="changeImages('Kontakt','buttons/Kontakt.gif');return true" href="#"><img id="Kontakt" src="buttons/Kontakt.gif" alt="" name="Kontakt" height="40" width="200" border="0"></a></td>
</tr>
<tr>
<td><a onmouseover="changeImages('Lageplan','buttons/Lageplan_over.gif');return true" onmouseout="changeImages('Lageplan','buttons/Lageplan.gif');return true" href="#"><img id="Lageplan" src="buttons/Lageplan.gif" alt="" name="Lageplan" height="40" width="200" border="0"></a></td>
</tr>
<tr>
<td><a onmouseover="changeImages('Impressum','buttons/Impressum_over.gif');return true" onmouseout="changeImages('Impressum','buttons/Impressum.gif');return true" href="#"><img id="Impressum" src="buttons/Impressum.gif" alt="" name="Impressum" height="40" width="200" border="0"></a></td>
</tr>
</table>
</td>
<td bgcolor="white" width="15" height="400"></td>
<td width="600" height="400"></td>
<td height="400"></td>
</tr>
<tr height="15">
<td bgcolor="white" width="200" height="15"></td>
<td bgcolor="white" width="15" height="15"></td>
<td bgcolor="white" width="600" height="15"></td>
<td bgcolor="white" height="15"></td>
</tr>
<tr height="50">
<td bgcolor="#999999" width="200" height="50"></td>
<td bgcolor="white" width="15" height="50"></td>
<td bgcolor="#999999" width="600" height="50"></td>
<td bgcolor="#999999" height="50"></td>
</tr>
</table></body>

the-loser · 29 September 2004

Hi Katrin,

ich habe mir die Tabelle mal angesehen und mir sind folgende Dinge aufgefallen (hat nicht unbedingt alles mit dem von Dir geschilderten Problem zu tun, solltest Du dennoch korrigieren, um falsche Anzeigen zu vermeiden):

<tr> kennt den Parameter height nicht, solltest Du also nur bei <td> verwenden
Die vierte Spalte siehst Du nicht, weil in keiner Zeile Deiner Tabelle etwas in der 4. Spalte steht
Zum Testen solcher Phänomene (Fenomene? ) empfehle ich immer, border="1" zu setzen, denn nur so sieht man, wo die Tabelle existiert.

Nun zur Lösung Deines Anzeige-Problems:

Die Breiten der ersten 3 Spalten sind in Ordnung (mit der festen Angabe von Pixeln); trage bei Spalte 4 folgendes ein: width="100%". Damit füllt er mit der letzten Spalte immer die Breite der Seite aus. Aber: Bei einem schmalen Browserfenster wird die Spalte u.U. dann zu schmal. Das lässt sich aber auch sicher austricksen...
Der Trick: In alle anderen drei Zeilen ein 1x1 Pixel-Image verstecken mit der Angabe width="xyz", wobei xyz der gewünschten Spaltenbreite entspricht.

So sollte eine Zeile Deiner Tabelle aussehen:

Code:

<tr>
<td width="200"><img src="pixel.gif" width="200"></td> 
<td width="15"><img src="pixel.gif" width="15"></td> 
<td width="600"><img src="pixel.gif" width="600"></td> 
<td width="100%" height="160">& nbsp;</td> 
</tr>

Hinweis: Das & nbsp; (ohne das Leerzeichen) in Spalte vier ist wichtig, damit dort etwas drinsteht!

Jim Duggan · 29 September 2004

PHP:

<html>
<csscriptdict import> 
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script> 
</csscriptdict> 
<csactiondict> 
<script type="text/javascript"><!-- 
var preloadFlag = true; 

// --></script> 
</csactiondict> 

<csscriptdict import> 
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script> 
</csscriptdict> 
<csactiondict> 
<script type="text/javascript"><!-- 
var preloadFlag = false; 
function preloadImages() { 
if (document.images) { 
pre_Startseite_over = newImage('buttons/Startseite_over.gif'); 
pre_Wir_over = newImage('buttons/Wir_over.gif'); 
pre_Leistungen_over = newImage('buttons/Leistungen_over.gif'); 
pre_Referenzen_over = newImage('buttons/Referenzen_over.gif'); 
pre_Kontakt_over = newImage('buttons/Kontakt_over.gif'); 
pre_Lageplan_over = newImage('buttons/Lageplan_over.gif'); 
pre_Impressum_over = newImage('buttons/Impressum_over.gif'); 
preloadFlag = true; 
} 
} 

// --></script> 
</csactiondict> 

<body><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td bgcolor="#cb003f" width="200" height="160"><img src="bilder/Logo_grau_klein.jpg" 

alt="" height="160" width="200" border="0"></td> 
<td bgcolor="white" width="15" height="160"> </td> 
<td bgcolor="#999999" width="600" height="160"><img src="bilder/Verlauf_hell.jpg" 

alt="" height="160" width="680" border="0"></td> 
<td bgcolor="black" height="160"> </td> 
</tr> 
<tr> 
<td bgcolor="white" width="200" height="15"> </td> 
<td bgcolor="white" width="15" height="15"> </td> 
<td bgcolor="white" width="600" height="15"> </td> 
<td bgcolor="white" height="15"> </td> 
</tr> 
<tr align="left" valign="top"> 
<td bgcolor="#999999" width="200" height="400"> 
<table width="200" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="80"> </td> 
</tr> 
<tr> 
<td><a onmouseover="changeImages('Startseite','buttons/Startseite_over.gif');return 

true" onmouseout="changeImages('Startseite','buttons/Startseite.gif');return true" 

href="#"><img id="Startseite" src="buttons/Startseite.gif" alt="" name="Startseite" 

height="40" width="200" border="0"></a></td> 
</tr> 
<tr> 
<td><a onmouseover="changeImages('Wir','buttons/Wir_over.gif');return true" 

onmouseout="changeImages('Wir','buttons/Wir.gif');return true" href="#"><img 

id="Wir" src="buttons/Wir.gif" alt="" name="Wir" height="40" width="200" 

border="0"></a></td> 
</tr> 
<tr> 
<td><a onmouseover="changeImages('Leistungen','buttons/Leistungen_over.gif');return 

true" onmouseout="changeImages('Leistungen','buttons/Leistungen.gif');return true" 

href="#"><img id="Leistungen" src="buttons/Leistungen.gif" alt="" name="Leistungen" 

height="40" width="200" border="0"></a></td> 
</tr> 
<tr> 
<td><a onmouseover="changeImages('Referenzen','buttons/Referenzen_over.gif');return 

true" onmouseout="changeImages('Referenzen','buttons/Referenzen.gif');return true" 

href="#"><img id="Referenzen" src="buttons/Referenzen.gif" alt="" name="Referenzen" 

height="40" width="200" border="0"></a></td> 
</tr> 
<tr> 
<td><a onmouseover="changeImages('Kontakt','buttons/Kontakt_over.gif');return true" 

onmouseout="changeImages('Kontakt','buttons/Kontakt.gif');return true" href="#"><img 

id="Kontakt" src="buttons/Kontakt.gif" alt="" name="Kontakt" height="40" width="200" 

border="0"></a></td> 
</tr> 
<tr> 
<td><a onmouseover="changeImages('Lageplan','buttons/Lageplan_over.gif');return 

true" onmouseout="changeImages('Lageplan','buttons/Lageplan.gif');return true" 

href="#"><img id="Lageplan" src="buttons/Lageplan.gif" alt="" name="Lageplan" 

height="40" width="200" border="0"></a></td> 
</tr> 
<tr> 
<td><a onmouseover="changeImages('Impressum','buttons/Impressum_over.gif');return 

true" onmouseout="changeImages('Impressum','buttons/Impressum.gif');return true" 

href="#"><img id="Impressum" src="buttons/Impressum.gif" alt="" name="Impressum" 

height="40" width="200" border="0"></a></td> 
</tr> 
</table> 
</td> 
<td bgcolor="white" width="15" height="400"> </td> 
<td width="600" height="400"> </td> 
<td height="400"></td> 
</tr> 
<tr> 
<td bgcolor="white" width="200" height="15"> </td> 
<td bgcolor="white" width="15" height="15"> </td> 
<td bgcolor="white" width="600" height="15"> </td> 
<td bgcolor="white" height="15"> </td> 
</tr> 
<tr> 
<td bgcolor="#999999" width="200" height="50"> </td> 
<td bgcolor="white" width="15" height="50"> </td> 
<td bgcolor="#999999" width="600" height="50"> </td> 
<td bgcolor="#999999" height="50"> </td> 
</tr> 
</table></body>
</html>

wie the-loser schon sagte das

PHP:

ist wichtig bei leeren Tabellen, bei Ihm wirds leider von der Boardsoft veschluckt

Habs deshalb mal als PHP-Code eingefügt.

[HTML] Problem mit Tabellen

Nirtak

treuer Stammgast

the-loser

gehört zum Inventar

Nirtak

treuer Stammgast

the-loser

gehört zum Inventar

Jim Duggan

Seniler Bettflüchter