Tabellen nebeneinander zentrieren

[carlberg]

Hallo!

Ich habe nun 2 Stunden das Netz und das SELFHTML-Forumsarchiv durchwühlt. Leider konnte ich in keinem der Beiträge, auch wenn die Themen noch so mit dem meinem verwandt waren, die Lösung zu meinem Problem finden.

Das möchte ich erreichen: Ich habe die folgende Tabelle für ein Benutzerfoto, welches von einem Bilderrahmen (Bilddateien) umgeben ist, erstellt:

  
        <table>  
            <tr>  
                <td width="108" height="14" colspan="3" background="images/rahmen_klein_oben.jpg"></td>  
            </tr>  
            <tr>  
                <td width="14" background="images/rahmen_klein_links.jpg"></td>  
                <td width="80"><img src="user.jpg" width="80" border="0"></td>  
                <td width="14" background="images/rahmen_klein_rechts.jpg"></td>  
            </tr>  
            <tr>  
                <td width="108" height="14" colspan="3" background="images/rahmen_klein_unten.jpg"></td>  
            </tr>  
        </table>  

Bitte mich nicht darauf hinweisen, CSS anstatt width- und height-Attribute in den Elementen zu verwenden, dies ist mein -rohbau und das würde ich anschließend machen, sobald das eigentlich Problem gelöst ist.

Diese Tabelle, ab jetzt genannt "Bilderrahmen" (den sie nämlich darstellt), soll mehrmals, nämlich für Portraitfotos verschiedener Personen, nebeneinander angezeigt werden. Das zugrundeliegende PHP-Skript generiert jeweils diese Tabelle. Die Rahmen sollen ZENTRIERT und NEBENEINANDER auf der Seite erscheinen, sind es mehr, als es die Seitenbreite zulässt, erscheint der nächste Bilderrahmen ebenfalls ZENTRIERT in der nächsten Zeile.

Anschaulich:

  
0 Bilderrahmen  
|_________|  
|_________|  
  
1 Bilderrahmen  
|____X____|  
|_________|  
  
2 Bilderrahmen  
|___X_X___|  
|_________|  
  
3 Bilderrahmen  
|__X_X_X__|  
|_________|  
  
4 Bilderrahmen  
|_X_X_X_X_|  
|_________|  
  
5 Bilderrahmen  
|X_X_X_X_X|  
|_________|  
  
6 Bilderrahmen  
|X_X_X_X_X|  
|____X____|  
  
7 Bilderrahmen  
|X_X_X_X_X|  
|___X_X___|  
  
usw.  

Ob um die Tabellen noch irgendein Element herummuss (div, span, p, whatever...) und was für ein umgebenden Container-Element von Nöten wäre, das ist hierbei vollkommen freigestellt. Der bildet den umgebenden Container eine Tabellenzelle (TD). Dies kann aber auch ein DIV werden, wenn dies benötigt würde.

Bisher habe ich es ENTWEDER hinbekommen, dass die Bilderrahmen zwar zentriert, aber untereinander ausgegeben, oder aber nebeneinander, aber linksbündig ausgegeben werden. Ich habe schon etliche Lösungsansätze hier im Forum verfolgt und ausprobiert, u.a. eine Lösung mit UL und LI-Elementen. Diese werden, sobald man ein DIV oder TABLE-Element im LI-Element einfügt, aber stets untereinander ausgegeben.

Es wäre schön, wenn jemand eine Idee dazu hätte oder dies ggf. bereits irgendwo gelöst hat oder gelöst kennt. Weiterbringende Forenbeiträge wären auch willkommen, aber wie gesagt, ich habe schon einige durchforstet. Der komplexe Inhalt der einzelnen Elemente (nämlich ganze Tabellen) scheint hierbei Probleme zu machen.

Vielen Dank!

[carlberg (Nachtrag)]

...was ich vielleicht noch erwähnen sollte:

Das ganze riecht hierbei ganz stark nach einem Einsatzgebiet der FLOAT-Eigenschaft. Damit habe ich selbstverständlich auch schon herumexperimentiert. Das Problem ist halt, dass die Bilderrahmen dann alle linksbündig dargestellt werden und dass ich dies aber nicht beabsichtige. Gewünscht ist genau das FLOAT-Verhalten des sich RECHTS DANEBEN ANSIEDELNS. Aber halt in seiner Gesamtheit dann wiederum zentriert.

Alle in ein DIV gepackt und dieses DIV dann im darüberliegenden Container-Element zentriert, hat auch nicht geklappt.

[Felix Riesterer]

Lieber carlberg,

hilft Dir diese Seite bei Deinem Problem weiter?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[carlberg (nun glücklich!)]

Vielen Dank, Felix. Vielen Dank für die sehr schnelle Hilfe! Es klappt. Die Lösung war, die display-Eigenschaft mit inline zu belegen.

  
<style type="text/css">  
.zentriert {  
 text-align: center;  
 margin-left: auto;  
 margin-right: auto;  
}  
</style>  
  
    <div class="zentriert">  
        <table style="display: inline;">  
            <tr>  
                <td width="108" height="14" colspan="3" background="images/rahmen_klein_oben.jpg"></td>  
            </tr>  
            <tr>  
                <td width="14" background="images/rahmen_klein_links.jpg"></td>  
                <td width="80"><img src="user.jpg" width="80" border="0"></td>  
                <td width="14" background="images/rahmen_klein_rechts.jpg"></td>  
            </tr>  
            <tr>  
                <td width="108" height="14" colspan="3" background="images/rahmen_klein_unten.jpg"></td>  
            </tr>  
        </table>  
    </div>  

[Felix Riesterer]

Lieber carlberg,

<div class="zentriert">
        <table style="display: inline;">

schöner wäre natürlich eine Lösung, bei der Du auf das individuelle <div> um Deine Tabelle herum komplett verzichten könntest. Mich hatte damals Gernot Back auf den entscheidenden Weg gebracht.

Liebe Grüße aus Ellwangen,

Felix Riesterer.