Wie kann ich dies in CSS tun, ohne eine Tabelle zu verwenden?
Normalerweise wäre dies mit Tabellen unglaublich einfach, aber jeder sagt, dass Tabellen heute schlecht sind. Die meisten meiner Webformulare werden in etwa so aussehen:
[Label] [Textfeld]
[Label] [Textfeld]
[Label] [Combobox] [Textbox]
Ich möchte nur, dass sich alles perfekt anordnet.
* Bearbeiten: Um zu verdeutlichen, verwende ich keine Tabellen für das Layout meiner Webformulare. Das geschieht mit CSS. Aus einigen Kommentaren scheint jedoch, dass Tabellen für das Anordnen meiner Steuerelemente in Ordnung sind. Ich denke, das könnte die beste Lösung sein ...
4 Antworten
Ich habe nur in FF6 und Chrome getestet, aber hier ist ein Weg, es zu tun.
Beachten Sie, dass das erste Ihr Bild ist. Ja, das ist nicht 100% perfekt und muss getestet und optimiert werden, aber ich wollte Ihnen nur zeigen, dass das Erstellen dieses Layouts mit CSS kein Traum ist.
(Ein Grund) Warum dies besser ist als die Verwendung von Tabellen:
Wenn Sie sich das Markup ansehen, gibt es nichts, was Layout vorschlägt, alles ist semantisch und benutzt Klassen. Wenn Sie eines Tages das Erscheinungsbild des Layouts vollständig ändern möchten, finden Sie alles in Ihrer CSS-Datei. Wenn Sie Tabellen verwenden, müssen Sie in Ihrer HTML-Datei und Ihre CSS-Datei durch viele langweilige <tr> s und <td> s waten, um eine Änderung vorzunehmen. Ebenso, wenn Sie eine kleine Änderung vornehmen möchten, sind Sie nicht durch das Tabellen-Markup eingeschränkt, mit dem sehr schwer zu arbeiten ist.
Die schnelle 'n dirty:
%Vor% %Vor%Es gibt eine Million Möglichkeiten, dieses Layout zu erstellen (und es ist noch kein vollständiges HTML-Fragment, uns fehlen einige erforderliche Attribute) und ich bin mir sicher, dass ich eine bessere Version entwickeln könnte, aber ich werde das lassen als Übung für Sie, während Sie weiterhin CSS lernen.
Sehen Sie sich dieses Tutorial an:
Sie könnten Tabellen für Formulare verwenden, aber ich bevorzuge CSS, weil es wartungsfreundlicher und performanter ist. Streng genommen sollten Tabellen nur für "Tabellendaten" verwendet werden und dies beschreibt nicht genau Formularfelder ...
Nein, Tabellen sind immer noch nicht für das Layout, nur weil es ein Formular ist. Ihre Eingaben sind immer noch keine Tabellendaten. Sie können das Ganze in ein div einbetten und jedes Eingabeelement nach Bedarf stylen. Einige Beispiele finden Sie in der anderen Antwort unter Smashing.