[HTML] Tabelle Horizontal/Vertikal zentrieren

nr1

Here to stay

Registered: Dec 2003
Location: AT
Posts: 617

15.01.2006 - 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?

Bearbeitet von nr1 am 14.02.2006, 14:36

Hansmaulwurf

u wot m8?

Registered: Apr 2005
Location: VBG
Posts: 5639

15.01.2006 - 16:40

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

Vivo

Dreamworker

Registered: May 2002
Location: Tal der Könige
Posts: 1478

15.01.2006 - 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

Here to stay

Registered: Dec 2003
Location: AT
Posts: 617

15.01.2006 - 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

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25423

15.01.2006 - 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

Here to stay

Registered: Dec 2003
Location: AT
Posts: 617

15.01.2006 - 16:53

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

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

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25423

15.01.2006 - 17:14

welche höhe hat das übergeordnete objekt?

nr1

Here to stay

Registered: Dec 2003
Location: AT
Posts: 617

15.01.2006 - 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

Dreamworker

Registered: May 2002
Location: Tal der Könige
Posts: 1478

15.01.2006 - 17:21

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

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25423

15.01.2006 - 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

Bloody Newbie

Registered: Dec 2005
Location: kärnten
Posts: 24

26.01.2006 - 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

Bloody Newbie

Registered: Mar 2003
Location: Wien
Posts: 1176

26.01.2006 - 20:17

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

schwaigerf

Addicted

Registered: Oct 2005
Location: Hagenberg - Brau..
Posts: 567

27.01.2006 - 19:37

wieso nicht mit einem div via css ?

nr1

Here to stay

Registered: Dec 2003
Location: AT
Posts: 617

02.02.2006 - 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

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

06.02.2006 - 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).

nr1 Here to stay Registered: Dec 2003 Location: AT Posts: 617	15.01.2006 - 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? Bearbeitet von nr1 am 14.02.2006, 14:36
Hansmaulwurf u wot m8? Registered: Apr 2005 Location: VBG Posts: 5639	15.01.2006 - 16:40 align="center" ? oder width="100%" ? Oder hab ich das Problem jez falsch verstanden?
Vivo Dreamworker Registered: May 2002 Location: Tal der Könige Posts: 1478	15.01.2006 - 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 Here to stay Registered: Dec 2003 Location: AT Posts: 617	15.01.2006 - 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 Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25423	15.01.2006 - 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 Here to stay Registered: Dec 2003 Location: AT Posts: 617	15.01.2006 - 16:53 Zitat von mat vertical wäre es ja auch "valign: middle". theoretisch ja, funzen tuts aber nicht (valign="middle")
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25423	15.01.2006 - 17:14 welche höhe hat das übergeordnete objekt?
nr1 Here to stay Registered: Dec 2003 Location: AT Posts: 617	15.01.2006 - 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 Dreamworker Registered: May 2002 Location: Tal der Könige Posts: 1478	15.01.2006 - 17:21 Am wenigsten herumwerkeln musst du, wenn du einfach die Tabellen height 100% und oben und unten jeweils eine Zeile einfügst.
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25423	15.01.2006 - 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 Bloody Newbie Registered: Dec 2005 Location: kärnten Posts: 24	26.01.2006 - 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 Bloody Newbie Registered: Mar 2003 Location: Wien Posts: 1176	26.01.2006 - 20:17 Es heißt auch nicht valign="center" sondern valign="middle".
schwaigerf Addicted Registered: Oct 2005 Location: Hagenberg - Brau.. Posts: 567	27.01.2006 - 19:37 wieso nicht mit einem div via css ?
nr1 Here to stay Registered: Dec 2003 Location: AT Posts: 617	02.02.2006 - 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 Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	06.02.2006 - 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).

[HTML] Tabelle Horizontal/Vertikal zentrieren

Forum Index > Software > Coding Stuff

nr1

Hansmaulwurf

Vivo

nr1

mat

nr1

mat

nr1

Vivo

mat

chappa

boogeyman

schwaigerf

nr1

watchout