Tabellen vertikal ausrichten

[Manny]

Ich habe folgendes Problem:

Meine Homepage besteht aus 3 Frames, im mittleren Frame befindet sich nur 1 Tabelle.

Jetzt die Frage:
Wie schaffe ich es, daß diese Tabelle vertikal in der Mitte dieses Rahmens steht?

[Stephan]

Ich habe folgendes Problem:

Meine Homepage besteht aus 3 Frames, im mittleren Frame befindet sich nur 1 Tabelle.

Jetzt die Frage:
Wie schaffe ich es, daß diese Tabelle vertikal in der Mitte dieses Rahmens steht?

<table border="0px" width="100%" height="100%">

<tr> //wenns im ns nicht klappt -> valign

<td>

<table border="0px" align="center">
        <tr>
            <td>....</td>
        </tr>
    </table>

</td>

</tr>

</table>

Gruß

Stephan

[Stephan]

Sorry bitte auf <td> Tag anwenden: //wenns im ns nicht klappt -> valign

Stephan

[Matthias Kunz]

Hallo,

man kann eine Tabelle in eine Tabelle setzen. Die äußere Tabelle hat 100% Höhe und besteht aus nur einer Zelle. Die innere Tabelle kann dann zentriert in der Mitte stehen:

<table width="100%" height="100%">
  <tr>
    <td width="100%" align="center">
        <table>
          <tr>
            <td>BlaBla</td>
          </tr>
        </table>
    </td>
  </tr>
</table>

Grüße
Matthias

[Kai Lahmann]

hi

<table width="100%" height="100%">

falsch.

gruss Kai

[Kai Lahmann]

hi

2 mal Antwort - 2 mal gleicher Fehler - doll...

so:
im HTML muss nur die Tabelle da sein.

CSS:
html{height:100%;}
body{height:100%;vertical-align:middle;text-align:center;}
body > table{margin:auto;}

[Sascha Knappe]

hallo kai,

wenn ich eine tabelle mit <table width="100%" border="0" align="center"> horizental zentrieren kann, geht das dann nicht auch mit <table width="100%" border="0" valign="middle"> vertikal?

gruß

die knappschaft

[Manny]

Im IE6 geht das, nur Netscape nimmt die %-Angabe bei "height" nicht.

[Sascha Knappe]

hi manny,

Im IE6 geht das, nur Netscape nimmt die %-Angabe bei "height" nicht.

das ist auch richtig, da laut html 4.01 spezifikation tabellen kein height haben. ist schon sehr oft hier im forum besprochen worden. solltest du über die suche finden können. mit ging es auch nicht um das height oder width der tabelle, sondern um das valign="middle" zum zentrieren in der vertikale.

gruß

die knappschaft

[Thorsten Beuth]

hallöle,

hi manny,

Im IE6 geht das, nur Netscape nimmt die %-Angabe bei "height" nicht.

Kann ich mir gut vorstellen

das ist auch richtig, da laut html 4.01 spezifikation tabellen kein height haben. ist schon sehr oft hier im forum besprochen worden. solltest du über die suche finden können. mit ging es auch nicht um das height oder width der tabelle, sondern um das valign="middle" zum zentrieren in der vertikale.

stümmt, lösung ist aber simpel - jedenfall klappt es bei mir: einfach doctype weglassen- bewirkt bei mir wunder :))

gruß

gruß

die knappschaft

das irrenhaus

[Kai Lahmann]

hi

stümmt, lösung ist aber simpel - jedenfall klappt es bei mir: einfach doctype weglassen- bewirkt bei mir wunder :))

oder anständiges HTML schreiben. Diese verringerte Toleranz bei DOCTYPE-Angabe sind nicht dazu da, um die Webdesigner zu schikanieren sondern darum nervige HTML-Marotten abzugewöhnen.

gruss Kai

[Kai Lahmann]

hi

wenn ich eine tabelle mit <table width="100%" border="0" align="center"> horizental zentrieren kann, geht das dann nicht auch mit <table width="100%" border="0" valign="middle"> vertikal?

Das ist die absurdität der anten HTML-Angaben:
align="" ist die Ausrichtung der Tabelle selbst
valign="" ist die Ausrichtung des Tabelleninhalts

in CSS ist das jetzt (zum Glück) reindeutig:
text-align und vertical-align sind für die Ausrichtung des Inhalts, mit margin:auto wird das Element selbst ausgerichtet. Der IE5 handelt hier etwas anders: er wendet text-align und vertical-align auch auf enthaltene Block-Elemente wie etwa Tabellen an und kennt keine auto-Margins. Im IE6 geht's dann genau wie in Mozilla, Opera und konqueror.

gruss Kai

[Sascha Knappe]

hi kai,

vielen dank, hab sowas halt noch nie gebraucht, daher die frage.

die knappschaft

[kerki]

Bongú!

Das ist die Absurdität der alten HTML-Angaben:
align="" ist die Ausrichtung der Tabelle selbst
valign="" ist die Ausrichtung des Tabelleninhalts

Hä?

'align'  meint die horizontale Ausrichtung
'valign' meint die vertikale Ausrichtung

Das 'valign'-Atrribut ist jedoch für das 'TABLE'-Element nicht definiert und führt daher hier nicht zum Erfolg.

in CSS ist das jetzt (zum Glück) reindeutig:
text-align und vertical-align sind für die Ausrichtung des Inhalts, mit margin:auto wird das Element selbst ausgerichtet.

Korrekt.

Um Missverständnissen vorzubeugen, sollte man vielleicht ergänzen, dass mit 'vertical-align' die Ausrichtung des Inhalts in dessen Line-Box gemeint ist.

Im Tabellenkontext sollte man daher die guten alten 'align'- und 'valign'-Attribute für die Ausrichtung des gesamten Inhalts von Tabellenzellen verwenden.
Das Ergebnis dürfte dann voraussichtlich eher den Erwartungen entsprechen.

Sahha,

kerki

[Clemens]

hi

2 mal Antwort - 2 mal gleicher Fehler - doll...

so:
im HTML muss nur die Tabelle da sein.

CSS:
html{height:100%;}
body{height:100%;vertical-align:middle;text-align:center;}
body > table{margin:auto;}

Hallo Kai und andere!

1. Im Subjekt zu diesem Therad steht nur "Tabelle _vertikal_ ausrichten". Nach den ganzen Antworten gehe ich mal davon aus, dass es "Tabelle vertikal _und horizontal_ ausrichten" heißen muss.

2. Ich habe mich gestern schon mal mit den Antworten zum horizontalen und vertikalen zentrieren im Archiv herumgeschlagen, bin aber auf keinen grünen Zweig gekommen.

Fest steht, dass height nicht HTML-konform ist, weshalb die unten im Thread beschriebenen Möglichkeiten nicht optimal sind.

Nun habe ich folgends versucht (da weiß ich nicht, ob ich Deine Angaben korrekt umgesetzt habe) was aber nicht geht, es wird nur horizontal zentriert, nicht aber vertikal:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style type="text/css">
    <!--
      html {height:100%;}
      body {height:100%;vertical-align:middle;text-align:center;}
    -->
  </style>
</head>

<body>
  <table style="margin:auto;">
    <tr>
      <td>dies soll vertikal und horizontal zentriert sein</td>
    </tr>
  </table>
</body>
</html>

Für was ist die Angabe "html" in den css? Was ist der Unterschied zu "body"? Warum funktioniert das mit Mozilla IE 5 und NN 4.x nicht? Wie muss es heissen, damit es funktioniert? Welche -evtl. anderen Angaben- muss ich für Netscape 4.x machen?

Alles soll selbstverständlich HTML 4.01 Transitional-valide sein.

Clemens

[Kai Lahmann]

hi

Für was ist die Angabe "html" in den css? Was ist der Unterschied zu "body"? Warum funktioniert das mit Mozilla IE 5 und NN 4.x nicht? Wie muss es heissen, damit es funktioniert? Welche -evtl. anderen Angaben- muss ich für Netscape 4.x machen?

mom.. also in Mozilla und anderen CSS2-fähigen Browsern geht's..? Nur Crapscape macht (mal wieder) Ärger..? Versuch mal eine Tabelle mit Höhe und Breite 100% und einer vertikalen Zentrierung (möglichst über CSS :)

gruss Kai

[Clemens]

Hi Kai!

mom.. also in Mozilla und anderen CSS2-fähigen Browsern geht's..? Nur Crapscape macht (mal wieder) Ärger..? Versuch mal eine Tabelle mit Höhe und Breite 100% und einer vertikalen Zentrierung (möglichst über CSS :)

Was geht der von mir oben gepostete Code??? Kannst Du da noch mal drüber gucken, vielleicht nur ein dummer Fehler, und was ist denn nun der Unterscheid zwischen der html und der body-Angabe?

Clemens

[Kai Lahmann]

hi

Was geht der von mir oben gepostete Code??? Kannst Du da noch mal drüber gucken, vielleicht nur ein dummer Fehler, und was ist denn nun der Unterscheid zwischen der html und der body-Angabe?

<!DOCTYPE html public "-//W3C//DTD XHTML 1.1//EN" "DTD/xhtml11.dtd">
<html>
<head>
  <style type="text/css">
      html {height:100%;}
      body {height:100%;}
  </style>
</head>

<body>
<table style="width:100%;height:100%;text-align:center;vertical-align:middle;">
<tr>
<td>
  <table style="margin:auto;">
    <tr>
      <td>dies soll vertikal und horizontal zentriert sein</td>
    </tr>
  </table>
</td>
</tr>
</table>
</body>
</html>

so geht's in Mozilla - also tatsächlich noch eine Tabellenebene dazwischen nötig. Netscrap 4 peilt das wohl gar nicht ohne HTML-Verstöße.