bilder und Tabellen nebeneinander

Sieh mal, ob dir das weiterhilft.
Für die Anordnung untereinander setze im ersten Beispiel nach jedem Bild ein "
oder schreibe den img src in einen Absatz.
In den anderen Beispielen lass die float-Angabe weg.
Positionierung dann über margin vornehmen.

taotao,

würde ich wenn dann mit zwei containern nebeneinander lösen.
In Container1 die Bilder anordnen und in
Container2 die Tabelle. Entweder alles CCS oder alles mit Tabelle.
Die schnellste Lösung:

<table border>
  <tr>
    <td>Inhalt der ersten Zelle</td>
    <td rowspan=3>Inhalt der Bilder - Zelle neben der Tabelle</td>
  </tr>
  <tr>
    <td>Inhalt der zweiten Zelle </td>
  </tr>
  <tr >
    <td>Inhalt der dritten Zelle </td>
  </tr>
</table>

CSS bedeutet ja nicht, dass deshalb Tabellen verboten sind.
Wenn es für eine strukturierte Anordnung sinnvoll ist, dann können durchaus auch Tabellen eingesetzt werden.

Das Problem bei deiner Konstruktion ist folgendes: Du weißt nicht, wie hoch deine Tabelle wird. Das ist abhängig vom Inhalt. Oder du definierst eine bestimmte Höhe.
Wenn die Bilder nun eine geringere Höhe als die Tabelle haben, musst du sie als Blockelement definieren und ihnen dann einen individuellen margin-top-Wert, abhängig von der Tabellenhöhe geben.

Da hier somit zu viele Variablen mitspielen, kann ein Tabellencode durchaus sinnvoll sein.

Ich glaub, wenn du die Tabelle in ein nicht Blockelementpackst, dürftes auch gehen.

Blockelemente stehen untereinander, falls sie nicht gefloatet sind. Inline-Elemente nebeneinander in einer Zeile. Somit war die Idee von "The User" richtig.

So müsste es klappen (zumindest im IE7):

<table width="200" border="1" style="display: inline;"> 
<tr> 
<td></td> 
</tr> 
<tr> 
<td></td> 
</tr> 
<tr> 
<td></td> 
</tr> 
</table> 


[img]bild1.gif[/img][img]bild2.gif[/img]

Ich kann es im FF momentan leider nicht testen und Opera hab ich überhaupt keinen zur Hand.
Schreibe mal etwas Text in die Zellen.

Ja, das hab ich getestet, die Tabelle passt ihre Größe an:

<table style="display:inline; width:200px;" border="1">
<tr>
<td><div style="width:200px;"></div></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Das bringt dann auch im Firefox die gewünschte Tabelle.

Viele liebe Grüße
The User

PS: Im Konqueror läuft es übrigens wie im IE

Ich sag doch es passt sich an den Inhalt an im FF. Wenn der Text 300px Breit ist, wird so auch die Tabelle.
Im Opera, keine Ahnung - vielleicht border-style angeben.

Manchmal ist es nützlich, wenn man eine Nacht drüber schläft.
FF und Opera haben offensichtlich mit display: inline Probleme.
Ich habe jetzt mal was konstruiert, was eher eine Hilfskonstruktion als eine saubere Lösung ist. Falls es klappt und praktikabel ist, wäre aber der Zweck erfüllt.
Allerdings nur in IE7 getestet:

<table width="200" border="1"> 
<tr> 
<td></td> 
</tr> 
<tr> 
<td></td> 
</tr> 
<tr> 
<td></td> 
</tr> 
</table> 


<div style="height: 1px; width: 100%; background: red;"></div>


<div style="margin-left: 210px; margin-top:-48px;">
[img]bild1.gif[/img][img]bild2.gif[/img] 
</div>

Die Überlegung ist folgende:
Unter der Tabelle wird ein "Hilfsdiv" eingebaut. Hier nur 1px hoch und zur besseren Verdeutlichung mit rotem Hintergrund. Die Farbe dann einfach weglassen.

Danach folgt ein weiterer Div, in dem sich die Bilder befinden.
Dieser hat einen linken Abstand, welcher der Tabellenbreite entspricht, zuzüglich etwas Abstand. Er wird mit einem negativen margin-top-Wert versehen, welcher der größten Höhe des entsprechenden Bildes entspricht. Somit schiebt sich dieser Container, der eigentlich unter dem Hilfsdiv steht entsprechend nach oben.

Wie gesagt: etwas an den Haaren herbeigezogen, aber wenn's hilft....

sejuma,

funktioniert leider nur im FF;IE7 und Opera. Der IE5.5 und IE6 will nicht so ganz mitspielen. Das könnte man sicher noch anpassen aber die Lösung ist doch sehr speziell. Die Werte (margin-top:-48px;) müssten immer zur Höhe des Bildes angepasst werden. Mals sehen ob ich bis morgen abend eine reine css - Lösung ohne Tabelle finde.