Problem mit Tabellenlayout
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
adresse
anrede
code
datum
fax
feld
geburtsdatum
http
karpfen
land
layout
nachname
ort
platz
problem
spalten
tabelle
telefon
url
vorname
-
Hallo zusammen,
ich habe derzeit ein kleines Problem mit der Formatierung eines Tabellenlayouts.
Obwohl ich die Tabellen bis auf die Hintergrundfarbe identisch formatier, bezüglich der Breitenangaben sind die Sachen immer irgendwie ein bisschen versetzt.
<table class="tabelle_hell" width="890" border="1"> <tr> <th colspan="12">Persönliche Daten</th> </tr> <tr> <td width="120">Anrede*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Titel</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Geburtsdatum*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Nachname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Vorname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Staatsangehörigkeit*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> </table> <table class="tabelle_dunkel" width="890" border="1"> <tr> <th colspan="12">Adresse</th> </tr> <tr> <td width="120">Straße/Nr.*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">PLZ/Ort*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Land*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Telefon*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Fax</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">E-Mail*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> </table>
Jemand eine Ahnung, wieso die angegebenen Breiten nicht eingehalten werden?
Zu sehen ist das Ganze hier: http://karpfen.lima-city.de/tabellen.php
Beitrag zuletzt geändert: 22.7.2009 14:41:33 von karpfen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Die Angaben bzgl. Höhe und Breite sind nur dann gültig wenn Freiraum besteht. Verbraucht eine Zelle beispielsweise mehr Platz, wird dieser ihr auch eingeräumt!
Quelle: selfthml unter bei "Beachten Sie"
Ich glaube eine Möglichkeit wäre es dies mithilfe von CSS, Stichwort: table-layout:fixed.
Edit:
Kannst einfach mal "style="table-layout:fixed" in das table einfügen und sehen was passiert.
Dann hab ich vergessen zu erwähnen, dass du nicht mehrmals die width-Angaben brauchst. Also pro Spalte die Breite angeben, aber nicht mehrmals, das ändert nichts. Also im zweiten tr-Block drin lassen und in den folgenden rausnehmen.
Beitrag zuletzt geändert: 22.7.2009 15:51:58 von werktags -
werktags schrieb:
Edit:
Kannst einfach mal "style="table-layout:fixed" in das table einfügen und sehen was passiert.
Passiert leider nix sinnvolles...Nun sind die Spalten mit width="5" fast so groß wie die Spalten mit width="120"
werktags schrieb:
Dann hab ich vergessen zu erwähnen, dass du nicht mehrmals die width-Angaben brauchst. Also pro Spalte die Breite angeben, aber nicht mehrmals, das ändert nichts. Also im zweiten tr-Block drin lassen und in den folgenden rausnehmen.
Jo, da hast du recht.
EDIT:
Ich habe nun die Größe der Felder ausreichend bestimmt, so dass alle Wörter genug Platz in ihren Feldern haben. Trotzdem wird das Feld verändert, wenn ich auch nur einen Buchstaben mehr hineinschreibe, obwohl der Platz im Feld auch dafür genug wäre...
Beitrag zuletzt geändert: 22.7.2009 16:48:48 von karpfen -
karpfen schrieb:
Stimmt, durch ein pure Angabe des fixed werden alle Spalten in gleich große Stücke zerlegt und erst wenn man die Spaltengröße mit CSS auch angibt, sollte es Sinn machen. Das hoffe ich zumindest. Am besten wäre es wohl die komplette Tabelle mit CSS zu formatieren.werktags schrieb: [..]
Passiert leider nix sinnvolles...Nun sind die Spalten mit width="5" fast so groß wie die Spalten mit width="120"
Leere Zellen könnte man auch mit füllen, wenn gewünscht. -
Leere Zellen wurden von mir schon mit gefüllt, hat auch nix gebracht.
Ich werde mir mal die Tabellenformatierung per CSS geben, auch wenn ich dann wohl einige Tabellen formatieren muss :)
Wobei ich da das Problem sehe, dass ja nicht alle Spalten gleich breit sein sollen und wenn ich z.B. <td> formatiere, genau dies aber passiert.
Beitrag zuletzt geändert: 22.7.2009 16:57:27 von karpfen -
Nunja, da dürfte es auch einen CSS-Ausweg geben, das ganze mit weniger Schreibaufwand zu lösen.
Und zwar mit dem Nachbar-Selektor:
Du müsstest dann nur einmal ne Klasse oder so vergeben und dann:
.tabellenname tr td {width:20px;} .tabellenname tr td + td {width:5px;} .tabellenname tr td + td + td {width:200px;}
Wobei das im IE6 nicht geht, darüber funktioniert es. -
Also das ist ja mal Bullshit, da positionier ich selbst ein klassisches Tabellendesign schneller mit Divs, als diesen Mist zusammen zu schreiben.
Ich werds mir aber mal anschauen, dank dir schonmal... -
karpfen schrieb:
Hallo zusammen,
ich habe derzeit ein kleines Problem mit der Formatierung eines Tabellenlayouts.
Obwohl ich die Tabellen bis auf die Hintergrundfarbe identisch formatier, bezüglich der Breitenangaben sind die Sachen immer irgendwie ein bisschen versetzt.
<table class="tabelle_hell" width="890" border="1"> <tr> <th colspan="12">Persönliche Daten</th> </tr> <tr> <td width="120">Anrede*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Titel</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Geburtsdatum*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Nachname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Vorname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Staatsangehörigkeit*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> </table> <table class="tabelle_dunkel" width="890" border="1"> <tr> <th colspan="12">Adresse</th> </tr> <tr> <td width="120">Straße/Nr.*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">PLZ/Ort*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Land*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Telefon*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Fax</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">E-Mail*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> </table>
Jemand eine Ahnung, wieso die angegebenen Breiten nicht eingehalten werden?
Zu sehen ist das Ganze hier: http://karpfen.lima-city.de/tabellen.php
Also wenn ich aus den 2 Tabellen eine mache wäre das Problem gelöst (ohne mir jetzt die Mühe zu machen rauszufinden warum es überhaupt da war...)
vielleicht hilft Dir das?
<table class="tabelle_hell" width="890" border="1"> <tr> <th colspan="12">Persönliche Daten</th> </tr> <tr> <td width="120">Anrede*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Titel</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Geburtsdatum*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Nachname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Vorname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Staatsangehörigkeit*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> <tr> <th colspan="12">Adresse</th> </tr> <tr> <td width="120">Straße/Nr.*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">PLZ/Ort*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Land*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Telefon*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Fax</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">E-Mail*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> </table>
entfernt habe ich nur
</table>
<table class="tabelle_dunkel" width="890" border="1">
bzw (Bei Deiner Original-Seite)
</tbody></table>
<table class="tabelle_dunkel" border="1" width="890">
<tbody>
-
<style type="text/css"> .table1{ border-left-spacing:0px; border-right-spacing:0px; border-top-spacing:0px; border-bottom-spacing:0px; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; border-width:1px border-style:inset; border-color:gray; border-collapse:separate; vertical-align:top; text-align:center; width:100%; height:0%; overflow:visible; } .table1 td{ padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; border-width:1px border-style:inset; border-color:gray; -moz-border-radius:3px; background-color:#000000; color:#ffffff; font-size:medium; vertical-align:top; text-align:left; width:0%; height:0%; overflow:visible; } .coloreanders td{ background-color:#ff00ff; color:#000000; } </style> <table class="tabelle_hell" width="890" border="1"> <tr> <th colspan="12">Persönliche Daten</th> </tr> <tr> <td width="120">Anrede*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Titel</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Geburtsdatum*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Nachname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Vorname*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Staatsangehörigkeit*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> </table> <table class="tabelle_dunkel" width="890" border="1"> <tr> <th colspan="12">Adresse</th> </tr> <tr> <td width="120">Straße/Nr.*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">PLZ/Ort*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Land*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <td width="120">Telefon*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">Fax</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> <td width="70">E-Mail*</td> <td width="5"></td> <td width="200"></td> <td width="5"></td> </tr> <tr> <th colspan="12"> </th> </tr> </table> <br> <br> <table class="table1" style="width:890;"> <tr> <td style="width:46%;">Anrede*</td> <td style="width:27%;">Titel</td> <td style="width:27%;">Geburtsdatum*</td> </tr> <tr> <td style="width:46%;">Nachname*</td> <td style="width:27%;">Vorname*</td> <td style="width:27%;">Staatsangehörigkeit*</td> </tr> </table> <table class="table1" style="width:890;"> <tr> <td style="width:46%;">Straße/Nr.*</td> <td style="width:27%;">PLZ/Ort*</td> <td style="width:27%;">Land*</td> </tr> <tr> <td style="width:46%;">Telefon*</td> <td style="width:27%;">Fax</td> <td style="width:27%;">E-Mail*</td> </tr> </table> <br> <br> <table class="table1" style="width:890;"> <tr> <td style="width:46%;">Anrede*</td> <td style="width:27%;">Titel</td> <td style="width:27%;">Geburtsdatum*</td> </tr> <tr> <td style="width:46%;">Nachname*</td> <td style="width:27%;">Vorname*</td> <td style="width:27%;">Staatsangehörigkeit*</td> </tr> <tr class="coloreanders"> <td style="width:46%;">Straße/Nr.*</td> <td style="width:27%;">PLZ/Ort*</td> <td style="width:27%;">Land*</td> </tr> <tr class="coloreanders"> <td style="width:46%;">Telefon*</td> <td style="width:27%;">Fax</td> <td style="width:27%;">E-Mail*</td> </tr> </table>
is beliebig weiter spinnbar
die hälfte davon is total nicht notwendig
in fragen tabellen puzzelei helf ich gern ;p
ps: eure tabs sind ja voll übel
Beitrag zuletzt geändert: 23.7.2009 5:11:18 von aero23 -
simuliertes schrieb:
Also wenn ich aus den 2 Tabellen eine mache wäre das Problem gelöst (ohne mir jetzt die Mühe zu machen rauszufinden warum es überhaupt da war...)
vielleicht hilft Dir das?
Hilft mir leider nicht, da jede Tabelle mit CSS die Hintergrundfarben formatiert hat. Wäre an den Tabellen nicht etwas unterschiedlich, so würde ich nur eine nehmen. Aber jede der Tabellen hat eine andere Hintergrundfarbe.
Ich werde heute aber wieder weiterexperimentieren und mal gucken. -
Hi,
eine Möglicheit, um Breiten zu erzwingen, hättest Du noch: ein transparentes gif in der ensprechenden Breite am Ende jeder Spalte zu legen - damit erzwingst Du eine Breite. Aber wenn Deine Tabelle zu breit wird ingesamt, dann bekommst Du einen Scrollbalken. Ist zwar technisch nicht sauber, aber geht gut :-))
LG und viel Erfolg
-
<style type="text/css"> table{ padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; border-color:#aaaaaa; border-width:1px; border-style:inset; border-left-spacing:0px; border-right-spacing:0px; border-top-spacing:0px; border-bottom-spacing:0px; border-collapse:separate; vertical-align:top; text-align:center; width:100%; height:0%; } th{ padding-left:5px; padding-right:5px; padding-top:1px; padding-bottom:1px; border-color:#aaaaaa; border-width:1px; border-style:inset; border-left-spacing:0px; border-right-spacing:0px; border-top-spacing:0px; border-bottom-spacing:0px; -moz-border-radius:3px; font-size:medium; vertical-align:top; text-align:center; width:100%; height:0%; } td{ padding-left:5px; padding-right:5px; padding-top:1px; padding-bottom:1px; border-color:#aaaaaa; border-width:1px; border-style:inset; border-left-spacing:0px; border-right-spacing:0px; border-top-spacing:0px; border-bottom-spacing:0px; -moz-border-radius:3px; font-size:medium; vertical-align:top; text-align:left; width:0%; height:0%; } .table1{ background-color:#000000; color:#ffffff; } .table1 td{ background-color:#000000; color:#ffffff; } .table2{ background-color:#ff00ff; color:#000000; } .table2 td{ background-color:#ff00ff; color:#000000; } </style> <table class="table1" style="width:890;"> <tr> <th colspan="6">Persönliche Daten</th> </tr> <tr> <td style="width:85;">Anrede*</td> <td><div style="width:165; overflow:hidden;">IchBinEinDivBlockUndMeinInhaltIstVielZuLangFürDiesesFeld</div></td> <td style="width:85;">Titel</td> <td style="width:165;"></td> <td style="width:155;">Geburtsdatum*</td> <td style="width:165;"></td> </tr> <tr> <td style="width:85;">Nachname*</td> <td><div style="width:165; overflow:hidden;">IchBinEinDivBlockUndMeinInhaltIstVielZuLangFürDiesesFeld</div></td> <td style="width:85;">Vorname*</td> <td><div style="width:165; overflow:hidden;"><input type="text" size="10" name="username" maxlength="9"></div></td> <td style="width:155;">Staatsangehörigkeit*</td> <td><div style="width:165; overflow:hidden;"><input type="text" size="12" name="username" maxlength="9"></div></td> </tr> <tr> <th colspan="6"> </th> </tr> </table> <table class="table2" style="width:890;"> <tr> <th colspan="6;">Adresse</th> </tr> <tr> <td style="width:85;">Straße/Nr.*</td> <td><div style="width:165; overflow:hidden;">IchBinBlockUnllllllllllla</div></td> <td style="width:85;">PLZ/Ort*</td> <td style="width:165;"></td> <td style="width:155;">Land*</td> <td style="width:165;"></td> </tr> <tr> <td style="width:85;">Telefon*</td> <td><div style="width:165; overflow:hidden;">IchBinEinDiUndaaaaaaaaa</div></td> <td style="width:85;">Fax</td> <td><div style="width:165; overflow:hidden;"><input type="text" size="22" name="username" maxlength="9"></div></td> <td style="width:155;">E-Mail*</td> <td><div style="width:165; overflow:hidden;"><input type="text" size="32" name="username" maxlength="9"></div></td> </tr> <tr> <th colspan="6"> </th> </tr> </table>
arg war gestern recht spät um zu denken -.-
also eigentlich liegt es nur daran das deine felder zu klein sind für den text
es steht zu wenig platz zur verfügung den sie sich dann nehmen
dadurch verschiebt sich alles
ist mehr platz da wird alles gerecht im angegebenen verhältnis verteilt
du könntes das so machen zum beispiel
übrigens leere zellen benutzt man nicht als abstands halter -.-
das macht man mit padding und border spacing
weils auch sone fehler verursachen könnte
und die abstände und breiten von rahmen darf man beim platz berechnen natürlich nicht vergessen
hf
Beitrag zuletzt geändert: 23.7.2009 16:20:40 von aero23 -
OK, das mit den Abstandshaltern durch leere Felder werde ich mal korrigieren. Der Rand der Tabelle wird von mir nur verwendet, weil man das Problem besser sieht. An sich haben die Tabellen border=0.
Ich habe auch schon die Felder mehr als ausreichend groß gemacht für die Texte. Hat aber auch nicht geholfen. -
die summe aller felder abstände und rahmen darf nicht größer sein als deine tabelle
ich habe die verhältnisse etwas geändert
damit die größe insgesamt nicht überschritten wird
deine 70er spalten waren auf jeden fall zu klein
die haben sich deshalb mehr platz genommen
und deine inputspalten waren zu groß für das verhältnis
aber wenn du input felder benutzt wirst du merken das die etwas eigenwillig sind was platzbedarf betrifft
die wollen immer mehr als sie eigentlich brauchen
hab ich so das gefühl
deshalb hatte ich die in ein div gekappselt und das ende einfach abgeschnippelt mit overflow:hidden;
weil das nicht direkt bei td's funzt
edit:
hab noch was gefunden
table-layout: fixed; overflow:hidden;
damit werden die spaltenbreiten nicht mehr an den inhalt angepasst
aber dann muß man dazu auch den overflow angeben
außerdem is es mit vorsicht zu genießen
Beitrag zuletzt geändert: 24.7.2009 15:28:00 von aero23 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
