SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 68
  1. #1
    SitePoint Evangelist adesignrsa's Avatar
    Join Date
    Aug 2004
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use tables or CSS for your forms?

    We're having a debate in the office over this.

    What is most practical and future proof with regards to the creation of web forms?

    We're talking pretty much across the board, from little 3 field contact forms through to multiple column registration forms asking for every detail of your life to date.

    What is your opinion of the matter?
    Ross Allchorn
    Web Consultant
    www.allchorn.com
    Twitter - @allchornr

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My opinion is that most forms are not tabular information and thus shouldn't be marked up as tables. The exceptions are when you have multiple instances of a set of fields, e.g., order rows.

    I can't believe this is still a topic in 2009! Tables for layout has been deprecated for over a decade. CSS for layout has been practically possible since about 2001.

    Aside from the semantics and accessibility, there are huge benefits of using CSS to control presentation. It gives you a lot more control than a rigid grid of rows and columns.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist adesignrsa's Avatar
    Join Date
    Aug 2004
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with you, and also agree that it is a topic that should be in bed.

    Problem is that there are still a lot of people (specifically programmers) that don't agree with the removal of the ease in layout using tables for forms.

    While I agree with you, I do understand their thinking.
    Ross Allchorn
    Web Consultant
    www.allchorn.com
    Twitter - @allchornr

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ease in layout? Perhaps if you have a deeply ingrained habit of using layout tables and think in grids.

    Which is easier to write, read and understand; this:
    Code HTML4Strict:
    <form action="app.php" method="post">
      <table>
        <caption>Login</caption>
        <tbody>
          <tr>
            <th><label for="uname">Username:</label></th>
            <td><input type="text" name="uname" id="uname"></td>
          </tr>
          <tr>
            <th><label for="pwd">Password:</label></th>
            <td><input type="password" name="pwd" id="pwd"></td>
          </tr>
          <tr>
            <td colspan="2"><input type="submit" value="Login"></td>
          </tr>
        </tbody>
      </table>
    </form>
    or this:
    Code HTML4Strict:
    <form action="app.php" method="post">
      <fieldset>
        <legend>Login</legend>
        <label for="uname">Username:</label> <input type="text" name="uname" id="uname">
        <br><label for="pwd">Password:</label> <input type="password" name="pwd" id="pwd">
        <br><input type="submit" value="Login">
      </fieldset>
    </form>
    And then I even assumed that most of the remaining styling in the table layout would be handled via CSS. If you start littering the markup with presentational attributes like cellpadding and width it gets even worse.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Member Zanicar's Avatar
    Join Date
    Aug 2006
    Location
    Pretoria, South Africa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stay far away from tables... I am working on a system where the initial forms were designed in tables and I'm in the process of converting them to CSS based forms. The major issue is a styling update caused havoc with the table layouts, which had huge accessibility issues from the word "go".

    The Sitepoint book, "Art & Science of CSS" gives great examples for proper CSS form design with undiniable rational. The specific chapter is also available under the free articles on Site Point... I have the book but not the link to the article, but you should find it rather easily with the search function.
    Technology Management
    Cloud Computing Systems
    Rich Internet Applications
    http://noctranet.com

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I think a table might be the only way to go if the form is absolutely, completely dynamic.

    Or, nobody anywhere has shown how to make labels of incredible length-diversity who must be NEXT to the inputs (not above) always have the input line up with the last line (that only makes sense, doesn't it? That's where the eye ends up).

    Static forms are easy enough. You can choose a label width.

    International forms are more difficult, but you can look at the language with the longest labels and adjust.

    Completely dynamic forms, with labels being sometimes a word or two and sometimes a few lines, I'd sure love to see. It's been bugging me.

    I don't make dynamic forms, so I don't use tables. Or lists. Fooey.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Or, nobody anywhere has shown how to make labels of incredible length-diversity who must be NEXT to the inputs (not above) always have the input line up with the last line (that only makes sense, doesn't it? That's where the eye ends up).
    Simple: display:table-cell. Unless you need it to work in browsers that don't support CSS2 (such as IE7 and older) of course.

    I assume this form you're talking about is generated dynamically by a server-side script or application? In that case, the script/app can easily count the lengths of the labels and set aside the appropriate space with an internal style sheet (<style>) attribute or even a style attribute. No need for tables, even here.

    If it's not a dynamically generated form, you can just count the letters yourself and set your CSS accordingly. Using em as the unit makes this virtually painless.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Zealot darksystem's Avatar
    Join Date
    Jan 2005
    Location
    Fayettville, North Carolina
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do also recommend using css for layouts. Just like here in my website http://5mservices.com/create_account.php the form has been coded without tables and it clearly shows that its too easy to understand and the code is just small compared if I used tables.

    So, stick with css(tableless).
    Ebay API, OSC/CRE/OscMax/ZenCart/SEO Services
    Lucki Multimedia - Email

  9. #9
    Non-Member Musicbox's Avatar
    Join Date
    Nov 2004
    Location
    india
    Posts
    1,331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    css for layouts definetly, you can use tables for forms but css will be of stylish way.

  10. #10
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    css of course. I find tables complicate things, not simplify them...

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2008
    Posts
    1,149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like to use CSS, but I stick to tables half the time. It is so much easier to get a table-based form to be (more) pixel perfect and scale to odd OS-enforced input box sizes with tables than forms. Also, if all forms are not the same width on the entire site, or a form line has more than one form element, then styling the form just becomes a pain.

    For one thing, I have to middle-align my labels, or otherwise it looks ugly, and trying to do that with other things is a bit annoying with CSS.

  12. #12
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't believe this issue made frontpage. If it were 1999 I would have understood...

  13. #13
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My basic form markup which has a given me a ton of flexibility
    Code:
    <form>
    ...
    	<div class="formfieldgroup req-text">
    		<label>Label1</label>
    		<input type="text" class="inputText" />
    	</div>
    	<div class="formfieldgroup opt-text">
    		<label>Label2</label>
    		<input type="text" class="inputText" />
    	</div>
    ...
    </form>
    MySQL v5.1.58
    PHP v5.3.6

  14. #14
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BrandonK View Post
    My basic form markup which has a given me a ton of flexibility
    Code:
    <form>
    ...
        <div class="formfieldgroup req-text">
            <label>Label1</label>
            <input type="text" class="inputText" />
        </div>
        <div class="formfieldgroup opt-text">
            <label>Label2</label>
            <input type="text" class="inputText" />
        </div>
    ...
    </form>
    Why not use <fieldset> instead of <div class="formfieldgroup">, which was designed for that very purpose?

  15. #15
    SitePoint Addict telos's Avatar
    Join Date
    Mar 2005
    Location
    192.168.2.34
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adesignrsa View Post
    We're talking pretty much across the board, from little 3 field contact forms through to multiple column registration forms asking for every detail of your life to date.
    CSS, all the way.

    Multiple-column forms are especially easy with CSS. I always do a list, which makes it easy to float items for columns. Add a list item anywhere in the list, and poof, the columns realign themselves. Especially great for dynamic forms - no messing with tr's and td's and colspans on the fly, yuck!

    The only exception, as AutisticCuckoo pointed out, is when you need to list tabular data.

  16. #16
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Obviously, CSS is preferred in case of designing.
    They free you from designing and formatting each page.

    Design one CSS and you are done []

  17. #17
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    Why not use <fieldset> instead of <div class="formfieldgroup">, which was designed for that very purpose?
    Fieldset is for a group of fields. I use formfieldgroup (perhaps a poorly worded class name) as a way to group labels and their form fields together (basically combines the two fields into a single block element)
    MySQL v5.1.58
    PHP v5.3.6

  18. #18
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BrandonK View Post
    Fieldset is for a group of fields. I use formfieldgroup (perhaps a poorly worded class name) as a way to group labels and their form fields together (basically combines the two fields into a single block element)
    <div class="form-item">

  19. #19
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This caught my attention as I am new to web building and design. I have read Sitepoint's XHTML CSS: Doing your website the right way and currently on HTML Utopia. Both bash tables. However, I am also taking classes and last week and this week we are doing forms, buttons, list, etc. All of the forms are placed in tables and that is what the instructor has guided us to do. Its an HTML class and we have not gotten to CSS. But here is another kicker. Here is a direct quote from yet another book I am reading, XHTML Comprehensive, author Don Gosselin, from Thomson Course Technology on forms..this was highlighted as a "tip" quote "Notice that the form in the preceding example is contained with a table. Many web page authors use tables to control the layout of forms on Web pages" unquote...so to answer the question of why tables are still being used..well because that is what the education training is telling us to use..

  20. #20
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I posted this with a quick reply but don't see it anywhere so excuse if you see this twice..anyway I'm take a Web building class, we're on forms now and have been told to use tables to line up the form fields. Also, i have read sitepoints XHTML: Doing your website the right way and am reading XHTML Utopia and told to not use tables..but one more kick here is a quote from another book called XHTML Compreshensive from Thomson Course Technology this was written as a tip: quote "Notice that the form in the preceding example is contained with a table. Many web authors use tables to control the layout of forms on Web pages" unquote..so why so many tables? because that's what they are teaching us to use..

    love the forum and sitepoint by the way..

  21. #21
    Non-Member DelvarWorld's Avatar
    Join Date
    Jul 2004
    Location
    Baloney
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    forms are not tabular information and thus shouldn't be marked up as tables.
    Thread should have been closed after this reply. This is not a topic to debate.

  22. #22
    SitePoint Evangelist JordashTalon's Avatar
    Join Date
    Dec 2008
    Posts
    505
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't fault a coder for using Tables in Forms, but doing it in CSS would probably be best in most cases.

  23. #23
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can someone post an example of a form that has multiple inputs (username, password, e-mail. date of birth) using CSS (and not tables).

    I currently use tables for my forms, but besides being "easy" is there another advantage of using CSS? Perhaps better page rending? less html code to be sent from the server?
    Quick References:
    http://www.LiveDateLove.com - free dating site
    http://www.getspeed.org - free internet bandwidth test
    http://www.alinasguide.com - web guide to internet services

  24. #24
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alexpr07 View Post
    Can someone post an example of a form that has multiple inputs (username, password, e-mail. date of birth) using CSS (and not tables).
    Have a look at this thread. Okay, it turned out that it wasn't supposed to be a form at all, but the code I provided does mark up a rather complex form using CSS. Oh, and there's a couple of tables in there, too, where there's tabular data. (One of the tables are a bit odd, having an invisible tbody, but that's by the by.)
    Birnam wood is come to Dunsinane

  25. #25
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use CSS and Div, not table.
    MarketsandMarkets Market Research Reports -250 pages report


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •