I’ve been experimenting with high-volume field-entry mechanisms in CSS
recently, so I can develop my own standardised admin generation tools.
I came up with a simple system (I like simple, it’s more likely to work
and easier to update.)
1: Use an unordered list for each name/value pair.
2: Enter each list-item as Fieldname
3: Fix the width of ‘label’ and ‘input’ elements.
4: ‘float: left’ your list elements.
5: if a list element has a class of ‘RowStart’, make it ‘clear: left’
You now have complete control over the sizes of elements as a whole.
You can create arbirary length rows of inputs to save space, and
they’ll gracefully pop underneath eachother if you scale down the
window. With tables they’ll squash up until unreadable, or go off the
edge of the page.
You can even use ‘em’ units for element sizes instead of pixels, to
ensure you don’t suffer from page text resizing.
For large fieldnames you could create and class names
which make double-sized or triple-sized fields.
I only came up with it all over the weekend so I haven’t destructively
tested it yet, but feel free to ask if you want some exmple code. It
works on Mac and PC so far.
Also, have a look at the Ajax Scaffold Generator project, which uses a
similar technique and has been designed by a UI pro, so is probably
quite scalable and browser-compliant.
As for everything being on the same page, I say that’s less important
for speedy entry than making sure your tab ordering is sensible. But
that’s not the spec.
(Nope, still no excuse to use tables for non-tabular data. Any blind
clerks would be screwed. It’s just lazy.)