-
1. Re: novice question about css vs. tables for forms
osgood_ Nov 2, 2010 10:08 AM (in response to TCarp)Use what you feel best suits your experience and what you feel most comfortable using.
I'd use tables sparingly BUT I certainly wouldn't rule them out altogether. For puting a form together they are probably a lot quicker and easier to implement than setting up the css involved to make form elements line up correctly.
Generally tables should be use for tabular data, information that needs to go in rows and columns BUT they can be useful for laying out form elements too.
I wouldn't take too much notice of purists who only believe tables should be used for tabular data. I'm not advocating they should be used without consideration but they are a tool in the toolbox which you can turn to if required.
-
2. Re: novice question about css vs. tables for forms
hans-g. Nov 2, 2010 10:28 AM (in response to TCarp)Hi Tom,
in addition to osgood's wonderful "I wouldn't take too much notice of purists .." I would also like to give my two cents to this subject.I think both solutions have their advantages and disadvantages.
Personally, I love tables, because I don't need to break me long on the chin, where what belongs when I need a lot of rows and columns to design.
However, it's quite interesting to give this question to Google. Here we are:
I suggest reading especially these:
http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-des ign/
http://www.michaelthorn.co.uk/web-design-tables-versus-css.php
And if you need help to solve your CSS-problems, look for example to Nancy O.'s tutorials, here:
Hans-G.
-
3. Re: novice question about css vs. tables for forms
BCDoherty Nov 2, 2010 4:26 PM (in response to hans-g.)One could also argue that forms really are tabular and thus could be coded as such, without guilt. One could give column and row identifiers to further legitimize the process.
-
4. Re: novice question about css vs. tables for forms
MurraySummers Nov 3, 2010 4:36 AM (in response to BCDoherty)Here's an interesting alternative and a very workable solution -
Use an unordered list to build your forms. The semantics of a list are precisely what you want with a form, and the properties of a <li> element solve some of the problems with free standing form elements going all over the place. So -
<form...>
<ol>
<li><input... /></li>
<li><select>
<option>...</option>
</select></li>
<li><button>...</button></li>
</ol>
</form>
To read more about this approach, just Google "forms in lists".
-
5. Re: novice question about css vs. tables for forms
TCarp Nov 3, 2010 9:04 AM (in response to MurraySummers)Thanks to all of you. I'm not being influenced much by purists. What I'm looking for are alternatives (and it looks like the choices are divs (etc), tables, and ol/li (although my first thinking on ol/li is how to build forms with multiple columns - I do the homework suggested).
What I haven't heard yet is what the pros and cons/limits are for each. For example, how well do the browsers keep borders aligned? I read that they do better with tables, but that may be old data. I mean, I can get pixels to align with divs sized with css.
I'm probably headed down a hybrid path using a table and css. With that approach is there any wisdom about how much to use css for formatting? One example is horizontal text alignment . I haven't run a test but I expect css text-align and td align to produce the same result (with text) and I also expect there's other formatting that's a coin toss. The table tag, for example, allows bordering as does css. Obviously, things like colspan and rowspan have to be coded in the table and I don't know if there's any equivalent of valign in css.
I've reviewed the specification and there are deprecated items that use css instead but some of the attributes still specified look like there are equivalents in css.
The page I'm using for testing has a table that only uses colspan, rowspan, and valign with all the other formatting (padding, borders, widths) in css.
Tom
-
6. Re: novice question about css vs. tables for forms
MurraySummers Nov 3, 2010 9:24 AM (in response to TCarp)although my first thinking on ol/li is how to build forms with multiple columns
Since the form tag contains the <ol>, it's quite possible to have multiple <ol> elements floated to align horizontally. It's still a simple method, and a semantically superior one to the use of tables (which has no semantic meaning at all).
I read that they do better with tables
I think this is nonsense. A border is a border....
Before you buy into the myth that is colspan and rowspan, read this -
-
7. Re: novice question about css vs. tables for forms
TCarp Nov 4, 2010 9:00 AM (in response to MurraySummers)Since it may boil down to personal preference I decided to build the same form layout using divs for one and table for the other. I'm not sure there's a big winner yet, but I've run into a learning block with the div one.
This is a gif of the table:
Look at the third column (Owner(s)), third row (empty). Using a table this would be created with rowspan. For the div one I'm floating all divs left.
I've been staring at this question for an hour or so and I can't figure out how to produce the same effect with floats.
In a way I'm asking how to emulate rowspan and colspan with css. I know that using a bunch of divs isn't probably the best way to format and I'll be looking at ol/li once I get the layout done.
Tom
-
8. Re: novice question about css vs. tables for forms
MurraySummers Nov 4, 2010 9:54 AM (in response to TCarp)Heh - use a table.
-
9. Re: novice question about css vs. tables for forms
TCarp Nov 4, 2010 12:31 PM (in response to MurraySummers)I just might end up there.
I have momentum though the go through both to learn. I'm working to produce the exact layout in divs (etc.) and as a table.
Progress here:
http://www.carpenterandassociates.com/NET/
The table has the advantage of being designed to support layouts via things like rowspan, colspan, etc. It can have all sorts of other html structure stuff inside and outside it. But, so can html structural elements. It's just a different way of thinking. Since there are infinite hybreds, it may come down to how the browsers handle them.
P.S. I figured out the rowspan question I asked earlier.
Tom





