0

this is not another "should i use html-tables to style a form"-question. Now i read Is it bad design to use table tags when displaying forms in html? and Why not use tables for layout in HTML? and i get why i should not use tables for layout-purposes, but i guess i don't know how.

Recently i mostly developed JSF applications and got used to accompany every input field with a description-label infront of it and another label for validation-messages. Now in JSF/Primefaces this could look like so:

<p:outputLabel for="tf" value="Firstname" />
<p:inputText id="tf" value="#{contact.currentContact.firstname}" />
<p:message for="tf" />

If you are not familiar with JSF, in this simple case the p:outputLabel would render to a simple html-label, the p:inputText to a html-input and the p:message to a html-div which contains either nothing (no error-message) or two span-elements (for error-icon and message). Now JSF may be a bit of a special case since in the rendered HTML the spans are simple not rendered if they are not needed. Still this question could apply do any sort of HTML-form.

Now if i use a table to style this each of this components would be a cell (= be within a td). Since this is a table i get a correct "alignment" out of the box, meaning all inputfields are vertically aligned, even if one of the labels is much longer than the others like this: inputfield_alignment

Now this seems like no big deal, because i could find out the pixels of the longest label and use it as width or min-width or something like that, right? But what if the labels change or if i support multiple locales where label-length could vary a lot?

And what about the validation-message? Usually i want my label+input field to use 100% of the width. But if i display a validation message this changes, because there is a third component to be displayed like this: enter image description here

When using a table again this works pretty much out of the box because in my case the column is collapsed as long as there is no content, yet if there IS a validation-message it's still displayed fine.

So my question is: How do i style this properly with CSS?

Community
  • 1
  • 1
Mario B
  • 2,102
  • 2
  • 29
  • 41
  • There's nothing wrong with using a table for form layout..in fact it's quite common. Arguably, it's a table of inputs to be completed. Other than that, the question is **too broad**. – Paulie_D Apr 01 '16 at 15:25
  • I would never use table layout because it prevents me from creating a responsive application. In your case, to display labels and input fields in an elegant way, I would use CSS display:block for both labels and input fields. – Erick Apr 01 '16 at 22:23

0 Answers0