Verschiebung von Tabellendaten berichtigen

[MelMel3]

Hi, bei einem Kontaktformular hat die zweite Zeile der Tabelle aus irgendeinem Grund verursacht, dass die Daten der ersten Zeile nach rechts verschoben wurden. Weiß einer warum? Ich komme beim besten Willen nicht drauf. Hier erst mal der Code. Ganz unten ein Bild.

<form>
        <fieldset style="border:white">
         
            <table>
                <tr>
                    <td>
            <label><p class="schiebe">Anrede<img id="schiebestern" src=sternchen.png></p>
           
            <select id="anrede">
                <option>Herr</option>
                <option>Frau</option>
            </select>
        </label>
    </td>

      <td>
            <label><p class="schiebe">Vorname<img id="schiebestern" src=sternchen.png></p>
                <input id="vorname" type="text" placeholder="Vorname" >
            </label>
        </td>

        <td>
            <label><p class="schiebe">Nachname<img id="schiebestern" src=sternchen.png></p>
            <input id=nachname type="text" placeholder="Nachname">
        </label>
        </td>
        </tr>
       
        <tr>
            <td>
                <label> <p class="schiebe">Straße/Nr.<img id="schiebestern" src=sternchen.png></p>
                    <input id="straße" type="text" placeholder="Straße/Nr">
                    <label>
            </td>
        </tr>
        </table>
        </fieldset>
    </form>

.schiebe{
    color:rgb(94, 94, 94);
    font-size:small;
    line-height:  2em;
    margin-bottom:-3px;
}

#anrede{
    width: 150px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
}

#vorname{
    width: 300px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
}

#nachname{
    width: 300px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
   
}

#straße{
    width: 750px;
    height: 30px;
    color:rgb(94, 94, 94);
    font-family:Arial, Helvetica, sans-serif;
   
}

Viele Grüße :)

 

[Gelöschtes Mitglied 36401]

Crossposting Siehe https://www.html-forum.de/threads/10524/

 

[MelMel3]

Crossposting Siehe https://www.html-forum.de/threads/10524/

Ja, ist das verwerflich? Was spricht dagegen, mehrere Foren auszutesten?

 

[Gelöschtes Mitglied 36401]

Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.

 

[MelMel3]

Okay ja, ich verstehe deinen Punkt, aber hier geht es doch um verschiedene Themen. Im ersten Post war meine Frage, wie man Eingabefelder nebeneinander anreiht, das Problem hat sich mittlerweile durch die Verwendung von einer Tabelle lösen lassen. In diesem Post geht es doch aber darum, dass sich ein Element der Tabelle aus mir unbekannten Gründen verschoben hat und wie man das beheben kann. Ich sehe deutlich, dass ich es nächstes Mal besser formulieren muss. Dass das Crossposting ist, war mir wirklich nicht bewusst.

 

[Gelöschtes Mitglied 36401]

das Problem hat sich mittlerweile durch die Verwendung von einer Tabelle lösen lassen.

Und das ist der völlig falsche Ansatz, denn du hast keine tabellarischen Daten, die du darstellen willst.

 

[MrMurphy]

Wie m.scatello bereits schrieb ist die Verwendung des table-Elements bei Formularen nach den HTML-Regel verkehrt und damit sachlich falsch. Spätestens wenn du dein Formular an unterschiedliche Bildschirmbreiten anpassen willst hast du komplett verloren.

Weiß einer warum?

Ja. Dazu solltest du per CSS die Zellrahmen der td-Elemente einblenden.

Bei einer Tabelle sind alle Spalten gleich breit. Auch wenn du in der zweiten Zeile nur eine Tabellenzelle einträgst, gilt die nur für die erste Spalte. Damit wird auch die direkt darüber liegende Tabellenzelle auf die gleiche Breite gebracht. Die breiteste Zelle bestimmt die Breite der gesamten Spalte. Damit werden die beiden daneben liegenden Zellen entsprechend nach rechts verschoben.

Das ist das normale Tabellenverhalten. Daran können auch deine Breitenangaben nichts ändern.

 

[MelMel3]

Verwendung des table-Elements bei Formularen nach den HTML-Regel verkehrt und damit sachlich falsch.

Hat mein Lehrer auch gesagt, nach dem ich es anders nicht geschafft habe, ist mir der table-Tag eingefallen. Du hast aber völlig recht, danke für die Erklärung. Was wäre denn deiner Meinung nach eine bessere Methode? Mit div hat es auch nicht funktioniert.

 

[jonas3344]

Auch wenns funktioniert, das HTML ist allerdings nicht valide. ;)

Ein label-Element kann kein div-Element als Child haben.

 

[MelMel3]

Okay, vielen Dank für eure Hilfe : )