Vinzenz Mai: Tabelle mit Checkboxen (Groovy (GSP) + HTML)

Beitrag lesen

SELF-Forum

Tabelle mit Checkboxen (Groovy (GSP) + HTML)

Vinzenz Mai
– Informationen zu den Bewertungsregeln

Hallo,

ich hoffe, ich bin hier im richtigen Forum.

wir haben nur eines :-)

Ich habe eine GSP Seite, auf der ich HTML-Code ausgebe. Zur Zeit möchte ich eine Tabelle ausgeben, die 1 Zeile und 3 Spalten hat.

dazu komme ich später nochmal.

In jeder Spalte sollen dabei Checkboxes untereinander ausgegeben werden. Mein Problem: Das ganze "verrutscht" etwas, sie fangen nicht alle "oben" an, sondern werden mittig ausgegeben, was etwas seltsam aussieht.

Hier mein Code und ein Bild, wie das ganze aussieht. Wäre nett, wenn jemand einen Tipp hätte. :-)Screenshot

wie könntest Du Dein Darstellungsproblem beheben?

a) indem Du sinnvolles HTML erzeugen läßt und die Darstellung mit http://de.selfhtml.org/css/index.htm@title=CSS vornimmst.

Eine Tabelle mit nur einer Zeile ist oft nicht sinnvoll. Selbst bei Deinem Beispiel sollte man - wenn man schon Tabellen nimmt - mindestens zwei Zeilen verwenden:

  1. eine Beschriftungszeile für die Bereiche (td-Elemente)
  2. eine Zeile für die Checkboxen (td-Elemente)

Deine Checkboxen bekommst Du mit der CSS-Eigenschaft [ref:self812;css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align]: top; wie gewünscht ausgerichtet.

Richtig eingesetzt wäre eine Tabelle jedoch erst dann, wenn Du für jede Checkboxzeile - richtig Zeile - eine eigene Zeile nimmst. Nachteil:

  • Du musst vorher prüfen, wieviele Zeilen Du benötigst
  • Dein serverseitiger Code wird komplexer

Alternativ könntest Du mit jeweils einem Div-Element je "Spalte" arbeiten, das ein hx-Element für die Bereichsüberschrift und eine Liste der Checkboxen enthält.

Es ginge auch mit verschachtelten Listen: eine äußere, deren Elemente die "Spalten" enthält. Jedes Listenelement enthält wieder eine Liste mit zwei Listenelementen: das erste für die Bereichsüberschrift, das zweite für die Liste der Checkboxen. [1]

b) die einfache Notlösung:
Gib einfach Deinen Tabellenzellen vertical-align: top;

Grundsätzlich empfehle ich Dir, aus Deinem HTML alle veralteten Attribute, die sich auf die Darstellung beziehen, zu entfernen. Das gilt auch für Deine "Leerspalte". Welchen Sinn hat diese? Verschlanke Dein HTML, verlagere die Darstellung ins CSS. Du wirst einfacheren und leichter wartbaren Code erhalten.

Freundliche Grüße

Vinzenz

[1] genau deswegen bevorzugte ich div-Elemente oder sogar die Tabelle.

Beitrag melden
–
Informationen zu den Bewertungsregeln