I’m a big fan of CSS, and CSS positioning. I’ve always heard and believed the mantra “Use CSS for positioning; use tables only for tabular data”. It seemed wise to my young and innocent ears. However, I’ve recently been having some doubts, brought on by considering a common layout case.
Here’s my scenario. I want to have a series of labelled widgets, e.g. for a “Preferences” page. Quick ASCII art diagram:
Foo: [ Freeform Text ] Bar Setting: [ Sometimes Bar |V] Baz? ( ) Yes, Baz (.) No, don't Baz Quux: [X]
(No, you don’t need to point out the number of UI design principles broken in this diagram. It’s an example.)
Doing this with CSS would involve something like two divs, one for the left side and one for the right, either floated or absolutely positioned, and a lot of messing about with vertical margins and padding trying to get the widgets to line up exactly with their descriptions at various font sizes. And, even if I managed it, is it the right thing to do? Would a screen reader read all the descriptions and then all the widgets?
Should I (whisper it) be using tables for this, even though it’s not really tabular data? Or is it?