• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ausrichtung innerhalb einer Tabelle (generiertes HTML)

B

Beren77

Neues Mitglied
Hallo,

ich bastele gerade mit dem GWT (Google Web Toolkit) an einer Web-Anwendung. Dabei tritt immer wieder ein Problem auf, das dazu führt, dass Beschriftungen nicht genau untereinander stehen, sondern versetzt sind. Hier seht ihr an einem Beispiel, was ich meine: http://www.phbouillon.de/test.html

Ich habe mir den generierten HTML-Code angesehen und ihn soweit wie möglich vereinfacht. Im unten stehenden Beispiel seht Ihr den Code für eine Tabelle, die die Eingabefelder für "Name" und "Datenquelle" untereinander darstellen sollte -- tut sie aber nicht.
Könnte ich den HTML-Code von Hand ändern, würde ich einfach zwei Tabellen aus der "Datenquelle"-Tabelle und der Tabelle darunter machen (die für das Problem verantwortlich ist). Ich kann die Struktur des erzeugten HTMLs aber leider nicht verändern.
Gibt es also eine Möglichkeit, die Textfelder für Name und Datenquelle untereinander auszurichten, ohne die darunter liegende Tabelle "abzuspalten"?

HTML: 
<html>
  <body>
    <table cellspacing="4" style="width: 100%; height: 100%;">
      <tr>
        <td>
          <table cellspacing="0" cellpadding="0">
            <tr>
              <td align="left" style="vertical-align: top;">
                <table>
                  <tr>
                    <td width="140px">Name</td>
                    <td width="200px"><input type="text" tabindex="0" style="width: 200px;"/></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td align="left" style="vertical-align: top;">
                <table>
                  <tr>
                    <td width="140px" style="vertical-align: top;"><div style="width: 140px;">Datenquelle</div></td>
                    <td width="200px" style="vertical-align: top;"><input type="text" style="width: 200px;" tabindex="0"/></td>
                  </tr>
                  <!-- Wenn ich den Code ab hier weglasse, ist die Ausrichtung korrekt -->
                  <tr>
                    <td style="vertical-align: top;" colspan="2" rowspan="4">
                      <table cellspacing="0" cellpadding="0">
                        <tr>
                          <td align="left" style="vertical-align: top;">
                            <table cellspacing="0" cellpadding="0">
                              <tr style="vertical-align: middle;">
                                <td><div style="width: 250px;">Ebenen</div></td>
                                <td><div style="width: 250px;">Input</div></td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <!-- Die obere Tabelle (zwischen den Kommentaren) verursacht das Problem. Warum? -->
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
Danke für alle guten Ideen/Tipps! (P.s.: Mir ist klar, dass das kein besonders schöner HTML-Code ist, aber wie gesagt: Ist halt generiert und so weit wie möglich vereinfacht!).

Grüße,
Philipp
 
Beren77 schrieb:
Mir ist klar, dass das kein besonders schöner HTML-Code ist
Zum Vergrößern anklicken....
Die Quittung zahlst Du ja schon.

Tabellen sind als Gestaltungsmittel ungeeignet und falsch.

Was soll das sein? Das Eingabefeld hat auch kein Formular drumrum. Daher weiß ich gerade nicht, ob ich Dir den Link zu barrierefreien Formularen geben soll oder nicht.

Layout macht man auf jeden Fall mit CSS, dann wird vermutlich alles viel einfacher.
 
Wie gesagt: Es ist _generierter_ HTML-Code aus einer Web-Anwendung. Die wesentlichen funktionalen Teile habe ich natürlich weggelassen. Und: Das ist mit Hilfe von css generiert: GWT wandelt es in dem Fall in HTML um.
 
Das Problem sind die 5 ineinander verschachtelten Tabellen. In der Tabelle, die deine beiden unteren Zeilen umfasst, sind die Breitenangaben nicht richtig.

Ein Tool, welches so einen Code generiert, nur für ein Formular, dann aber noch nicht mal ein <form> mit generiert, wäre bei mir sofort wieder in der Tonne gelandet.

5 Tabellen für lächerliche 3 Zeilen?

Hör besser auf, damit herumzuspielen und lerne HTML, damit wirst du deutlich mehr spass haben.
 
Ich kenne GWT nicht, würde mich unter den Umständen aber fragen, ob das das richtige Tool für mich ist.

Mag sein, dass Du den Code nicht selbst geschrieben hast, dadurch wird er aber auch nicht besser.
 
Seufz. Dann schaut Euch doch bitte mal GWT an, bevor ihr Euch wundert, warum so ein Code zu Stande kommt. Das Tool ist richtig (die Anwendung ist nämlich komplex), die Ausgabe auch -- nur in diesem konkreten Fall eben nicht.
Gibt's nicht eine Möglichkeit, die untere Tabelle so zu modifizieren, dass es passt?
 
Ich wundere mich ja nicht, dass so ein Code zustande kommt. Bei Code-Generatoren erwarte ich nichts anderes. Das Ergebnis ist jedenfalls Müll. Wenn Du keine Möglichkeit hast, das zu ändern, tut mir das leid. Man kann zweckentfremdete Dinge nicht immer so verbiegen, dass es trotzdem passt.

Wenn Du Dein Beispiel mal hochlädst, würde ich es mir wahrscheinlich nochmal ansehen. Aber der Code ist mir zuwieder.
 
Beren77 schrieb:
Seufz. Dann schaut Euch doch bitte mal GWT an, bevor ihr Euch wundert, warum so ein Code zu Stande kommt. Das Tool ist richtig (die Anwendung ist nämlich komplex), die Ausgabe auch -- nur in diesem konkreten Fall eben nicht.
Gibt's nicht eine Möglichkeit, die untere Tabelle so zu modifizieren, dass es passt?
Zum Vergrößern anklicken....
Keine Ahnung, ich kenne GWT auch nicht und dein Beispiel ist kein Anreiz für mich, es mal zu testen.

Ob komplexe Anwendung oder nicht, Tabellen sind nicht fürs Layout gedacht und ein <div> in einem <td> welches nichts gruppiert, macht auch keinen Sinn.

Das alles sind Gründe, es nie zu testen und meine Anwendungen weiterhin selber zu schreiben, mit dem guten Notepad2. ;)
 
Muss ich übersehen haben :-)

Das wird sich nicht ausrichten lassen, weil das zwei unterschiedliche Tabellen sind. Die eine Zeile weiß ja gar nicht, wie breit die Zellen der anderen Zeile sind. Hier Tabellen zu verschachteln ist nicht nur überflüssig, sondern hochgradiger Käse. Sorry.

Das einzige, womit das klappen könnte, wäre absolute Positionierung mit genauen Koordinaten.

Wenn es sich wenigstens um nur eine Tabelle handeln würde, dann wäre die Beziehung zwischen den einzelnen Zeilen wenigstens da, aber so ist das technisch nicht machbar.

Die Bewertung bleibt die gleiche: Wer zu dem Zweck so einen Code erzeugt, gehört selber in einer TabellenZELLE eingesperrt :-)
 
In zwei Tabellenzellen befindet sich jeweils ein <div> welches die Tabellenzellen auseinanderdrückt.
Code: 
<td><div style="width: [COLOR="DarkRed"][B]250px[/B][/COLOR];">Ebenen</div></td>
<td><div style="width: [COLOR="#8b0000"][B]250px;[/B][/COLOR]">Input</div></td>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben