I’m big on web standards. I try very hard to ditch the nested tables of the 90s since divs are the new black.

Today I was working on a form and decided to look for information ontableless forms. I was very disappointed. I’m all for using CSS wherever possible but I am not willing to relegate myself to using fixed width floats that break easily with text size changes.

The obvious choice was to continue using tables for forms, since the expected form is right alignment for labels and left alignment for input. The normal pattern for me is to create a class for tds named ‘label’ and set the right alignment. The side effect is that every single one of those tds must be styled!

But wait! I’ve recently discovered the label tag and had just started using it:

So, a simple bit of CSS can help us here. Simply style the containing table as ‘form’ (or whatehaveyou). Then add the following CSS:

Ha! Now we’ve got right aligned labels without having to style every single TD!

I’m expecting some people to read this and complain that the introduction of label is as much (if not more) markup than the style would’ve been. I agree! The other use of label is for accessibility. The browser now understands that the text you’d tagged is the label for a particular input. This is a Good Thing^tm.

Technorati : View blog reactions
Posted at : October 19th, 2005 - 2:59 pm
Filed under : Code, Design, Languages, Perl
Navigate : Previous post / Next post