Ok.  So I know CSS is the way to go, but I still keep finding scenarios which a table would be perfect for, for which I have no idea how to do in CSS.

My latest example is a simple web form which asks the user for data.  Each text box has its own label (i.e. Name:).  Now since each label is of a different length, the boxes on the page are all jagged with each other.

With a table I could just whack them into a two columned table, which would keep the text boxes flush.  So how do I achieve the same using a stylesheet?

You could do this by giving each label the same width and right-margin, but for this scenario I also prefer to use tables. 

If you print the website out I have found that just cutting the page up and gluing it back to the monitor will get this working.

Or you could try these techniques out because styling forms in pure css is a right pain:

• http://articles.sitepoint.com/article/fancy-form-design-css
  

Ok, I have gone with a table.  No doubt my team will go crazy saying I need to use CSS.  What good excuses are there? lol

Hi eddy,

Read this article, you will get to know how to create a sign up form easily!

http://articles.sitepoint.com/article/fancy-form-design-css

Please 'Mark As Answer' if it helps you.

Thanks 

Oops, sorry!

I gave the same link as Harry did! :P

Did not see his reply!

eddy556:

Ok, I have gone with a table.  No doubt my team will go crazy saying I need to use CSS.  What good excuses are there? lol

For me it comes down to this, tables exist for a reason.  That is to display information in a tabular format.  Now, I inherited some pages whose entire layout is tables within tables within tables within tables within even more stinking tables and it is a nightmare I wish i had time to clean up. However, like you said and like you are seeing in some cases using a table is the simple and easy way to create the layout you most desire, a table.  It's a balance.  You don't drive screws with a hammer and you don't insert nails with a screwdriver but you can get pretty hammered if you drink enough screwdrivers.

eddy556:

Ok, I have gone with a table.  No doubt my team will go crazy saying I need to use CSS.  What good excuses are there? lol

With the css markup you dont have to spend ages typing td's and tr's.

If you are using the link I gave then you can use the same code and change it from a left labels, top labels, etc layout just by changing the referenced css files.

You will be standards compliant and more accessible.

Your pages will be smaller which means faster downloading.

eddy556:

I still keep finding scenarios which a table would be perfect for

So use a table! I suggest that you check the rendered HTML using the W3C XHTML tests at http://validator.w3.org/

There are incidentally some simple tweaks you can do to make ASP.NET pages 100% XHTML compliant - please see http://xhtmlfix.codeplex.com/

I have been informed by accessibility experts at the RNIB that the use of tables for positioning does not prevent the page from being accessible. 

TATWORTH:

eddy556:

I still keep finding scenarios which a table would be perfect for

So use a table! I suggest that you check the rendered HTML using the W3C XHTML tests at http://validator.w3.org/

There are incidentally some simple tweaks you can do to make ASP.NET pages 100% XHTML compliant - please see http://xhtmlfix.codeplex.com/

I have been informed by accessibility experts at the RNIB that the use of tables for positioning does not prevent the page from being accessible. 

Yeah as much as its wrong to say sometimes it is easier to use a table when you are against the clock. I wish I had enough time to go through the tweak, save, refresh, crossbrowser test cycle to make a simple piece of layout work but sometimes a table -is- simpler.

Personally since I found that fancy forms css article though I have not felt that tables are a situation this falls under.

Take a common scenario for example where you want a section of form (which you would put in a table) and then a break for a header and then another section. If you are using a table you have to take extra pains to make sure the labels column of each section is the same width or your alignment will be off.

Also whether you use a table generator or code the rows and cells by hand there is a lot more to be done so its going to take longer. Well not this time because you have already gone with the table option! :P

Anyway if you know about standards compliant design then only you can decided which level of involvement you want to take. It is forgivable to throw the odd table in there and the real point that most developers are getting at when they say no-tables is dont make those horribly deeply nested table based designs that were around when frontpage was king.

I think the best solution is as follows:

When you only have one label and value per row then it's best and easiest to go with divs such as the following:

<div class="labels">

  <asp:label id="label1" text="label1" cssclass="whatever" />

  <asp:textbox id="txtTextBox1" csclass="whatever" />

</div>

in your stylesheet:

.labels{width:200px}  /*or whatever the max width is*/

this way each label is the same width so your "value" fields (textboxes or whatever) all start in column 201

For rows in which you have more than one label/variable combination tables is the way to go. 

joejr:

For rows in which you have more than one label/variable combination tables is the way to go. 

if you look at the sitepoint article by cameron adams he explains how to use css for all types of form elements