tabellenformatierung

[tunichtgut.de.tc]

angenommen ich habe zwei nebeneinanderstehende tabellen, die beide jeweils eine grafik enthalten, also ungefähr so :
<table>
<tr><td><table><tr><td>bild 1</td></tr>
</table>
<tr><td>
<table>
<tr><td><table><tr><td>bild 2</td></tr>
</table>
</table>

Wie kann ich bewirken, dass die beiden tabellen absolut keinen abstand zueinander haben und die bilder also direkt nebeneinander ohne lücke dazwischen angezeigt werden ?
habs schon mit folgendem versucht :
td {border:none; }
table {border-collapse:collapse;padding:0px;margin:0px;border-spacing:0px;}
body {border:0px}
und über html in den table - tags mit
border="0" cellpadding="0" cellspacing="0"

manches davon mag unnötig erscheinen, aber ich war halt verzweifelt (wenn man 2 tabellen miteinander nicht direkt verbinden kann, dann gebt mir ne andere möglichkeit, ich kann allerdings keine td´s (spalten) einfach nur nebeneinander mit den bildern drin stellen, weil eine der spalten wieder aus mehreren Zeilen bestehen soll....)
thx im vorraus

[JürgenB]

Hallo tunichtgut.de.tc,

nicht nur <table> hat margin und padding, auch die <td>s. Außerdem solltest du, wenn es unbedingt Tabellen sein müssen, mal über rowspan und colspan nachdenken. Tabelle in Tabelle muss fast nie sein.
Und das Anordnen von Elementen nebeneinander geht auch mit der CSS-Eigenschaft float. Dafür brauchst du keine Tabellen.

Gruß, Jürgen

[tunichtgut.de.tc]

klappt irgendwie nur mit position absolute, hab´s jetzt so gelöst...:

<table style="table-layout:fixed" border="0" cellpadding="0" cellspacing="0" height="auto" width="auto">
<table>

<tr><td VAlign="top" RowSpan="3" colspan="3">

<table Style="table-layout:fixed">
<tr><td Height="57px" Width=222px VAlign="top" >
<IMG src="h:ohol.jpg" Alt="pic" Border="0">
</td></TR>
</table>

<tr><td Width=100% VAlign="top" >

<DIV style="position:absolute;top:62px;left:231px;width=100%" >
<table width=100% >
<tr><td width=100% Height="1px" BGColor="#434343">
</td></tr>
</table></div>
</table>
</TABLE>

allerdings frag ich mich, ob´s da nicht noch ne sauberere Lösung gibt, als ein div mit absoluter position zu wählen...kann man da nicht irgendwas mit tabellen machen ?

[JürgenB]

Hallo tunichtgut.de.tc,

klappt irgendwie nur mit position absolute, hab´s jetzt so gelöst...:

ich habe deine "Lösung" ganz schnell gelöscht. So was schlimmes habe ich noch nie gesehen. Drei (in Ziffern: 3) Tabellen für ein Bild. Dazu noch jede Menge Fehler. Und in der Tabelle in der Tabelle ein Div. Au Mann.

allerdings frag ich mich, ob´s da nicht noch ne sauberere Lösung gibt, als ein div mit absoluter position zu wählen

Mit Sicherheit.

...kann man da nicht irgendwas mit tabellen machen ?

Bloß nicht. Das sind schon mehr als genug.
Und warum überhaupt so viele Tabellen. Mit <img ...><img ...> bekommst du doch zwei(*) Bilder nebeneinander. Die Abstände werden per css eingestellt. Oder was soll das ganze bewirken?

Gruß, Jürgen

(*) Das mit den zwei Bildern habe ich geraten. In deinem ersten Posting waren es doch zwei, im zweiten habe ich im Tabellengestrüpp nur noch ein Bild gefunden.

[tunichtgut.de.tc]

»»ich habe deine "Lösung" ganz schnell gelöscht. So was schlimmes habe ich noch nie gesehen. Drei (in Ziffern: 3) Tabellen für ein Bild. Dazu noch jede Menge Fehler. Und in der Tabelle in der Tabelle ein Div. Au Mann.
die oberste tabelle klärt mit ihrer width=100%, dass alle elemente (tabellen) darunter frei skalierbar sind, was ja eines der hauptanliegen beim erstellen von html-dokumenten sein sollte.

die zweite tabelle darunter beinhaltet 2 weitere tabellen, wodurch diese beiden nebeneinander positioniert werden können.
diese tabellen wollte ich nebeneinander positionieren, um <tr>´s mit verschiedenen heights trotzdem nebeneinander platzieren zu können, denn ich muss die höhe der einzelnen <tr> unabhängig voneinander sehr genau regeln können...

allerdings frag ich mich, ob´s da nicht noch ne sauberere Lösung gibt, als ein div mit absoluter position zu wählen

Mit Sicherheit.
 ...kann man da nicht irgendwas mit tabellen machen ?

Bloß nicht. Das sind schon mehr als genug.
Und warum überhaupt so viele Tabellen. Mit <img ...><img ...> bekommst du doch zwei(*) Bilder nebeneinander. Die Abstände werden per css eingestellt. Oder was soll das ganze bewirken?

ok, ich sollte wirklich erstmal klar stellen, was das bewirken soll :)

hab ein bsp. auf nen provisorischen server geladen ...

http://tunichtgut.xardas.lima-city.de/test.html

zwei img bloß nebeneinander zu kriegen würde ja sogar ich schaffen

»»(*) Das mit den zwei Bildern habe ich geraten. In deinem ersten Posting waren es doch zwei, im zweiten habe ich im Tabellengestrüpp nur noch ein Bild gefunden.
da kommen noch viel mehr bilder in die tabellen,soll alles frei skalierbar und schon geordnet, gleich interpretiert von allen browsern werden, danke für deine hilfe (wenigstens einer ) und sieh dir bitte noch men bsp an...

[tunichtgut.de.tc]

oh mann lol, wie konnt ich das posting so schlecht formatieren ......

[wahsaga]

hi,

oh mann lol, wie konnt ich das posting so schlecht formatieren ......

Viel spanndender doch die Frage, warum du deine Inhalte mit so schlechtem HTML auszuzeichnen versuchst ...?

gruß,
wahsaga

[tunichtgut.de.tc]

was genau ist denn daran so furchtbar schlecht ? Wenn die *#*)§/(!  mal klappen würde wär´s doch wunderbar...Es geht mir nur um die grundstruktur (dass dinge wie der head - tag fehlen ist mir klar, ist nur ein test), und warum ist es verwerflich, die einfach mal mit verschachtelten tabellen zu regeln ?

selfhtml-team :
"[...]Doch eine andere, typische Technik kommt zum Einsatz: das Verschachteln von Tabellen. Denn meistens lassen sich saubere Tabellenlayouts nur erreichen, wenn man mit Tabellen innerhalb von Tabellen arbeitet.[...]"

[Længlich]

Bonjour!

was genau ist denn daran so furchtbar schlecht ? Wenn die *#*)§/(!  mal klappen würde wär´s doch wunderbar...Es geht mir nur um die grundstruktur (dass dinge wie der head - tag fehlen ist mir klar, ist nur ein test), und warum ist es verwerflich, die einfach mal mit verschachtelten tabellen zu regeln ?

Naja, Tabellen sind für tabellarische Daten gedacht und nicht zum Positionieren. Früher konnte man nur mit Tabellen positionieren; da war es also auch noch m.E. ok, sie dafür zu 'mißbrauchen', aber jetzt gibt's CSS - das ist dafür viel besser geeignet.
HTML soll heutzutage eigentlich nur den Text semantisch auszeichnen, aber nix übers Layout aussagen. Ganz zu schweigen davon, daß ich mir nicht vorstellen kann, daß man für das Arrangement einiger Bilder wirklich so unübersichtlich verschachtelte Tabellen braucht.

Außerdem verwendest Du Elemente wie <font>, die als "deprecated" (mißbilligt) gekennzeichnet sind - die sind auch völlig veraltet, nimm lieber CSS.
Und die völlig willkürliche Groß- und Kleinschreibung von Elementen und Attributen finde ich offen gestanden auch nicht "wunderbar" - das ist zwar den Browsern afaik egal, aber die Übersichtlichkeit des Quelltextes leidet darunter.

Viele Grüße vom Længlich

[tunichtgut.de.tc]

danke für die konstruktive ANtwort, aslo Tabellen HEUTE nicht mehr für die positionierung von Bildern oder ähnlichem, lieba css !
Da ich jetzt wieder up to date bin - welche css-attribute soll ich denn am besten dafür verwenden - position:absolute, float ... oder was ? welche Attribute wären für meinen verwendungszweck am sinnvollsten ?

[Længlich]

Hi!

Hmm, das ist ziemlich schwer zu sagen, weil ich nicht genau weiß, wie die Seite am Ende aussehen soll. Aber position und float sind prinzipiell die beiden richtigen Stichworte, ja.

Die <font>-Tags lassen sich leicht ersetzen - gib die entsprechenden Formatierungseigenschaften einfach dem jeweils übergeordneten Element (bei Text wahrscheinlich <p>, gegebenenfalls auch <span> u.a. - wenn Du mehrere verschiedene Arten von beispielsweise Textabsätzen unterscheiden mußt, verwende Klassen). Die Auswahl an Eigenschaften ist mit CSS auch viel größer als früher.

Viele Grüße vom Længlich

[wahsaga]

hi,

Da ich jetzt wieder up to date bin - welche css-attribute soll ich denn am besten dafür verwenden

Das dürftest du selber wissen, wenn du wirklich wieder halbwegs "up to date" bist - also beschäftige dich mit CSS, um seine Möglichkeiten (und Fallstricke) kennenzulernen.

Neben dem CSS-Kapitel von selfhtml eigent sich auch http://css4you.de/ für den Einsteig.

gruß,
wahsaga

[JürgenB]

Hallo tunichtgut.de.tc,

so richtig habe ich immer noch nicht verstanden, was du willst. Daher hier nur ein paar allgemeine Ratschläge:

HTML und CSS müssen valide sein. Auch bei Testseiten. Nichtvalide Seiten (oder sollte ich invalide schreiben?) führen fast immer zu abenteuerlichen Resultaten. Daher empfehle ich http://validator.w3.org/check?uri=http://tunichtgut.xardas.lima-city.de/test.html.

Tabellen in Tabellen sind fast immer ein Zeichen von mangelnder Planung. Mit dem sinnvollen Einsatz von rowspan und colspan lassen sie sich meistens vermeiden. Bei Problemen mit Tabellenstrukturen hilft es, die Rahmen um die Zellen einzuschalten.

Wenn es nur darum geht, Elemente wie z.B. Bilder teilweise nebeneinander und teilweise untereinander zu positionieren, fasse die, die untereinander sollen, in Blöcke zusammen, z.B in DIVs mit entsprechender Breite. Diese DIVs kannst du dann mittels float nebeneinander positionieren.

Gruß, Jürgen

[MudGuard]

Hi,

nicht nur <table> hat margin und padding, auch die <td>s.

Nein, td haben keinen margin.

cu,
Andreas

[JürgenB]

Hallo MudGuard,

Nein, td haben keinen margin.

ich habe das gerade mal getestet, margin in td ist zwar lt. CSS-Validator erlaubt, zeigt aber (im IE u. FF) keine Wirkung.
Meine Antwort basierte auf der Erfahrung, dass man sich (u.a.) um beides, Margin und Padding, kümmern muss, auch in über- und untergeordneten Elementen, wenn es in den meisten Browsern annähernd gleich aussehen soll. Bei Tabellen gibt es andere CSS-Möglichkeiten.

Gruß, Jürgen

[MudGuard]

Hi,

Nein, td haben keinen margin.
ich habe das gerade mal getestet, margin in td ist zwar lt. CSS-Validator erlaubt,

Natürlich. Alle Properties können für alle Elemente gesetzt werden.
Aber nur in gewissen Kombinationen zeigen sie auch Wirkung.

http://www.w3.org/TR/CSS21/tables.html#q7 sagt z.B.:
Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

cu,
Andreas