9 Replies Latest reply: Nov 4, 2010 12:31 PM by TCarp RSS

    novice question about css vs. tables for forms

    TCarp Community Member

      I'm on the journey to learn html forms.  I'm fairly comfortable with css and have a good sense of separating structure for formatting.

       

      As I started forms, I found myself designing using a table.  This is a working page for my learning.  http://www.carpenterandassociates.com/NET/NET_forms

       

      I read a bit on the web about whether to use css or table element formatting and some of it seems a bit "religious".  What's the thinking on tables vs. css for forms like the one I'm working on?  I'm also wondering if there's a hybrid approach (e.g. table with css)?  If so, is there an article that helps describe what to put in css and what to put in the table elements?

       

      Tom

        • 1. Re: novice question about css vs. tables for forms
          osgood_ CommunityMVP

          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. CommunityMVP

            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:

             

            http://www.google.de/#hl=de&source=hp&q=tables+vs+css&btnG=Google-Suche&aq=f&aqi=&aql=&oq= tables+vs+css&gs_rfai=&fp=e6f8a0fccd940731

             

            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:

             

            http://alt-web.com/

             

            Hans-G.

            • 3. Re: novice question about css vs. tables for forms
              BCDoherty Community Member

              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 CommunityMVP

                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 Community Member

                  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 CommunityMVP

                    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 -

                     

                    http://www.apptools.com/rants/spans.php

                    • 7. Re: novice question about css vs. tables for forms
                      TCarp Community Member

                      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:

                       

                      Table_example.gif

                      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 CommunityMVP

                        Heh - use a table.

                        • 9. Re: novice question about css vs. tables for forms
                          TCarp Community Member

                          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