Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Yet Another Divs vs Tables issue: Forms

[Meta-note:] I was browsing the question page, getting really tired of "DIVS vs Tables" "When to use tables vs DIVS" "Are Divs better than Tables" "Tables versus CSS" and all the questions that ask THE SAME THING OMG PEOPLE but I would like to see all the ways people tackle the translation of the canonical example of "why you should give up and use tables":

<table>
  <tr>
    <td> Name </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> Social Security Number </td>
    <td> <input> </td>
  </tr>
</table>

Question: How to best (semantically, simply, robustly, fluidly, portably) implement the above without tables. For starters, I guess a naive implementation uses a fixed column width for the first column, but that can have iffy results for dynamically generated content. Including strengths/weaknesses of your approach in the answer would be nice.

P.S. Another one I wonder about a lot is vertical centering but the hack for that is covered pretty well at jakpsatweb.cz

EDIT: scunlife brings up a good example of why I didn't think out the problem that carefully. Tables can align multiple columns simultaneously. The Question still stands (I'd like to see different CSS techniques used for alignment/layout) - although solutions that can handle his? more involved example definitely are preferred.

like image 772
Jimmy Avatar asked Dec 04 '08 00:12

Jimmy


People also ask

Are divs better than tables?

Because a div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size, you get the point. You want as little code as possible to do the job right.

Should I use form or div?

<form> is what you use to create a form for people to fill in. Div is used to divide sections of the web page up.

Can I use div instead of table?

In the era of responsive web design the old trend of building websites using HTML tables can't be used anymore. You have to use div tags and style them as required. This feature of the HTML Cleaner offers you a simple way to replace all table tags with div tags having the correct classes.

Should I use table for form?

Tables should never be used for design. They are used for tabular data display, only. If you are wanting to display tabular data in a form, then that is ok, but incorrect still. Tables are used to display the result of something, an output of data, whereas forms are used for input of data.


2 Answers

What I usually do is :

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

and in a CSS :

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

Of course, you'll have to define the width according to your actual data :-)

  • First, give label and input display: block, so that it can be assigned a size and be lined up.
  • They both get float: left because Explorer does things a bit differently
  • Format the label nicely
  • hack the br so that there's a clear: left somewhere, and I remember that putting it on the label didn't work on some browser.

Plus, with the br you get a nice formatting even if the browser does not support CSS :-)

like image 114
mat Avatar answered Nov 16 '22 00:11

mat


The trick is when the form gets more complicated than your sample, you realize that tables enable a "flexible grid" that no other elements do.

e.g. what if the "input" is more complicated than a text box? e.g. a bunch of radio buttons, each with their own label:

Color: [____Red___][v]
 Hood: [*] 
 Size: (_) Small
       (_) Medium
       (_) Large
       (*) X-Large

If all you need are simple forms, CSS is great, but as soon as you need a grid, things get interesting...

If you really want to do this, I would check out The Man In Blue's Solution, it works pretty well and is very clean.

like image 40
scunliffe Avatar answered Nov 16 '22 00:11

scunliffe