DruckversionEgal, ob Sie Daten vom Benutzer abfragen oder ihm diese nur zum Lesen präsentieren, ein wenig Überblick hilft ungemein. Schade nur, dass auf vielen Websites so wenig Wert darauf gelegt wird. Lorenz Hölscher zeigt Ihnen eine einfache Technik, die Ihnen hilft, Ihre Daten lesefreundlich zu präsentieren.
Als Beispiel für ein fiktives Formular dient hier die Eingabe von Name und Adresse, wie sie in vielen Anmeldeformularen vorkommt. Dabei geht es nicht um die Datenverarbeitung (die sowieso gar nicht mit reinem HTML möglich ist, sondern immer eine zusätzliche Programmiersprache wie JavaScript oder PHP braucht!), sondern nur um die Darstellung. Das im Beitrag verwandte Beispiel können Sie hier herunterladen (.zip, 3 kB).
Wenigstens Tabellen als Struktur
Tabellen sind (zu Recht) verpönt, wenn damit das Layout einer kompletten Seite zurechtgebastelt werden soll. Für strukturierte Darstellungen sind sie jedoch unverzichtbar. Sie bieten als einziges Element die Möglichkeit, mit automatisch angepasster Breite oder Höhe auf die jeweilige Datenmenge zu reagieren und vor allem damit gleichzeitig die Nachbarelemente zu verändern.
Warum keine Tabellen und was sonst nehmen?
Tabellen blähen den Inhalt im HTML-Code durch sehr viele notwendige Befehle enorm auf und verschleiern oft die eigentliche Struktur der Seite. Zudem fangen dann die eigentlichen Tricksereien erst an, wenn mehrere Zellen spalten- oder zeilenweise zusammengefasst werden. Darin findet sich später niemand mehr zurecht.
Im Beitrag "Websites leichter gestalten" sehen Sie, wie einfach es stattdessen mit dem div-Element geht. Damit wird dann auch die eigentlich geforderte Trennung zwischen Inhalt (in der HTML-Datei) und Format (in der CSS-Datei) wieder eingehalten.
Hier benötigen wir sie, damit die Beschriftung in allen Zeilen gleich breit ist und die Eingabefelder also ordentlich in einer Linie untereinander stehen. Die HTML-Anweisungen sind hier zugunsten der Übersichtlichkeit auf ein Minimum reduziert, sodass der komplette Code zum Erzeugen einer solchen Tabelle mit Eingabefeldern wie folgt aussieht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;charset=windows-1252"> <title>Schönere Formulare</title> </head> <body> <h1>Formular mit Tabelle</h1> <table> <tr><td>Vorname:</td><td><input /></td></tr> <tr><td>Nachname:</td><td><input /></td></tr> <tr><td> </td></tr> <tr><td>PLZ:</td><td><input /></td></tr> <tr><td>Ort:</td><td><input /></td></tr> <tr><td>Straße:</td><td><input /></td></tr> </table> </body> </html>
Die Bedeutung der umgebenden Deklarationen wie <head> oder <body> können Sie ausführlich im Beitrag "Homepage selber bauen: So erstellen Sie schnell und einfach eine Webseite" nachlesen. Ich werde im Folgenden nur noch den Code für die eigentliche Tabelle mit ihren Änderungen zeigen. Die oben gezeigten Anweisungen führen im Browser zu diesem Ergebnis:
Ein erstes Formular mit Tabelle
Das sieht schon ganz brauchbar aus, weil die Tabelle wie versprochen für die korrekte Ausrichtung sorgt. Die Leerzeile zwischen den beiden Bereichen wird nur dann angezeigt, wenn in dieser Zeile auch tatsächlich etwas steht, daher täuscht das nichttrennbare Leerzeichen ( = no-break-space) einen Inhalt vor. Natürlich lässt sich mit ein paar Formatierungsanweisungen auch die Höhe der Zwischenzeile deutlich reduzieren, aber das soll hier nicht das Thema sein.
