Hi. I’d like to create a form and style it similar to this:
This one appears to be using tables, am I best to start without tables and simply use CSS and Divs if so how?
Thanks in advance
That form is confusing. Am I supposed to put a number in the fields called Beds and Baths??? Nobody should ever, ever, EVER have to guess at form fields.
Bad forms suck whether they are using tables, divs, or whatever. That form can be built with pure CSS, but it breaks several usability guidelines, so at some level you begin to wonder if it matters… bad forms written in bad code… might as well throw in some <font> tags and get it over with.
Thanks all.
@StevieD - that is a decent article thanks.
The correct answer is “neither”. HTML provides semantic elements that will do the job just fine without either tables or divs. All you have to do is learn how.
I always try to use divs and CSS, but sometimes tables have the base formatting that makes it easy to layout a form quick and easy.
Web ideologists would say divs only! But for a quick and easy process ( and not too many pitfalls in just a form ), go with tables.
Yep, I have devoutly followed this mantra until it came to designing this form. Looking at the several form tutorials it seems that many point to the use of tables.
Is there anything I can’t do with divs and css that I can with tables?
Here on Sitepoint there is a commandment that says “Thou shalt not use tables”. Violate this edict and you will be hung, drawn and quartered.
However – secretly, and strictly between you and me – I often use tables for forms.
But please don’t mention this to anyone else. The idea of being hung, drawn and quartered is rather unpleasant, and would doubtless put an end to my sordid boozing and womanizing.
The Web Standards Project still has one of the best form tutorials I’ve read over the past decade.
Might also be worth checking out 1stWebDesigner
Try this Sitepoint article to get some ideas on how to design a form using appropriate elements and CSS for styling - and not a table in sight.
No there isn’t any such rule at SitePoint.
Those at SitePoint who know how HTML is supposed to be written explain how you should use the most appropriate semantic tag to mark up your content. Where that content is tabular data then a table is the correct tag to use.
In most cases when someone asks whether to use table or div the correct answer is neither since there are lots of other HTML tags and most of the time one of those will be the most appropriate to use.
In the case of a form one of the more useful tags for wrapping around form content is the fieldset tag.
you should use divs or other tags and not tables for formating/styling/structuring forms. Tables should be used for tabular data and never for actual structure or design reasons. Charts and product comparison needs are valid for tables, as it’s needed for standards, that is still understandable when the CSS is turned off.