Formatting controls in web parts

Question

If you have multiple controls in your webpart how do you format them 'nicely' so they don't all appear in one horizontal line?

So you would have something like

• CompanyName:
• First Name:
• Last Name:
• Post code:
• Email Address:

Is it going to have to be a table?

Answer 1

There is an article on A List Apart which gives an example of how to format a form without using tables

http://www.alistapart.com/articles/prettyaccessibleforms

There is also a discussion on Stack Overflow which give a few more examples. One point that was made that I tend to agree with is:

"If you don't use tables you need to know the width of your labels upfront. This can often be a problem for multi-language sites (i18n).

With tables, they stretch to fit labels of differing sizes. CSS alone can't do that yet in a well-supported way." -> https://stackoverflow.com/questions/591539/forms-can-they-be-done-without-tables

Answer 2

The same way you format any HTML inputs on any HTML page. The webpart simply renders the HTML as you define in the render event. Use tables, divs, css styles, like any other page.

Answer 3

Simplest way is to add an additional LiteralControl like this in CreateChildControls:

LiteralControl lit = new LiteralControl("<br />");
this.Controls.Add(lit);

Put an instance like this between all your controls, but there are so many ways to achieve this and all of that is beyond the scope of this site as it is standard ASP.Net Web Control development.

Answer 4

You can use Table as well as Div, SharePoint in general uses tables for most of it's built in webparts as they display the same no matter the browser.

Just be careful on how many tables you use, and nested tables are extremely bad also due to rendering times of the page.

Selecting the right container for the right situation is what should be done.