Tabelle mit Checkboxen (Groovy (GSP) + HTML)

[manost]

Hallo zusammen,

ich hoffe, ich bin hier im richtigen Forum. 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. 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. Leider fällt mir dazu keine Lösung ein.

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

 <g:form action="startSimu" controller="lpicSimulator">  
  
        <table border="1">  
          <tr>  
  
            <td>  
          <g:if test="${questionsList101 != null && !questionsList101.isEmpty()}">  Bereich 101:<br/>  
            <g:each in="${questionsList101}" var="elem" status="i">  
              <g:checkBox name="eins" value="${questionsList101[i].id}" checked="false"/>${i+1}<br/>  
            </g:each>  
            <br/>  
          </g:if>  
        </td>  
<td>&nbsp;</td>  
  
<td>  
      <g:if test="${questionsList102 != null && !questionsList102.isEmpty()}">  
        Bereich 102:<br/>  
        <g:each in="${questionsList102}" var="elem" status="i">  
          <g:checkBox name="zwei" value="${questionsList102[i].id}" checked="false"/>${i+1}<br/>  
        </g:each>  
        <br/>  
      </g:if>  
    </td>  
<td></td  
  

><td>  

  <g:if test="${questionsList103 != null && !questionsList103.isEmpty()}">  
    Bereich 103:<br/>  
    <g:each in="${questionsList103}" var="elem" status="i">  
      <g:checkBox name="drei" value="${questionsList103[i].id}" checked="false"/>${i+1}<br/>  
    </g:each>  
    <br/>  
  </g:if>  
  
</td></tr></table>

[Jens Holzkämper]

Tach,

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

du hast ein Darstellungsproblem, das hat dann mit GSP nichts mehr zu tun, sondern liegt am Standard-CSS der Browser, du möchtest dir vermutlich mal die Vertical-Align-Eigenschaft deiner Tabellenzellen ansehen.

mfg
Woodfighter

[manost]

wunderbar, darauf wäre ich alleine nie gekommen! :-) Vielen Dank für die schnelle Hilfe!

[Vinzenz Mai]

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. :-)

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.

[manost]

Hallo,

herzlichen Dank für deine ausführliche Antwort. "vertical-align: top" ist genau die Lösung, die ich gesucht habe. Das mit den mehreren Zellen (für Überschriften und Textboxen) werde ich auch noch umsetzen! Die Leerspalte habe ich genommen, um die Abstände zu vergrößern - hast Recht, mit CSS geht das besser! Das Projekt, das ich gerade mache, ist nur privat und muss deshalb nicht perfekt sein, aber ich danke dir dennoch für deine Tipps! :-)

Viele grüße,
manost

[Gunnar Bittersmann]

@@Vinzenz Mai:

nuqneH

Alternativ könntest Du mit jeweils einem Div-Element je "Spalte" arbeiten

Dass man nicht Tabellen zum Layouten missbrauchen sollte, ist klar. Es muss aber nicht 'div' sein (lies: sollte nicht), wenn es Passenderes gibt: 'fieldset' bspw.

Qapla'