9 Replies - 5295 Views - Last Post: 15 August 2011 - 06:57 AM

#1 creativecoding  Icon User is offline

  • Hash != Encryption
  • member icon


Reputation: 926
  • View blog
  • Posts: 3,205
  • Joined: 19-January 10

Tables are for data, not forms!

Posted 10 August 2011 - 11:16 AM

so for awhile now whenever I create a new form, I use a table to make it look nice and pretty. Then I realized, "oh no, I'm going to be that guy who uses tables on forms!". So this brought me to asking, what are some alternatives to tables that are as simple as tables?

It seems as if everybody's response is "use css". However, I have no idea how to do that. If you mention some complicated way, do provide an example.


Thanks.

Is This A Good Question/Topic? 1
  • +

Replies To: Tables are for data, not forms!

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Tables are for data, not forms!

Posted 10 August 2011 - 11:50 AM

something like that?
Was This Post Helpful? 2
  • +
  • -

#3 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Tables are for data, not forms!

Posted 10 August 2011 - 03:33 PM

Speaking of which, have you seen HTML for out-of-the-box MS Sharepoint? It's like a table templating machine got stuck in an endless loop.

But on topic, I understand your pain. I sometimes fall for using tables in this situation too, but the only other option that I can see is floated elements of fixed width. I have a personal aversion to floated elements, since every time I go to use them, I look for a tutorial and realise I can't understand it without A. access to the Rosetta Stone, and B. membership in the Freemason's Guild

This post has been edited by e_i_pi: 10 August 2011 - 03:34 PM

Was This Post Helpful? 0
  • +
  • -

#4 antshockey  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 45
  • Joined: 16-October 09

Re: Tables are for data, not forms!

Posted 10 August 2011 - 04:38 PM

I don't see a major problem with using tables for them.
I use tables to format forms all the time, usually for speed and laziness though.
Was This Post Helpful? 0
  • +
  • -

#5 Lemur  Icon User is online

  • Pragmatism over Dogma
  • member icon


Reputation: 1368
  • View blog
  • Posts: 3,451
  • Joined: 28-November 09

Re: Tables are for data, not forms!

Posted 10 August 2011 - 06:01 PM

Just set them as list items. It's far more effective, less code, and easier to manipulate in the long run of things. This automatically makes them behave as box level elements instead of inline and also lines them up.

I would highly recommend reading dorm's link on the subject.
Was This Post Helpful? 1
  • +
  • -

#6 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Tables are for data, not forms!

Posted 11 August 2011 - 09:45 PM

View PostLemur, on 10 August 2011 - 06:01 PM, said:

Just set them as list items. It's far more effective, less code, and easier to manipulate in the long run of things. This automatically makes them behave as box level elements instead of inline and also lines them up.

I would highly recommend reading dorm's link on the subject.


I must admit, I never thought of using them like that. I have a set of 3 divs I usually use to create a row, a label, and an input field. Way cleaner than using tables and easier to manipulate. But list items seem to be cleaner on the HTML side.

I'll have to try that on my next form.
Was This Post Helpful? 0
  • +
  • -

#7 Lemur  Icon User is online

  • Pragmatism over Dogma
  • member icon


Reputation: 1368
  • View blog
  • Posts: 3,451
  • Joined: 28-November 09

Re: Tables are for data, not forms!

Posted 11 August 2011 - 10:23 PM

Again, my patch knowledge continues to curse me. I found Dictionary List. It could potentially be used more effectively for this.
Was This Post Helpful? 0
  • +
  • -

#8 TweeTmyFreaK  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 16
  • Joined: 13-August 11

Re: Tables are for data, not forms!

Posted 13 August 2011 - 12:39 AM

View Postcreativecoding, on 10 August 2011 - 11:16 AM, said:

so for awhile now whenever I create a new form, I use a table to make it look nice and pretty. Then I realized, "oh no, I'm going to be that guy who uses tables on forms!". So this brought me to asking, what are some alternatives to tables that are as simple as tables?

It seems as if everybody's response is "use css". However, I have no idea how to do that. If you mention some complicated way, do provide an example.


Thanks.

Forms are used so your visitors can interact with your site and send data.
Tables are used so you can place the content on specific point you want to.


My advise is to learn CSS.
Try this course w3c schools offer and I think everyone can manage it: http://www.w3schools.com/css/
Was This Post Helpful? 0
  • +
  • -

#9 Lemur  Icon User is online

  • Pragmatism over Dogma
  • member icon


Reputation: 1368
  • View blog
  • Posts: 3,451
  • Joined: 28-November 09

Re: Tables are for data, not forms!

Posted 14 August 2011 - 02:11 PM

View PostTweeTmyFreaK, on 13 August 2011 - 02:39 AM, said:

Forms are used so your visitors can interact with your site and send data.
Tables are used so you can place the content on specific point you want to.


My advise is to learn CSS.
Try this course w3c schools offer and I think everyone can manage it: http://www.w3schools.com/css/


Careful on advisories. If you'll pay attention the OP knows a handful of CSS and has stated that he wishes to learn ways to do something specific, generally implying that he knows enough CSS to get around and at least tread water.
Was This Post Helpful? 0
  • +
  • -

#10 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Tables are for data, not forms!

Posted 15 August 2011 - 06:57 AM

Unless you're going to use only <labels> and <input> elements, wrapping your forms in a list (of either unordered or definition type) is probably the best way to go.

Best Way
<fieldset>
     <legend>Personal Info</legend>
     <label for="firstname">First Name</label>
     <input type="text" name="firstname" id="firstname" />
     <label for="surname">Surname</label>
     <input type="text" name="surname" id="surname" />
</fieldset>
<!-- etc .. -->


Unordered List
<fieldset>
     <legend>Personal Info</legend>
     <ul>
         <li>
             <label for="firstname">First Name</label>
             <input type="text" name="firstname" id="firstname" />
         </li>
         <li>
             <label for="surname">Surname</label>
             <input type="text" name="surname" id="surname" />
         </li>
     </ul>
</fieldset>
<!-- etc .. -->


Definition List (You are losing semantics here as you're not defining anything)
Within that you have 2 sub-elements, <dt> and <dd>, a definition term and description respectively.
By using these it's pretty easy to layout your forms like this:
<fieldset>
     <legend>Personal Info</legend>
     <dl>
         <dt><label for="firstname">First Name</label></dt>
         <dd><input type="text" id="firstname" name="firstname" /></dd>
         <dt><label for="surname">Surname</label></dt>
         <dd><input type="text" id="surname" name="surname" /></dd>
         <!-- etc .. -->
      </dl>
</fieldset>

This post has been edited by RudiVisser: 15 August 2011 - 07:06 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1