nicht angemeldet
gesamte Tabelle auf Seite zentrieren
Hallo, Leser...
ich würde gerne eine gesamte Tabelle mit fester Breite von 550 Pixeln in der Mitte einer HTML-Seite zentrieren. Ich habe ein CSS definiert (text-align:center) und es einmal als class in das Tabellentag eingebunden, einmal per <div> um die Tabelle herum... kann mir einer sagen, wo ich es hinpacken muß, damit die Tabelle dann doch mal zentriert ist? ^^;
mfg,
Maik
-
Hi Maik,
Definiere einfach 3 Spalten! Dei mittlere ist die, die du angezeigt haben willst, die anderen 2 lässt du leer
<table>
<colgroup>
<col width="*">
<col width="550">
<col width="*">
</colgroup>
.
.
.MFG
Philipp
-
Hallo, Leser...
ich würde gerne eine gesamte Tabelle mit fester Breite von 550 Pixeln in der Mitte einer HTML-Seite zentrieren. Ich habe ein CSS definiert (text-align:center) und es einmal als class in das Tabellentag eingebunden, einmal per <div> um die Tabelle herum... kann mir einer sagen, wo ich es hinpacken muß, damit die Tabelle dann doch mal zentriert ist? ^^;
mfg,
Maik
Hallo Maik,
ich hab´ dir mal zwei Lösungen gemacht, falls das nicht passt kannst du ja mal schreiben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>Center</title>
</head>
<body>
<div align="center">
<table border="1" width="550">
<tr>
<td>Center 1</td>
</tr>
</table>
</div>
<br>
<br>
oder aber...
<table width="100%">
<tr>
<td>
<table border="1" width="550" align="center">
<tr>
<td>Center 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> -
Hallo Maik,
ich würde gerne eine gesamte Tabelle mit fester Breite von 550 Pixeln in der Mitte einer HTML-Seite zentrieren. Ich habe ein CSS definiert (text-align:center) und es einmal als class in das Tabellentag eingebunden, einmal per <div> um die Tabelle herum... kann mir einer sagen, wo ich es hinpacken muß, damit die Tabelle dann doch mal zentriert ist? ^^;
mit text-align kannst Du das table-Element nicht zentrieren, weil
sich diese Definition nur auf Inline-Level-Elemente auswirkt.
<table style="margin:auto;"> zentriet eine Tabelle und ist nebenbei
auch noch eine saubere Lösung.Viele Grüße,
Stefan-
Hallo,
mit text-align kannst Du das table-Element nicht zentrieren, weil
sich diese Definition nur auf Inline-Level-Elemente auswirkt.Auf die Idee muß man auch erstmal kommen >_<
<table style="margin:auto;"> zentriet eine Tabelle und ist nebenbei
auch noch eine saubere Lösung.Danke, genau das Teil hatte ich gesucht. Ich danke, Firma zahlt ^_-
mfg,
Maik
-
-
Bongú!
ich würde gerne eine gesamte Tabelle mit fester Breite von 550 Pixeln in der Mitte einer HTML-Seite zentrieren. Ich habe ein CSS definiert (text-align:center) und es einmal als class in das Tabellentag eingebunden, einmal per <div> um die Tabelle herum
Dies führt zu nichts, da sich 'text-align: center;' ausschließlich auf den Inline-Content eines Blocks bezieht. Eine Tabelle ist aber ein Block-Level-Element. Auf die Tabelle wirkt sich diese Formatierung daher nicht aus.
... kann mir einer sagen, wo ich es hinpacken muß, damit die Tabelle dann doch mal zentriert ist? ^^;
Du hast hierfür (mindestens) 2 Möglichkeiten:
1. Variante: (HTML 4.01 Transitional):
--------------------------------------
nur HTML:
<table align="center" width="550">
[...]
</table>2. Variante: (HTML 4.01 Strict):
--------------------------------------
CSS:
table { margin-left: auto;
margin-right: auto; }
oder:
table { margin: auto; }HTML:
<table width="550">
[...]
</table>Bei der 2. Variante bestimmst du mittels CSS, dass der seitliche Abstand zwischen Tabelle und Umgebung automatisch berechnet werden soll. Da dies für beide Seiten so definiert wird, wird für beide Seiten der gleiche Abstand genommen, was zwangsläufig zu einer Zentrierung der Tabelle führt.
Die CSS-Variante wird im Gegensatz zur HTML-Variante nur von modernen Browsern unterstützt (z.B. Mozilla 0.9.8, IE 6 und Opera 6). Speziell für IE 6 muss hierbei besonders auf eine ordnungsgemäße Deklarierung des Dokumententyps geachtet werden. (Siehe: http://www.styleassistant.de/tips/tip52.htm)
Sahha,
kerki
mfg,
Maik
-
Salut,
Bei der 2. Variante bestimmst du mittels CSS, dass der seitliche Abstand zwischen Tabelle und Umgebung automatisch berechnet werden soll. Da dies für beide Seiten so definiert wird, wird für beide Seiten der gleiche Abstand genommen, was zwangsläufig zu einer Zentrierung der Tabelle führt.
Funktioniert leider nicht vertikal. Gibt's da auch einen Trick?
Bye,
Peter-
Bongú!
Funktioniert leider nicht vertikal.
Sieht ganz so aus! :-(
Gibt's da auch einen Trick?
Keinen, den ich kennen würde.
Mit einer zweiten Hilfstabelle ginge es so:
--------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fader</title>
<style type="text/css">
html, body { height: 100%; margin:0; padding:0;}
#aussen { height:100% }
</style>
<table width="100%" id="aussen">
<tr>
<td align="center" valign="middle">
<table border="2" width="550" id="innen">
<tr>
<td>innen</td></tr></table></td></tr></table>
--------------------------------------------------Diese Möglichkeit ist zwar strikt valides HTML, aber bei weitem nicht das Gelbe vom Ei.
Sahha,
kerki
-
Hi,
<title>Fader</title>
Was das? ;-)
Diese Möglichkeit ist zwar strikt valides HTML, aber bei weitem nicht das Gelbe vom Ei.
Stimmt, so ähnlich hab ich's ja auch schon auf meiner Homepage -
nur IMHO etwas besser.Bye,
Peter-
Bongú!
<title>Fader</title>
Was das? ;-)Menno! Copy & Waste! :-)
Diese Möglichkeit ist zwar strikt valides HTML, aber bei weitem nicht das Gelbe vom Ei.
Stimmt, so ähnlich hab ich's ja auch schon auf meiner Homepage -
nur IMHO etwas besser.Beziehst du dich auf dein
<td style="vertical-align: middle">
anstelle von meinem
<td valign="middle"> ?
"Pott wie Deckel" würde ich sagen.
Sahha,
kerki
BTW: http://www.opera.com/download/ (Falls du verstehst, was ich dir damit sagen will) ;-)
-
Moin,
Beziehst du dich auf dein
<td style="vertical-align: middle">
anstelle von meinem
<td valign="middle"> ?
"Pott wie Deckel" würde ich sagen.
Nein, mein Code ist kürzer.
BTW: http://www.opera.com/download/ (Falls du verstehst, was ich dir damit sagen will) ;-)
http://www.mozilla.org/releases/ (Das ist ein Konter!)
SCNR,
Peter-
Bongú!
<td style="vertical-align: middle">
<td valign="middle"> ?
Nein, mein Code ist kürzer.Rein optisch finde ich meinen kürzer, aber "Geschenkt"!
BTW: http://www.opera.com/download/ (Falls du verstehst, was ich dir damit sagen will) ;-)
http://www.mozilla.org/releases/ (Das ist ein Konter!)*g*
Deine "neue" Seite sah auch mit dem "alten" Mozilla schon gut aus. (Falls du den "Wink mit dem Zaunpfahl" _jetzt_ verstehen solltest) ;-)
SCNR,
Dito!
Sahha,
kerki
-
Bongú!
Bin grad im ersten Jahr Französisch, und hatte bisher nur Salut
und so'n Zeuch. Also, was heißt Bongú?Deine "neue" Seite sah auch mit dem "alten" Mozilla schon gut aus. (Falls du den "Wink mit dem Zaunpfahl" _jetzt_ verstehen solltest) ;-)
Nein, ohne Sche*ß. Erklär büdde mal ... bin zu blöd dafür.
Bye,
Peter :)-
Bongú!
Bin grad im ersten Jahr Französisch, und hatte bisher nur Salut
und so'n Zeuch. Also, was heißt Bongú?"Hallo" :-D
Deine "neue" Seite sah auch mit dem "alten" Mozilla schon gut aus. (Falls du den "Wink mit dem Zaunpfahl" _jetzt_ verstehen solltest) ;-)
Nein, ohne Sche*ß. Erklär büdde mal ... bin zu blöd dafür.Ich wollte dich nur dezent darauf hinweisen, dass deine neugestaltete Seiten im Opera 6.01 nicht so aussehen, wie du es dir wahrscheinlich vorgestellt hast.
Da ich mich aus früheren Diskussionen zu erinnern glaubte, dass du Opera bei dir nicht installiert hast, wollte ich dir den Download ans Herz legen, damit du dir selbst ein Bild von den Fehldarstellungen machen und diese entsprechend abstellen kannst. :-)
Sahha,
kerki
-
"Hallo" :-D
Hallo :)
Da ich mich aus früheren Diskussionen zu erinnern glaubte, dass du Opera bei dir nicht installiert hast, wollte ich dir den Download ans Herz legen, damit du dir selbst ein Bild von den Fehldarstellungen machen und diese entsprechend abstellen kannst. :-)
Ahso, danke.
Bye,
Peter
-
-
-
-
-
-
-
-
hi
Funktioniert leider nicht vertikal. Gibt's da auch einen Trick?
height:100%; für's body - und natürlich den margin nicht nur für rechts+links :)
-
Bongú!
Funktioniert leider nicht vertikal. Gibt's da auch einen Trick?
height:100%; für's body - und natürlich den margin nicht nur für rechts+links :)
Sollte man meinen. Klappt aber nicht!
Zumindest haben dies meine Tests ergeben.
Hast du ein Gegenbeispiel?
Sahha,
kerki
-
-
-