nicht angemeldet
Tabellezellen verschoben trotz fixer Breiter
Hallo zusammen,
folgendes Phänomen bereitet mir ein wenig Kopfschmerzen:
Zwei Tabellen, bei gleich breit mit jeweils einer Zeile und 3 Spalten.
Die Spalte 1 und 3 sind in beiden Tabellen identisch, lediglich Spalte 2 unterscheidet sich voneinander.
Hier mal der Quelltext:
<html>
<head>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table width="160px" border='1' cellspacing="0" cellpadding="0">
<tr>
<td width="60px" align="right">
0,
</td>
<td width="60px" align="left">
test
</td>
<td width="40px" align="left">
EUR
</td>
</tr>
</table>
<table width="160px" border='1' cellspacing="0" cellpadding="0">
<tr>
<td width="60px" align="right">
0,
</td>
<td width="60px" align="left">
590012
</td>
<td width="40px" align="left">
EUR
</td>
</tr>
</table>
</body>
</html>
Jetzt erklär mir doch mal bitte jemand, warum die 2. Zelle in der 2. Tabelle weiter links steht?! Die Zellengröße ist fix, der Platz reicht aus und trotzdem wird die Zelle "verbreitert"...
Danke im Voraus.
-
Kurzer Nachtrag:
Das Beispiel funktioniert genauso "schlecht", wenn ich in der 1. Tabelle anstatt von "test" nur "59" eintrage.
Also keinen anderen Typ verwende wobei der bei HTML ja eh mal egal sein sollte. -
Hi,
<html>
gibt es einen besonderen Grund, warum Du die Seite in den Quirks-Mode schaltest?
<head>
</head>Du hast das *einzige* Element vergessen, das in HTML *wirklich* genannt werden *muss*.
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Eliminiere alle diese Attribute. Darstellung ist CSS.
<table width="160px" border='1' cellspacing="0" cellpadding="0">
CSS bedeutet nicht, gültige CSS-Werte in HTML-Attribute zu schreiben. Diese Tabelle soll angeblich "160px Pixel" breit sein - eine Breite kann keine Quadratpixel annehmen. Darüber hinaus sind auch hier alle Attribute zu entfernen, die Angaben sind Sache von CSS.
Jetzt erklär mir doch mal bitte jemand, warum die 2. Zelle in der 2. Tabelle weiter links steht?!
Weil der Platz in der Zelle für den Inhalt nicht ausreicht, sie somit verbreitert wird und der Browser versucht, die Spaltenbreiten auf die Tabellenbreite zu verteilen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
<html>
gibt es einen besonderen Grund, warum Du die Seite in den Quirks-Mode schaltest?
<head>
</head>Du hast das *einzige* Element vergessen, das in HTML *wirklich* genannt werden *muss*.
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Eliminiere alle diese Attribute. Darstellung ist CSS.
<table width="160px" border='1' cellspacing="0" cellpadding="0">
CSS bedeutet nicht, gültige CSS-Werte in HTML-Attribute zu schreiben. Diese Tabelle soll angeblich "160px Pixel" breit sein - eine Breite kann keine Quadratpixel annehmen. Darüber hinaus sind auch hier alle Attribute zu entfernen, die Angaben sind Sache von CSS.
Jetzt erklär mir doch mal bitte jemand, warum die 2. Zelle in der 2. Tabelle weiter links steht?!
Weil der Platz in der Zelle für den Inhalt nicht ausreicht, sie somit verbreitert wird und der Browser versucht, die Spaltenbreiten auf die Tabellenbreite zu verteilen.
Cheatah
Hallo Cheatah,
danke für deine prompte Antwort, aber mit vielem kann ich ehrlich gesagt nicht so viel anfangen.
1. Was ist ein Quirks-Modus?! Ist der gut oder schlecht, bzw. wie schaltet man den ein oder aus?
2. Wen "störts", ob im <head>-Tag css-Eigenschaften angegeben werden. Das gleiche gilt für das <table>-Tag. Das man das "schöner" in eine CSS-Datei auslagert soll mir recht sein, aber das eine Seite deswegen weniger funktioniert ist mir neu. Aber vielleicht habe ich da auch einfach was nicht verstanden?!
3. Wenn man bei der Breite der Tabelle die px weglässt ändert sich nichts an dem Verhalten der Tabelle. (Analog zu dem px in den <td>-Tags!)
4. Die Breite reicht (natürlich) völlig für den angezeigten Inhalt und muss NICHT vom Browser verändert werden. Meinetwegen kannst du/man auch die Breite der 2. Zelle für beide Tabellen entsprechend verbreitern und trotzdem wird der Rahmen nicht gleich positioniert werden...MfG
-
Hi,
danke für deine prompte Antwort, aber mit vielem kann ich ehrlich gesagt nicht so viel anfangen.
macht nichts, dafür kannst Du ja (offensichtlich ;-)) nachfragen. Bitte sei in Zukunft so gut und zitiere dabei nur das, worauf Du Dich beziehst.
- Was ist ein Quirks-Modus?!
Im Zweifel ein Suchbegriff, den Du in die Suchmaschine Deiner Wahl - einschließlich der Foren-Suche - eingeben kannst.
Ist der gut oder schlecht,
Schlecht.
bzw. wie schaltet man den ein oder aus?
Über den DOCTYPE.
- Wen "störts", ob im <head>-Tag css-Eigenschaften angegeben werden.
Im <head> muss zunächst einmal ein <title> sein.
Das gleiche gilt für das <table>-Tag. Das man das "schöner" in eine CSS-Datei auslagert soll mir recht sein, aber das eine Seite deswegen weniger funktioniert ist mir neu.
Nun ja, man lernt eben nie aus. Vor allem aber kannst Du bei einer Sache sicher sein: Wenn Du die Dinge falsch machst, kannst Du nie wissen, ob auftretende Fehler daran liegen. Also mach die Dinge gleich von Anfang an richtig.
- Wenn man bei der Breite der Tabelle die px weglässt ändert sich nichts an dem Verhalten der Tabelle. (Analog zu dem px in den <td>-Tags!)
Nein, aber ein glasklarer Fehler ist eliminiert.
- Die Breite reicht (natürlich) völlig für den angezeigten Inhalt und muss NICHT vom Browser verändert werden.
Die Breite der *Zelle* reicht keinesfalls für ihren Inhalt. Die Breite der Tabelle hingegen reicht durchaus - deswegen verbreitert der Browser sie nicht, sondern verteilt die Spaltenbreiten neu.
Meinetwegen kannst du/man auch die Breite der 2. Zelle für beide Tabellen entsprechend verbreitern und trotzdem wird der Rahmen nicht gleich positioniert werden...
Ich habe die Tabellen sowie die zweiten Spalten um je 100 Pixel verbreitert. Zudem habe ich die anderen von mir genannten Punkte beachtet und statt der überflüssigen und unerwünschten Attribute sinnvolle CSS-Angaben verteilt. Das Ergebnis sind perfekt untereinander stehende Linien und Spalten mit exakt der Breite, die sie haben sollen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
ich habe mich an deinen Hinweisen noch einmal versucht, bin aber zu keinem Erfolgsergebnis gekommen.
Mein neuer Quelltext (inzwischen sehr spartanisch) sieht wie folgt aus:
<html> <head> <title>Test</title> </head> <body> <table width="210" border='1'> <tr> <td width="60" style="text-align:right;"> 0, </td> <td width="110" style="text-align:left;"> 59 </td> <td width="40" style="text-align:left;"> EUR </td> </tr> </table> <table width="210" border='1'> <tr> <td width="60" style="text-align:right;"> 0, </td> <td width="110" style="text-align:left;"> 59001235 </td> <td width="40" style="text-align:left;"> EUR </td> </tr> </table> </body> </html>Wo ich auf CSS-Eigenschaften verzichten konnte hab ich das getan. Einzig die Border-Eigenschaft auf der Tabelle hat "überlebt".
Sowohl Tabelle wie auch Zelle sind ausreichend groß und trotzdem stehen die beiden Einträge nicht sauber untereinander. Habe ich noch etwas übersehen?
Danke im Voraus.
-
Hi,
Wo ich auf CSS-Eigenschaften verzichten konnte hab ich das getan.
Du sollst nicht auf CSS-Eigenschaften verzichten, sondern das Gegenteil davon machen: sie benutzen. *HTML-Attribute*, die der Darstellung dienen, sind zu eliminieren.
Einzig die Border-Eigenschaft auf der Tabelle hat "überlebt".
Entferne sie. Beschäftige Dich mit den CSS-Eigenschaften, die (speziell) eine Tabelle anwendet.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Ich sehe den schlichten Hinweis auf die Lösungsquelle i.d.R. ja auch besser an, als jemandem die fertige Lösung vor die Füße zu werfen, aber ich komme so einfach nicht weiter :)
Hier mein "neuster" Versuch - ausschließlich mit CSS-Eigenschaften:
<html> <head> <title>Test</title> <style type="text/css"> table { width:210; } td { border:1px solid #000; vertical-align:top; } .tst { width:60px;font-size:8 } .tst2 { width:110px; } .tst3 { width:40px; } </style> </head> <body> <table> <tr> <td class="tst"> 0, </td> <td class="tst2"> 59 </td> <td class="tst3"> EUR </td> </tr> </table> <table> <tr> <td class="tst"> 0, </td> <td class="tst2"> 59001235 </td> <td class="tst3"> EUR </td> </tr> </table> </body> </html>Ich bekomme die immer noch nicht untereinander angezeigt :(
-
Hi,
<html>
noch einmal: Gibt es einen besonderen Grund für den Quirks-Mode? Wenn nicht, so verlasse ihn. Dann passiert Dir auch kein Lapsus wie dieser hier:
table { width:210; }
"210" ist kein gültiger Wert für die width-Eigenschaft (ebenso wenig wie "8" für die font-size-Eigenschaft). Zudem bat ich Dich, Dich mit den CSS-Eigenschaften zu beschäftigen, die speziell für Tabellen-Elemente gedacht sind.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
-