CODEWITHSUNDEEP
htmlcss
Matt
Matt

Reputation: 2863

Efficient Form layout in html

Im in the process of converting a silverlight application to a "html5" web application. Im just wanting to know what is the most efficient/readable manor to layout a complex enterprise form. Here is an example of a form:

enter image description here

I could lay this out in xaml in a few minutes. It would be laid out as follows:

enter image description here

I've heard its bad form to use tables in html. Any advice would be appreciated.

Thanks

Upvotes: 1

Views: 1066

Answers (3)

Germán Martínez
Germán Martínez

Reputation: 74

Some may argue that a form is indeed tabular data, or at least input of tabular data. Instead of using a table like:

Name      | John 
Last Name | Doe
Country   | XX

You could say that:

Name      | <input>
Last Name | <input>
Country   | <input>

could also work like a table, so I think it's up to you.

Upvotes: 1

Mutu Yolbulan
Mutu Yolbulan

Reputation: 1052

I would suggest to use Object-Oriented CSS that will solve the layout issue automatically. you will want to fit the structure to different sizes in different scenarios so you might want to use a grid system in your css to centralize the design layout.

.left { float:left; }
.right { float: right }
.global { width: 960px; }
.onefifth { width: 20%; }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

and so on...

I promise you this approach will reduce your styling by a lot resulting in higher performance.

IMHO not using tables makes life easier.

see: https://github.com/stubbornella/oocss/wiki/ (object-oriented CSS) This is what Nicole Sullivan did with Yahoo and Facebook, it is definitely worth looking at

Upvotes: 1

walther
walther

Reputation: 13600

Firstly, do you REALLY need html5 or just heard it's modern?

Secondly, tables are bad if you don't use them for tabular data. For instance it's a very bad thing to layout a website by using tables. For your scenario I'd suggest to learn about css a bit and utilize some floating, divs, fieldsets etc.

Upvotes: 0

Related Questions