Probleme mit Zentrierung von Tabellen

[Rolf B]

Hallo Chuaat,

Die Tabelle hat tatsächlich die class tables.

Dieser Satz enthält zwei Fehler.

1. Du verwendest id="tables", statt class="tables". Deswegen ist deine .tables Regel im css unwirksam. Die Angabe id="tables" matcht man mit #tables, und class="tables" mit .tables.

2. Die Tabelle hat weder id noch class tables, sondern diese id liegt auf einem div drumherum. Ein div ist ein Blockelement und breitet sich, sofern man das nicht beeinflusst, bis zum rechten Rand aus. Deswegen ist ein margin:auto unwirksam: Es gibt keinen freien Platz, den man als margin verteilen könnte.

Also:

• Das <div id="tables"> komplett entfernen. Das scheint mir keine Kunst zu sein, sondern etwas, das bedenkenlos weg kann.
• Das <br> vor der Table kann auch weg. Abstände erstellt man im CSS mit margin.
• Gib dem <table> Element das Attribut class="tables". Darin brauchst Du eigentlich nur margin: 1em auto; (das 1em als Ersatz für das <br>), ggf. kannst Du noch eine width setzen, aber die bitte nicht in px, sondern in em oder ch. 1em ist der aktuelle font-size Wert (was der Höhe der Schrift entspricht), 1ch ist die Breite der Ziffer 0 im aktuellen Font. Ich würde sagen, mit 40em oder 60ch bist Du gut bedient.

Weitere Hinweise:

• Eigentlich ist class="tables" nicht gut, weil nicht konkret genug. Klassen sollten eine fachliche Beschreibung dessen sein, was von diesem HTML dargestellt wird. In diesem Fall wäre class="hausaufgabenliste" vermutlich die bessere Wahl.

• Dieser Klassenname deutet darauf hin, dass auch <table> eigentlich nicht die richtige Wahl ist. Man könnte auch argumentieren, dass dies eine Liste von Aufgaben ist, und das <dl> Element nutzen. Damit hättest Du relativ einfach die Möglichkeit, per CSS zwischen einer Matrixdarstellung (2 Spalten) und einer Listendarstellung (Datum links, die Aufgaben zum Datum eingerückt darunter) umzuschalten.

• Verwende nicht media="(orientation:...)" als Grundsatzfilter für die CSS Links. Dadurch entsteht eine Menge Redundanz in den CSS Dateien, die Du pflegen musst. Die korrekte Lösung ist "Mobile First", d.h. Du machst eine .css Datei, die für Smartphones eine gute Anzeige bringt, und baust dann in diese CSS Datei mit @media Queries Zusätze ein, die Styles hinzufügen oder überschreiben, so dass die Anzeige für breite Geräte (Tablet, ggf. Handy im Querformat, Desktop-PC) verbessert wird. In diesen @media-Queries frage dann aber nicht die Orientierung ab, sondern die width, und zwar in em oder ch. Vorteil ist: wenn jemand einen größeren Font einstellt, schaltet die Seite erst bei einer größeren Breite in den "Breit"-Modus.

• Verwende nicht font-family: arial. Das ist nicht genug. Du möchtest Arial, das ist ok, aber den hat nicht jeder. Du brauchst eine Liste von serifenlosen Fonts, und eine generische Angabe am Schluss, falls alle Fonts auf dem Gerät unbekannt sind. Unser Wiki empfiehlt: font-family: Helvetica, Arial, Geneva, sans-serif;

• Deine Seite kann nicht bedient werden, die Menüpunkte sind nicht erreichbar. Es sei denn, man hat eine Maus oder einen Touchscreen. Eine Tastaturbedienung ist nicht möglich, und ein Screenreader dürfte ebenfalls scheitern. Dropdown-Menüs nur über :hover sind nicht zugänglich, das braucht JavaScript. Unser Wiki enthält ein Tutorial dazu. Ich kann Dich nicht dazu zwingen, und es ist auch ordentlich Arbeit. Wenn deine Nutzergruppe mit :hover klarkommt, würde ich sagen: Investiere die Zeit lieber ins Vokabellernen 😉

Rolf