Tabellen Ausrichtung über CSS?

[Prebyter]

Guten Morgen,

warum kann ich nicht mit valign bzw text-align meine Tabelle über css ausrichten?
Gibt es bezüglich auf die Tabelle noch eine weitere Barriere?

[Thomas Luethi]

Hallo,

warum kann ich nicht mit valign bzw text-align meine Tabelle über css ausrichten?

text-align und vertical-align (nicht valign) richten
den _Inhalt_ eines Block-Level-Elements aus, nicht
das Element selbst.

Moeglichkeiten z.B.:
1. table { margin-left:auto; margin-right:auto; }
2. text-align und vertical-align fuer das Element,
   in dem die Tabelle enthalten ist (z.B. body oder ein DIV).

http://www.netandmore.de/faq/fom-serve/cache/1239.html
http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/
http://www.tiptom.ch/homepage/faq.html?q=tabzentriert

Gruesse,

Thomas

[KD-one]

Hallo Thomas,

text-align und vertical-align (nicht valign) richten
den _Inhalt_ eines Block-Level-Elements aus, nicht
das Element selbst.

Moeglichkeiten z.B.:

1. table { margin-left:auto; margin-right:auto; }
2. text-align und vertical-align fuer das Element,
      in dem die Tabelle enthalten ist (z.B. body oder ein DIV).

http://www.netandmore.de/faq/fom-serve/cache/1239.html
http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/
http://www.tiptom.ch/homepage/faq.html?q=tabzentriert

Zusatz für den IE:
1. table { margin-left:auto; margin-right:auto;text-align:center; }
Da der IE auch in der neuesten Version zu blöd ist, die Formatierung per margin umzusetzen.

Gruß

Kurt

[Thomas Luethi]

Hallo,

Zusatz für den IE:

1. table { margin-left:auto; margin-right:auto;text-align:center; }

Hast Du das ausprobiert? Richtet
table { text-align:center; }
im MS IE wirklich die Tabelle selbst aus?
Wuerde mich erstaunen.

Bisher dachte ich, das text-align:center sei beim
die Tabelle _umgebenden_ Element notwendig fuer die
alten MS IE und den MS IE 6.0 im Quirks Modus.

Da der IE auch in der neuesten Version zu blöd ist, die Formatierung per margin umzusetzen.

Pass auf, was Du sagst!
Ich wurde hier schon arg beschimpft, weil ich das gleiche behauptete. ;-)

Offenbar kann MS IE 6.0 die "margin-Ausrichtung" endlich, aber _nur_,
wenn er im Standards-Compliant Modus ist (Stichwort Doctype Switch).
Steht zumindest hier:
http://www.netandmore.de/faq/fom-serve/cache/1239.html
und wurde mir damals an den Kopf geworfen...

Der XML-Prolog <?xml ...> reicht bekanntlich aus, um ihn
wieder in den Quirks Modus zu schicken...

Gruesse,

Thomas

[frankxberlin]

hallo thomas,

darf ich hier noch eine frage anschließen: wie steht es mit dem vertikalen align? eine "lösung" die ich im netz gesehen habe wäre:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle">
      <TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>

dass height kein table-attribut ist weiß ich, und dass das alles wohl unschön ist auch, aber es funzt, gelle?

du schreibst auf deiner seite:

Eine Möglichkeit ist, der Tabelle eine Höhenangabe in Prozent sowie eine Mindest-Höhe in einer anderen Einheit (z.B. em oder px) zu geben und den oberen und unteren Aussenabstand mit gleichen Prozent-Werten anzugeben.
table { height:60%; min-height:10em; margin-top:20%; margin-bottom:20%; }
(20 + 60 + 20 = 100).

ist denn height bei css dann eine mögliche angabe für tabellen? einfacher bleibt ja wohl die obere variante, weil ich mir keinen kopf machen muss über die tabellen höhe oder?

gruß und dank, frank

[Thomas Luethi]

Hallo Frank,

darf ich hier noch eine frage anschließen: wie steht es mit dem vertikalen align? eine "lösung" die ich im netz gesehen habe wäre:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle">
      <TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>

dass height kein table-attribut ist weiß ich, und dass das alles wohl unschön ist auch, aber es funzt, gelle?

Diese "Loesung" wird ja sehr oft empfohlen; ich vermute schon,
dass sie "funzt" - jedenfalls, wenn ein Browser das illegale
height="100%" Attribut noch beruecksichtigt.

Ich finde sie extrem haesslich, weil die aeussere Tabelle
HTML-maessig voellig ueberfluessig ist.

Wenn Du sie trotzdem verwendest, koenntest Du ja versuchen,
das height="100%" durch CSS zu ersetzen:
<table style="width:100%; height:100%">
Natuerlich muss dann auch das umgebende Element,
z.B. BODY, noch je 100% hoch und breit sein.

Probleme koennte es geben, wenn der Inhalt groesser
wird als das Browserfenster.
Dagegen koennte man noch mit overflow-Angaben ankaempfen.
Das alles ist mir aber viel zu umstaendlich, ich
benutze solche Dinge nie.

Die zahlreichen Attribute in den Tabellen koenntest Du
uebrigens auch mit CSS ersetzen.
Und die Breite 800 ist doppelt problematisch:
1. Bei Bildschirmaufloesung 800 ist der Inhalt des
   Browserfensters nur ca. 760 px breit.
2. Beim Ausdrucken koennten Inhalte abgeschnitten werden.

Also wuerde ich, wenn schon, die Breitenangabe
auf 760px reduzieren, und sie nur in einem
CSS-Bereich bzw. in einem externen CSS definieren,
das nur fuer die Bildschirmansicht verwendet wird.

Fixe Breiten in px finde ich allerdings doof;
max-width finde ich viel sinnvoller, und es gibt
ja mittlerweile auch einige Workarounds fuer den
MS IE, der max-width auch in 6.0 noch nicht kennt.

ist denn height bei css dann eine mögliche angabe für tabellen?

Ja, klar.
Eine Tabelle ist ein Block-Level-Element und somit eine Box
mit margin, border, padding, width, height u.s.w.

Gruesse,

Thomas

[KD-one]

Hallo Thomas,

Hallo,

Zusatz für den IE:

1. table { margin-left:auto; margin-right:auto;text-align:center; }

Hast Du das ausprobiert? Richtet
table { text-align:center; }
im MS IE wirklich die Tabelle selbst aus?
Wuerde mich erstaunen.

Bisher dachte ich, das text-align:center sei beim
die Tabelle _umgebenden_ Element notwendig fuer die
alten MS IE und den MS IE 6.0 im Quirks Modus.

Sorry, ja natürlich, du hast recht.
War ein Irrtum von mir.

Da der IE auch in der neuesten Version zu blöd ist, die Formatierung per margin umzusetzen.

Pass auf, was Du sagst!
Ich wurde hier schon arg beschimpft, weil ich das gleiche behauptete. ;-)

Naja,_damit_ könnte ich gut leben. ;-)
Nachdem ich jahrelang immer den IE genutzt habe und erst vor nicht allzulanger Zeit wirklich brauchbare Alternativen aufgekommen sind, bin ich draufgekommen, daß der IE lediglich ein Instrument der Marktmanipulation ist und bei weitem nicht das bringt, was er verspricht, mal abgesehen von den Bugs und Crashes, die ich indirekt dem IE bereits zu verdanken hatte.

Offenbar kann MS IE 6.0 die "margin-Ausrichtung" endlich, aber _nur_,
wenn er im Standards-Compliant Modus ist (Stichwort Doctype Switch).
Steht zumindest hier:
http://www.netandmore.de/faq/fom-serve/cache/1239.html
und wurde mir damals an den Kopf geworfen...

Kann sein, ist für mich aber nicht relevant, da er das imho auch im Quirksmodus zu können hat.
Wo kämen wir denn da hin...

Der XML-Prolog <?xml ...> reicht bekanntlich aus, um ihn
wieder in den Quirks Modus zu schicken...

Wat'n dat? ;-)

Gruß

Kurt

[Thomas Luethi]

Hallo,

Kann sein, ist für mich aber nicht relevant, da er das imho auch im Quirksmodus zu können hat.

Genau, finde ich auch. ;-)

Der XML-Prolog <?xml ...> reicht bekanntlich aus, um ihn
wieder in den Quirks Modus zu schicken...
Wat'n dat? ;-)

Bei XHTML-1.0-Seiten kann man, wenn man will (fakultativ!),
als allererste Zeile folgendes schreiben:
<?xml version="1.0" encoding="UTF-8"?>
(Die Encoding-Angabe kann auch anders aussehen, je nachdem,
was Du halt verwendest.)
Der MS IE 6.0 geht aber nur in den Standards Compliant Modus,
wenn die erste Zeile bereits die DOCTYPE-Angabe ist, also sowas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://selfhtml.teamone.de/html/xhtml/unterschiede.htm#xml_deklaration
http://gutfeldt.ch/matthias/articles/doctypeswitch.html

Gruesse,

Thomas

[KD-one]

Hallo Thomas,

XML ist etwas, wovon ich mich möglichst weit fern halte, insofern für mich nur am Rande interessant. :o)
Deshalb auch der Zwinkersmiley. ;-)

Gruß

Kurt

[frankxberlin]

Hallo Kurt,

Nachdem ich jahrelang immer den IE genutzt habe und erst vor nicht allzulanger Zeit wirklich brauchbare Alternativen aufgekommen sind,

--- welche Alternativen wären denn das? Opera? Netscape? auch wenn ich kein Freund von MS bin, nutze ich den IE ganz pragmatisch als den Browser, der mir das selbe bietet wie Opera oder Netscape. Netscape die neuste Version kann m.E. (oder IMHO oder imho) dat selbe, Opera versagte bei mir schon hin und wieder und steht deshalb nicht mehr zur Diskussion...; gibts denn noch andere???

dank und gruß,

frank

[KD-one]

Hallo frankxberlin,

Nachdem ich jahrelang immer den IE genutzt habe und erst vor nicht allzulanger Zeit wirklich brauchbare Alternativen aufgekommen sind,

--- welche Alternativen wären denn das? Opera? Netscape? auch wenn ich kein Freund von MS bin, nutze ich den IE ganz pragmatisch als den Browser, der mir das selbe bietet wie Opera oder Netscape. Netscape die neuste Version kann m.E. (oder IMHO oder imho) dat selbe, Opera versagte bei mir schon hin und wieder und steht deshalb nicht mehr zur Diskussion...; gibts denn noch andere???

Nunja, ich nutze den Firebird 0.7, geiles Teil. Der kann z.T. schon CSS 3 und ist bei der Umsetzung des derzeitígen Standards auch wesentlich korrekter.
http://www.mozilla.org/products/firebird/
Da wäre dann noch der Mozilla1.5 zu erwähnen, welcher dem Firebird sehr ähnlich ist(Kunststück).
http://mozilla.kairo.at/
Imho ist aber auch der Opera in seiner aktuellen Version (7.22) dem Ie bei weitem überlegen, wenn er auch manchmal eine Sonderbehandlung verlangt.
http://www.opera.com/

Gruß

Kurt

[wahsaga]

hi,

Imho ist aber auch der Opera in seiner aktuellen Version (7.22) dem Ie bei weitem überlegen

"offizielle" aktuelle version vom opera ist 7.23, mit der eine ernstere sicherheitslücke gefixt wurde, 7.22 und 7er-versionen darunter sind also nicht mehr zu empfehlen.

darüber hinaus gibt es schon eine beta-version 7.50, die aber vor allem änderungen beim mailclient bringen soll.

gruss,
wahsaga

[KD-one]

Hallo wahsaga,

"offizielle" aktuelle version vom opera ist 7.23, mit der eine ernstere sicherheitslücke gefixt wurde, 7.22 und 7er-versionen darunter sind also nicht mehr zu empfehlen.

Ja, stimmt, allerdings gibt es die 7.23 noch nüscht in Deutsch. ;-)

darüber hinaus gibt es schon eine beta-version 7.50, die aber vor allem änderungen beim mailclient bringen soll.

Naja, mit betas hab ich`s nicht so, da hab ich schon mal kräftig draufgezahlt.

Gruß

Kurt

[Prebyter]

Oh, jaklar :)

ich muss jetzt noch mal nachstochern, ...

warum geht es wenn ich direkt in die table schreibe und nur über css nicht? ( table ... align="center".. )
Auch eine Grafisch gestaltete Oberfläche habe ich, doch wenn ich in diese align schreib, geht es auch nicht, das bringt mich einwenig durcheinander.
Danke für Tips, das mit dem margin hat gut funktioniert!

Arik

[Thomas Luethi]

Hallo,

warum geht es wenn ich direkt in die table schreibe und nur über css nicht? ( table ... align="center".. )

Du meinst <table align="center">
Das ist ("veraltetes") HTML und nicht CSS.
In den Zeiten _vor_ HTML 4 und CSS, also in HTML 3.2,
war das der einzige Weg, um Tabellen zu zentrieren.
Und die Browser verstehen ihn bis heute.

Auch eine Grafisch gestaltete Oberfläche habe ich, doch wenn ich in diese align schreib, geht es auch nicht, das bringt mich einwenig durcheinander.

Was, bitte, meinst Du mit "grafisch gestaltete Oberflaeche"?
In HTML gibt es Elemente. Diese haben manchmal Attribute.
Mit CSS kann man das Aussehen von Elementen gestalten.
Einige ("veraltete") Attribute haben auch Einfluss auf
das Aussehen und die Positionierung der Elemente.

Damit wir uns besser verstehen, lies bitte mal:
Vokabular und Syntax von HTML und CSS:
http://www.jendryschik.de/wsdev/einfuehrung/xhtml/syntax.html
http://www.jendryschik.de/wsdev/einfuehrung/css/syntax.html

Gruesse,

Thomas