Tabellenbreite und -höhe bei CSS

[Gernot Back]

Hallo nichtwissend,

"einzeilige" und/oder einspaltige "Tabellen" kann es eigentlich gar nicht geben, denn was sollte eine "Tabelle" mit nur einer Spalte oder Zeile denn anderes sein als eine Aufzählung? Dafür ist also dann das UL-Element strukturell viel besser geeignet:

Die Aufzählungpunkte kann man ja mit CSS auch unterdrücken.
http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_type

Abstände lassen sich mit Padding und Margin regeln.
http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding
http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin

Nebeneinander bekommst du die LI-Elemente, indem du sie floaten lässt.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

Die Schrift kannst du dann vertikal mittig ausrichten, indem du die Line-Height beim LI-Element auf denselben Wert wie die Height setzt.
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height

Eine prozentual gleiche Breite erhalten die LI-Elemente bezogen auf die Weite des Elternelements, also des UL-Elements, das seinerseits 100% des BODY-Elements einnimmt, welches wiederum 100% des HTML-Elements einnehmen kann, wenn deren Margin und Padding jeweils auf "0" stehen.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width

Bei nebeneinander floatenden Elementen mit prozentualer Breite kann es aber zu Rundungsfehlern kommen, wodurch wenn mehr LI-Elemente in der Breite auf- als abgerundet werden das letzte gar nicht mer genug Platz hat und in eine andere Zeile umbricht.

Es empfiehlt sich daher, das letzte LI-Element nach rechts floaten und die übrigen nach links und dem nach rachts floatenden einen großzügigen negativen Margin nach links und zwar in Pixeln entsprechend der Anzahl der LI-Elemente insgesamt zu geben, sodass es sich ggf über seinen Nachbarn zur linken schieben kann.

Natürlich kannst du deinen UL-, LI und sonstigen Elementen auch die Display-Eigenschaften einer Tabelle, Tabellenzeile oder -zelle geben, die versteht aber der IE nicht.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Sollte es sich bei dem, was du darstellen willst, aber doch um eine Tabelle handeln, was der Fall ist, wenn sie tabellarische Daten enthält und zumindest potenziell mehr als nur eine Zeile und Spalte, dann nimm eine Tabelle!

Ich bin Anfänger in HTML und mit CSS befasse ich mich erst seit 2 Tagen.

Ich hoffe ich habe mein Problem verständlich herüber gebracht.

Es ist schön, auf einen Anfänger zu stoßen, der es gleich richtig machen will, d.h. Tabellen nicht zur grafischen Gestaltung missbrauchen will.

Ich hoffe du kommst jetzt ein Stück weiter. Wenn es irgendwo hakt, oder ich mich zu fachchinesisch ausgedrückt habe, frage gerne wieder nach!

Gruß Gernot