tabellenliebhaber: Als Tabellen noch nicht verpönt waren...

...war vieles so viel einfacher!
Habe meine Probleme damit, das nachstehende Formular, was mit einer Tabelle sehr leicht in Form zu bringen war, ohne eben diese zweckentfremdende Nutzung des table tags und den Grundsätzen moderner und ordentlicher (X)HTML-Nutzung entsprechend wieder in die gleiche Form zu bringen:

<table border="1">  
<tr><td colspan="7" align="center">Ablageboxen</td></tr>  
<tr>  
    <td>Boxnummer</td>  
    <th>1</th>  
    <th>2</th>  
    <th>3</th>  
	<th>4</th>  
    <th>5</th>  
    <th>6</th>  
  </tr>  
  <tr>  
    <td>Maximale Teileanzahl</td>  
    <td><input name="box[0][teileanzahl]" type="text" size="5" maxlength="5" /></td>  
    <td><input name="box[1][teileanzahl]" type="text" size="5" maxlength="5" /></td>  
    <td><input name="box[2][teileanzahl]" type="text" size="5" maxlength="5" /></td>  
    <td><input name="box[3][teileanzahl]" type="text" size="5" maxlength="5" /></td>  
    <td><input name="box[4][teileanzahl]" type="text" size="5" maxlength="5" /></td>  
    <td><input name="box[5][teileanzahl]" type="text" size="5" maxlength="5" /></td>  
  </tr>  
  <tr>  
    <td>Farbe</td>  
    <td><select name="box[0][farbe]" size="1"><option>Rot</option><option>Blau</option></select></td>  
    <td><select name="box[1][farbe]" size="1"><option>Rot</option><option>Blau</option></select></td>  
    <td><select name="box[2][farbe]" size="1"><option>Rot</option><option>Blau</option></select></td>  
    <td><select name="box[3][farbe]" size="1"><option>Rot</option><option>Blau</option></select></td>  
    <td><select name="box[4][farbe]" size="1"><option>Rot</option><option>Blau</option></select></td>  
    <td><select name="box[5][farbe]" size="1"><option>Rot</option><option>Blau</option></select></td>  
  </tr>  
<tr>  
<th>Abesenden</th><td colspan="6"><input name="submit" type="submit" value="Absenden" /></td></tr>  
<tr>  
<th>Felder Löschen</th><td colspan="6"><input type="reset" value="Felder löschen" /></td></tr>  
</table>

Viele Grüße
Lars

  1. Hallo,

    Habe meine Probleme damit, das nachstehende Formular, was mit einer Tabelle sehr leicht in Form zu bringen war, ohne eben diese zweckentfremdende Nutzung des table tags und den Grundsätzen moderner und ordentlicher (X)HTML-Nutzung entsprechend wieder in die gleiche Form zu bringen

    aber warum? Die Struktur, die mit dieser Tabelle abgebildet wird, legt den Schluss nahe, dass hier eine Tabelle genau richtig ist! Ich sehe hier eindeutug tabellarisch strukturierte Daten, wo die Spalten die Ablagefächer darstellen, und die Zeilen der Reihe nach deren Nummer, Teileanzahl und Farbe.
    Wenn *DAS* keine Tabelle ist, was denn dann?

    Nur das hier ...

    <tr><td colspan="7" align="center">Ablageboxen</td></tr>

    ... will nicht so richtig passen. Das ist entweder eine Überschrift, die außerhalb der Tabelle plaziert wird, oder ein caption-Element innerhalb der Tabelle.
    Und auch die Submit- und Reset-Buttons würde ich aus der Tabelle rausnehmen.

    So long,
     Martin

    --
    Mit einem freundlichen Wort und einer Waffe erreicht man mehr, als mit einem freundlichen Wort allein.
      (Al Capone, amerikanische Gangsterlegende)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. @@Der Martin:

      nuqneH

      Das ist entweder eine Überschrift, die außerhalb der Tabelle plaziert wird, oder ein caption-Element innerhalb der Tabelle.

      Oder 'http://de.selfhtml.org/html/formulare/strukturieren.htm#gruppieren@title=legend' des 'fieldset'.

      Qapla'

      --
      Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
      1. Ihr habt mich überzeugt!
        Vielen Dank für die Korrekturen an meiner Tabelle!

        Viele Grüße
        Lars

  2. @@tabellenliebhaber:

    nuqneH

    ohne eben diese zweckentfremdende Nutzung des table tags

    Zweckentfremdet? Wie Cheatah sagte: für tabellarische Daten „ist alles andere als eine Tabelle falsch.“

    Aber schaun wir mal:

    <table border="1">

    @border weg, Gestaltung mit CSS.

    <tr><td colspan="7" align="center">Ablageboxen</td></tr>

    Das sieht nach einer http://de.selfhtml.org/html/tabellen/umgebung.htm#beschriftung@title=Tabellenüberschrift aus.

    <tr>
    <th>Abesenden</th><td colspan="6"><input name="submit" type="submit" value="Absenden" /></td></tr>
    <tr>
    <th>Felder Löschen</th><td colspan="6"><input type="reset" value="Felder löschen" /></td></tr>

    Die Buttons haben in der Tabelle nichts zu suchen. Und übrigens gibt es für Buttons auch http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern@title=passende http://de.selfhtml.org/html/formulare/formularbuttons.htm#modern@title=Elemente.

    Qapla'

    --
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
  3. Hallo,

    Eine Tabelle ist hier, richtig angewandt, nicht fehl am Platze.

    <form >  
      
    <h1>Ablageboxen</h1>  
      
    <table>  
      <tr>  
        <th scope="row">Boxnummer</td>  
        <th scope="col">1</th>  
        <!-- … -->  
      </tr>  
      <tr>  
        <th scope="row">Maximale Teileanzahl</th>  
        <td><input name="box[0][teileanzahl]" type="text" maxlength="5"></td>  
        <!-- … -->  
      </tr>  
      <tr>  
        <th scope="row">Farbe</th>  
        <td><select name="box[0][farbe]"><option>Rot</option><option>Blau</option></select></td>  
        <!-- … -->  
      </tr>  
    </table>  
      
    <p><label for="submit">Absenden</label> <input id="submit" type="submit" value="Absenden"></p>  
      
    <p><label for="reset">Felder löschen</label> <input id="reset" type="reset" value="Felder löschen"></p>  
      
    </form>
    

    Und den Rest machst du <http://de.selfhtml.org/css/eigenschaften/index.htm@title=mit CSS>: http://de.selfhtml.org/css/eigenschaften/schrift.htm@title=Schriftformatierung, http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm@title=Textausrichtung, http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=Breiten, ggf. http://de.selfhtml.org/css/eigenschaften/rahmen.htm@title=Rahmen, (http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=Innen-)http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Abstände.

    Mathias