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:
Enjoy!
