• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle zentriert und nebeneinander

V

vivistar

Neues Mitglied
Ich möchte gerne 2 oder 3 Tabellen nebeneinander und zentriert sitzen haben.
Leider bekomme ich es trotz vielen Nachschauen und versuchen nicht hin und die 2 te Tabelle rutsch immer nach unten :(

Folgender Code für die Tabelle ist momentan die Ausgangsposition und soll dann erweiter werden:

<table width="300" border="5"align="center" cellspacing="3" bgcolor="#CCCCCC">
<tbody><tr><tr> <td><font size="2">Test</font></td> <td><font size="2">Test2</font></td>
<tbody><tr><tr> <td><font size="2">Test</font></td> <td><font size="2">Test2</font></td>
<tbody><tr><tr> <td><font size="2">Test</font></td> <td><font size="2">Test2</font></td>
<tbody><tr><tr> <td><font size="2">Test</font></td> <td><font size="2">Test2</font></td>
</tbody></table>
Zum Vergrößern anklicken....


Was muss ich nun machen, damit ich eine oder auch 2 weitere Tabellen nebeneinander und zentriert haben kann und nicht untereinander?

Wäre super, wenn da jemand auf die schnelle was weiß, da es etwas eilt^^
Thx!
 
Wenn es ein Layout werden soll, dann sollte es nicht um Deine Gefühle gehen. Layout macht man mit CSS. Es ist logischer, übersichtlicher, kürzer, barrierefrei.

Es gibt keinen Grund, noch immer zum Layout den bekannten Tabellen-Hack aus den 1990er Jahren zu verwenden. Und das nun seit fast 10 Jahren. Du bist der Zeit etwas hinterher. Deine Besucher verlangen von Dir eine anständige Website, und die verzichtet - natürlich nicht komplett[1] - auf Tabellen.

Gruß,
-Efchen

[1] Tabellen zu Layoutzwecken sind böse. HTML zu Layoutzwecken zu verwenden ist böse. HTML dient nur zur logischen Auszeichnung Deines Inhalts. Tabellarische Daten, wie z.B. eine Fußballtabelle, müssen natürlich weiterhin mit einer Tabelle ausgezeichnet werden.

Ergänzend zu _Thor_:
- Weil Menschen von Natur aus faul sind und keine Lust haben, mit der Zeit zu gehen und lieber in ihrem alten Trott weitermachen, auch wenn er für andere schlecht ist?
 
Gugut - völlig anders:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

#s1 {width:190px;
height:135px;
position:relative;
top:5px;
left:25%;
background-color:#dfd;
float: left;
display: inline;
}

#s2 {width:190px;
height:135px;
position:relative;
top:5px;
left:25%;
background-color:#dfd;
float: left;
display: inline;
}

#s3 {
width:190px;
height:135px;
position:relative;
top:5px;
left:25%;
background-color:#dfd;
float: left;
display: inline;
}
</style>
</head><body>

<div id="s1">s1 relative</div>
<div id="s2">s2 relative</div>
<div id="s3">s3 relative</div>
</body></html>
Zum Vergrößern anklicken....


Soweit habe ich es schön nebeinander. Aber die Position ist nicht mittig - verschiebt sich je nach Fenstergöße. Was fehlt bzw muss anders, damit es immer mittig bleibt?
 
Ok...hab jetzt Container und die 3 "Div-Kästen"

Und wie genau kommen jetzt die Kästen in den Container?
Das steht da leider nicht beschrieben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

#s1 {width:190px;
height:135px;
position:relative;

background-color:#dfd;
float: left;
display: inline;
}

#s2 {width:190px;
height:135px;
position:relative;

background-color:#dfd;
float: left;
display: inline;
}

#s3 {
width:190px;
height:135px;
position:relative;

background-color:#dfd;
float: left;
display: inline;
}
#center
{
width: 700px;
border: 1px solid blue;
margin: 30px auto;
}

</style>
</head><body>
<div id="center">
<p>
Ich bin ein horizontal zentrierter Container.
Falls keine Höhenangabe definiert ist, wächst meine Länge mit dem Inhalt.</p>

</div>


<div id="s1">s1 relative</div>
<div id="s2">s2 relative</div>
<div id="s3">s3 relative</div>
</body></html>
Zum Vergrößern anklicken....
 
So, wie auch Dein <p> im Container div#center steht.
Aber natürlich nur, wenn Du - wie prm gesagt hat - die relativen Positionierungen weglässt. Entweder relativ positioniert oder zentriert.
 
Du musst den #center lediglich an der richtigen Stelle schließen und seine Breite noch anpassen (576px):

<div id="center">
<p>
Ich bin ein horizontal zentrierter Container.
Falls keine Höhenangabe definiert ist, wächst meine Länge mit dem Inhalt.</p>

</div>


<div id="s1">s1 relative</div>
<div id="s2">s2 relative</div>
<div id="s3">s3 relative</div>
</div>
Zum Vergrößern anklicken....

rot=löschen
grün=einfügen.

Außerdem nimm diesen Doctype, damit das auch im IE funktioniert:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
Yo...funktioniert - ich bedanke mich! Is ja mal alles nicht soo einfach^^ ;)

Aber eins verstehe ich nicht:

Warum kann ich nicht einfach mehrere Div's nebeinander zentrieren?
Das muss doch auch ohne Container gehen oder wie?
 
Nö, geht nicht. Weil zwei breiter sind als einer und drei breiter als zwei usw.
Der Zentrier-Code mit "margin: 0 auto;" benötigt immer eine Gesamtbreite.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben