WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to associate form elements with table cells?

for

From: Thomas Jedenfelt
Date: May 29, 2005 11:56PM

Hi Graham,

Thanks for showing a different technique.

I agree that your technique would be preferred (not using a table)
regarding my example.

I used only two items (Books) and three columns (Item, Quantity and
Price) for the sake of simplicity.

I had in mind a more complex table - not necessarily an order form
- with several items and, perhaps, more columns. My choice of a
table is also for displaying information, with the _option_ for the
user to interact (placing an order, for example).

I would argue that in such case, a table would be the more logical
information structure (mark-up).

(Using lists (DL, UL, OL) might also be an option.)

There is also the choice of controlling the presentation of the
information: either using the table elements as selectors, or - as
in your example - LABEL/SPAN/DIV.

Some notes regarding your technique:

1) LABEL cannot contain DIV, only Inline elements [1]. SPAN might
be preferred.

2) I would guess that you can associate both 'Book' and price with
the form control for Quantity, even if the form control is in
between 'Book' and price (as long as the text data is within
LABEL?).

3) BR is needed after each LABEL, as LABEL cannot contain
Block-level elements. BR is also needed when disabling the style sheet.

Thanks,
Thomas Jedenfelt

[1]
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL


----- Original Message -----
http://www.webaim.org/discussion/mail_message.php?id=6716

>
> Why use a table? I would tend to do something like this:
>
> <style>
> .book{width:10em; float:left;}
> .price{width:5em; float:left;text-align:right;}
> </style>
> <label><div class="book">Book A</div><div class="price">
> $2.00</div><input type="text" size="4" title="Enter quantity"></label>
>
> Note: I also put the price before the textbox as you can then associate
> both the book and price, I also think it looks better on screen having
> the input at the end of a line.
>
> Regards
>
> Graham Cook


--
_______________________________________________
Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com

Powered by Outblaze