[HTML] Tabelle Horizontal/Vertikal zentrieren

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/html_tabelle_horizontal_vertikal_zentrieren_156537/page_1 - zur Vollversion wechseln!

nr1 schrieb am 15.01.2006 um 16:38

Also ich habe eine HTML Seite gebaut, die eigentlich nur aus einer großen Tabelle besteht.

Und jetzt suche ich nach einer Möglichkeit diese Tabelle in beiden Richtungen zentriert -> daher genau in der Mitte des Fensters, darzustellen. Habe natürlich schon gegoogelt, nur gibts da anscheinend keine vernünftige Lösung, damit das nachher zumindestens im Firefox und IEXplorer auch wirklich zentriert ist.

Weiß wer Rat?

Hansmaulwurf schrieb am 15.01.2006 um 16:40

align="center" ?
oder width="100%" ?
Oder hab ich das Problem jez falsch verstanden?

Vivo schrieb am 15.01.2006 um 16:44

Am einfachsten ist, du machst einen <p> oder <div> container herum mit align=center.
Oder du schließst die Tabelle in eine Tabelle mit 3 Spalten ein, und stellst dann genau die Abstände ein.

nr1 schrieb am 15.01.2006 um 16:47

Also eine Container Tabelle habe ich sowieso schon gehabt, die kann ich auch mit align="center" zentrieren, das funzt bei IEXplorer und auch Firefox (das hab ich vorher auch schon gehabt)

Nur das vertikale zentrieren funktioniert nicht..

mat schrieb am 15.01.2006 um 16:50

vertical wäre es ja auch "valign: middle".
allerdings rate ich dir zu einer css lösung mit "margin: auto" (solltest du problemlos in google finden)

nr1 schrieb am 15.01.2006 um 16:53

Zitat von mat
vertical wäre es ja auch "valign: middle".

theoretisch ja, funzen tuts aber nicht (valign="middle")

mat schrieb am 15.01.2006 um 17:14

welche höhe hat das übergeordnete objekt?

nr1 schrieb am 15.01.2006 um 17:18

Also, dies ist die Tabelle in der eigentlich alles drinnen ist

Code:

<table 
 style="width: 75%; height: 95%; text-align: left;"
 border="0" cellpadding="0" cellspacing="0" align="center">
 <tr>
 <td> Hier sind dann 2 weitere/einzelne Tabelle drinnen</td>
 </tr>
</table>

Und die Haupttabelle soll jetzt vertikal zentriert werden, damit dann alles in der Mitte ist

Vivo schrieb am 15.01.2006 um 17:21

Am wenigsten herumwerkeln musst du, wenn du einfach die Tabellen height 100% und oben und unten jeweils eine Zeile einfügst.

mat schrieb am 15.01.2006 um 17:36

hier ist eine lösung:

beachte den gesetzten doctype, und die "overflow: hidden". dein table darf natürlich nicht größer als die seite werden.

Code: PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
</head>

<body style="margin: 0px; overflow: hidden; width: 100%; height: 100%; position: absolute">

<table 
 style="width: 75%; height: 95%; text-align: left; border: 1px solid black; position: absolute; left: 11%; top: 2%; overflow: hidden"
 border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td> Hier sind dann 2 weitere/einzelne Tabelle drinnen</td>
 </tr>
</table>

</body>
</html>

chappa schrieb am 26.01.2006 um 19:54

ich hatte auch mal das problem dass sich die tabelle nicht zentrieren ließ, allerdings nur vertikal und hier auch wieder nur im iexplore.
mit align="center" gings sowohl im ie als auch im firefox
mit valign="center" gings jedoch nur im firefox

wenn ich mich nicht irre, wäre das dann so:
<table align="center" valign="center">
...
</table>

boogeyman schrieb am 26.01.2006 um 20:17

Es heißt auch nicht valign="center" sondern valign="middle".

schwaigerf schrieb am 27.01.2006 um 19:37

wieso nicht mit einem div via css ?

nr1 schrieb am 02.02.2006 um 00:00

So habe gerade durch Zufall ein Beispiel gefunden, und alles unwichtige weggetan:

Rausgekommen ist dann folgendes, was jetzt auf jeden Fall mal bei IEXplorer und FF funzt:

Code: PHP

<html>
<head>
<style type="text/css">
#inhalt { 	
  position:absolute;
  height: 200px; 
  width: 400px;
  margin: -100px 0px 0px -200px;
  top: 50%; 
  left: 50%;


  background-color: gray; <!--Damit man die Box auch sieht->
}
</style>
</head>

<body>
<div id="inhalt">
<b>zentrieren</b><br /><br />
Dieser Bereich soll horizontal und vertikal zentriert werden.<br>
</div>

</body>
</html>

Jetzt fehlt mir nur mehr das selbe, aber mit variablen "height" sowie "width" Werten in Prozent...

watchout schrieb am 06.02.2006 um 04:29

vertikales Zentrieren über den "Bildschirm" ist kein gedachter Anwendungsfall von HTML/CSS, daher wirst du auch schwer Möglichkeiten finden sowas zu tun.

Maybe CSS3 - kenne die Drafts noch nicht so gut - weils an anderen Stellen durchaus auch sinnvoll sein kann (z.B. vertikale Ausrichtung von Elementen innerhalb eines Block-Level Elements).