In his recent conversation, a coworker mentioned if you’re still using the <table> tag to layout your web pages, “you need to move out of the 90’s.” Of course, I agree. And, I frequently use <div> tags instead of <table> tags.
But, a little digging on the web has shown me I’ve probably been overusing <div> tags. Instead, the recommendations I’m seeing (links at the bottom of this post) are to limit <div> tags to the main layout of your page – things like headers, content, side-bars, and footers. Then, use traditional HTML markup for the content inside each area of your layout.
One such example I ran across used the <fieldset> and <ol> tags to render a form. It looked like this:
<form> <fieldset> <legend>Please enter your credentials:</legend> <ol> <li> <label for="username">User Name:</label> <span class="input"><input type="text" id="username"/></span> </li> <li> <label for="password">Password:</label> <span class="input"><input type="text" id="password"/></span> </li> <li> <span class="submit"><input type="button" id="login" value="Login"/></span> </li> </ol> </fieldset> </form>
Without any CSS, it rendered like this:
Of course, that’s not the nicest looking form. But, it does provide some distinct advantages – especially to users who depend on accessibility tools to “view” the web. By enclosing the elements of the form in an ordered list (<ol>), for example, the user can hear how many elements there are in the form.
And, by enclosing all of the fields in a <fieldset>, we give the user additional context that gets repeated with each <label> in the form. This would be particularly useful for a shopping cart, where the Address fields might be repeated in multiple contexts, such as shipping address and billing address. Just enclose each group of fields in a separate <fieldset> and give them an appropriate <legend>.
To get the form to look less like a list and more like a traditionally (<table>) formatted form, I used this CSS:
<style type="text/css"> fieldset { width: 260px; border: solid 1px black; } ol { list-style: none; margin: 0px 0px 0px -60px ; } li { display: table-row; } li label { width: 100px; float: left; text-align: right; padding: 5px; } li .input { width: 140px; float: right; text-align: left; padding: 5px; } </style>
After which, it rendered like this:
Or, after another five minutes, I created this CSS, to render the <label> tags above the <input> tags:
<style type="text/css"> fieldset { width: 200px; border: solid 1px black; } ol { list-style: none; margin: 0px 0px 0px -30px ; } li { display: table-row; } li label { width: 100px; padding: 5px; } li .input { width: 140px; float: left; text-align: left; padding: 5px; } </style>
This rendered the form like this:
So, in the end, I learned something today. I hope you do to!
Here are the links I promised:
- Table Layouts vs. Div Layouts: From Hell to… Hell?
- Why tables for layout is stupid
- Prettier Accessible Forms
Enjoy!