tabellen zentrieren in css

kith

unfuck me!
Teammitglied
also keine richtige programmierfrage aber naja...

ich moechte mittels css eine tabelle zentrieren. sprich was man frueher mit:
Code:
<center><table></table></center>
gemacht hat, mit css machen. so wie das oben steht krieg ich das bei xhtml 1.0 strict nicht durch den validator. also hab ich versucht sowas wie:
Code:
<p style="text-align:center"><table></table></p>
zu bauen. das geht auch problemlos durch den validator, allerdings, wird die tabelle dann unter firefox (und opera) nicht in der mitte dargestellt (unter IE kein problem... aber das muss ja nichts heissen). hat jemand ideen?
 
versuch mal <table align="center"> , oder sowas wie <table style="position: absolute; text-align:center">
habs nicht getestet!
 
Erstens benutzt man in CSS nur Tabellen, wenn wirklich Tabellen
benötigt werden (Tabellarische Aufstellung). Ansonsten versuchs
mal mit

Code:
<table style="margin: 0 auto;"></table>

Text-align ist nur für den Text innerhalb der Tabelle.

Aber eben. Wenn es keine Tabellarische Darstellung ist, wie z.B

Code:
Name        | Adressse      |
------------+---------------+
blabla      |               |

sondern nur zur Darstellung dient, dann gestaltest Du sowieso nicht
nach Webstandards. Tabellen sollten nie für die Darstellung missbraucht
werden, sondern ausschliesslich um Daten in tabellarischer
Darstellung anzuzeigen.

Ansonsten nimmt man <div> oder <p> oder was auch immer.

Und align: center ist soweit ich weiss nicht mehr zulässig. Auch mit
absoluten Postitionen solltest Du nicht anfangen, wenn Du sie nicht
unbedingt benötigst.

Gruss, Flo
 
Zuletzt bearbeitet:
flomul schrieb:
Erstens benutzt man in CSS nur Tabellen, wenn wirklich Tabellen
benötigt werden (Tabellarische Aufstellung).
[...]
Wenn es keine Tabellarische Darstellung ist, wie z.B
[...]
sondern nur zur Darstellung dient, dann gestaltest Du sowieso nicht
nach Webstandards. Tabellen sollten nie für die Darstellung missbraucht
werden, sondern ausschliesslich um Daten in tabellarischer
Darstellung anzuzeigen.
barrierefreies webdesign sucks... hat afaik auch nichts mit webstandards zu tun, sondern ist nur ein erwünschter stil! wieso sollte man denn tabellen auch nicht zur anordnung irgendwelcher darstellungselemte "missbrauchen"?
Das Verwenden von Tabellen zu Layout-Zwecken birgt für den Screen-Reader-Nutzer Tücken, von denen viele Webgestalter nicht einmal etwas ahnen. Bedenken Sie, dass Blinde immer nur eine einzige Tabellenzelle erfassen können. Eine sinnvolle und systematische Anordnung der Zelleninhalte erleichtert das Lesen erheblich. Tabellen jeder Art, ob sie eine tabellarische Darstellung enthalten oder als unsichtbare Tabellen für das Layout von Text eingesetzt werden, können dann am Besten gelesen werden, wenn die Tabellenzellen Zeile für Zeile von links nach rechts gelesen werden können und immer noch einen Sinn ergeben.
hhmm... toll, nur damit blinde meine seite "lesen" können muss ich (zur anordnung von darstellungselementen) auf tabellen verzichten? hhmm...
 
Zuletzt bearbeitet:
ich denke, die verwendung von tabellen als "schlechten html-stil" zu deklarieren (bezüglich design) kann nicht der richtige weg sein. es ist nunmal ein defaktostandard. vorallem werden den tabellen soviel attribute mitgegeben (zum ausrichten, rand, etc.), dass sich die beim w3c ja schon praktisch selber widersprechen. tabellen sind dadurch einfach prädestiniert zum plazieren von elementen.
ich würde vielmehr dafür plädieren, einen neuen tag einzuführen, der lesbaren text von den restlichen tabellen abgrenzt.
design spielt nunmal eine wichtige rolle im internet. und sich mit "div" und "p" etwas gutaussehendes in annehmbarer zeit zu basteln (sofern es überhaupt geht) ist schon sehr optimistisch. klar, es geht bestimmt, aber tabellen sind einfach überschaubarer, man sieht auf den ersten blick woran man ist.
wie gesagt, lieber neue tags, vielleicht auch einen extra tag für reine text-tabellen. so würde ich es um einiges einfacher finden.

gruß, phlug
 
Zuletzt bearbeitet:
das sich theorie und praxis doch betraechtlich unterscheiden koennen, ist eine lektion die hart erarbeitet werden will und immerwieder neu erlernt werden muss... ;)
 
Also... Ich hab da selbst erst kürzlich Erfahrungen mit gemacht, als ich das Design von http://trashcan.dangerouscat.net/ umgestellt habe...
Zuerst hatte ich es ganz normal mit Tabellen erstellt und dann in zwei Stunden fast alle Designtabellen durch <div>s ersetzt...
Was allerdings nicht geklappt hat war, den eigentlichen Content-Teil (wo das Directory Listing drin angezeigt wird) auf <div>s umzustellen, weil die Browser derzeit noch nicht das automatische vergrössern beider Absätze unterstützt.

Wenn man weiss, welcher der Absätze später der grössere ist kann man mit Perversitäten wie Hintergrundbild fürs Parent-Tag und so arbeiten, aber ersten ist das eine müllige Lösung und zweitens weiss ich ja auch nicht, ob ein Verzeichnis jetzt mehr Unterverzeichnisse oder mehr Dateien enthält, von daher...


Was die Tabellen angeht:
Es gibt zwei Dinge, die Tabellen für Designs UNSCHÖN (aber nicht unbrauchbar) machen:

1.: Man kann mit einer Tabelle sehr schnell die Leserichtung durcheinanderbringen:
HTML:
<table>
  <tr>
    <td valign="top" id="A">nav teil 1</td>
    <td rowspan="2" id="B">content</td>
  </tr>
  <tr>
    <td valign="bottom" id="C">nav teil 2</td>
  </tr>
</table>
Wenn man die Navigationsteile A und C optisch gleich formatiert und beide auf einer Bildschirmseite sind wird der Benutzer eines normalen Browsers höchstwahrscheinlich in der Reihenfolge A-C-B lesen. Ein Browser für Blinde wird allerdings exakt die Reihenfolge nehmen, in der der Text in der Datei steht, also A-B-C. Der Content wird also inmitten der Navigation vorgelesen.

2.: Bevor eine Tabelle am Bildschirm angezeigt werden kann muss sie erstmal inklusive aller enthaltenen Daten geladen werden, wohingegen ein äquvalentes Design aus Absätzen Stück für Stück aufgebaut wird, wann immer einer der Absätze geladen ist.
 
Das Problem liegt auf zwei Ebenen:
1) Designvorgaben von Kunden. Diese muessen sich von anderen Sites abheben und schoen sein. Moeglichst alle Elemente auf einer Seite usw.
2) Es soll dann moeglichst noch alles Barrierefrei sein.
3) Es darf dann dafuer nur eine System gegen, denn es zweites, parallellaufendes System wuerde diskriminieren.
Alles schoen und gut, aber wer zahlt das? Nur weil es einige Institutionen gibt, die Gleichheit einfordern, die defakto nicht vorhanden ist? Wenn man Barrierefreiheit wirklich so durchziehen wuerde, wie es per Definition und Gesetzt vorgeschrieben ist, entsteht ein Ungleichgewicht zu Ungunsten von Standardusern.
Bitte nicht falsch verstehen, das INTERnet sollte fuer jeden zugaenglich sein, das ist gut und sinnvoll, aber der Fernseher ist es auch nicht und WCs fuer Rollstuhlfahrer duerfen auch extra gebaut werden und Rampen auch NEBEN Teeppen. Desweiteren verstehe ich nicht, warum Developer Ihren Code aendern muessen, statt dass die Ausgabegeraete angepasst werden.
Tabellen sind ein sinnvoller und schneller Weg Seiten zu formatieren und designtechnisch zu bearbeiten. CSS als Ergaenzung ist auch fantastisch, aber wie "phlug" schon geschrieben hat: verteufeln bitte nicht. Nur weil einige Damen und Herren von WAI und W3C neue Standards definieren, muessen wir nun alles umstellen, da sind dann auch die Politiker und Gutmenschen schnell dabei Gesetzte zu erlassen. Dabei schafft es die Politik noch nicht einmal Autos mit Partikelfilter vorzuschreiben, da ist die Lobby stark genug.
Es gibt wieder einmal kein Mass, wie so ueblich. Wenn man mit Contentmanagment-System arbeitet, wird es pervers nur mit DIVs zu arbeiten. Zwar wird der Code des ausgegebenen HTMLs kuerzer, aber dafuer explodiert der css Code exorbitant. Die Wartung ist dann fast nicht mehr moeglich. Erst recht nicht, wenn man dann noch Druckversionen, Schriftvergroesserungen und Sonder-CSSe hat.
 
kith schrieb:
also keine richtige programmierfrage aber naja...

ich moechte mittels css eine tabelle zentrieren. sprich was man frueher mit:
Code:
<center><table></table></center>

Es ist ganz einfach. Du *musst* den richtigen Doctype angeben, sonst spielt der Internet-Explodier nicht mit.
Dann einfach

<table style="margin:auto;">Trallalla und Hoppsassa...


CU

Martin
Bekennender CSS-Nazi
 
Ich finde Zentrierung alleine mit CSS ist schon eine Kunst für sich, zumindest, wenn man es das erste Mal macht ;)

Aber guck dir mal diese Seite an: http://www.connis-welt.de

Hab' ich gemacht, bitte keine Kommentare zu Inhalt oder Aussehen :) Die Zentrierung funktioniert aber in Firefox und im Explorer gleichermaßen gut. Kannst den Quellcode und die css-Datei gerne verwenden. Also, wenn dir das überhaupt weiterhilft. Alles was da im Container eingetragen ist, wird zentriert und bekommt nen Rand links und rechts in Prozentangabe. Vielleicht hilft's ja... Hast ja schließlich was von Tabellen gemurmelt :)

PS: Wenn die Syntax ein bisschen bearbeitet wird, müsste die Seite auch xhtml konform sein...
 
Zurück
Oben