Using the DIV tag to replace tables

Drab as a fool, aloof as a bard

2010-08-30 19:49

Posted by Hagfish in Programming, Standards

Comments (0)
Trackbacks (0)

Using the DIV tag to replace tables

This month I attended an enjoyable party which happened to have some A-list celebrities (of the Free Software world) present. I did feel slightly out of my depth when the topic of conversation turned to compiler optimisation bugs, but as luck would have it, I found myself listening to a conversation about web design. “I know this!” I thought, as the conversation developed into a good-humoured flame war about the semantic validity and practicality of using the table tag for presentation. Fortunately I was not the only one to believe that using the table tag like this should be avoided at all costs, and that meant I didn’t have to argue the point. I did end up, however, talking to someone who was in favour of presentational tables and I tried to understand the precise use case they had in mind that encouraged them to use tables in a non-semantic way. It turns out they weren’t happy with the result even when they used tables, but I couldn’t quite articulate or convince them of the alternate page structure which came to my mind. I knew then that it was my duty to actually write the code and prove to myself and others that a div-based design was the answer.

The brief

The fellow party-goer was apparently trying to present the user with a form they had to fill in, where each form element was a text input line, preceded by a text label. That is fairly standard for a web page, but they wanted the design to be “fluid”, using up as much of the width of the page as possible. They told me that with a professional page layout program you could define “blocks” and set the rules about how they should flow, applying a behaviour like word-wrap. Certainly this didn’t seem like something tables could solve, but it did seem like exactly the sort of use case that divs were invented for. One extra requirement they had was that these form element blocks could grow vertically in the event that a user entered some text which was invalid and an error message needed to be displayed underneath. I asked if the vertical growth (which would be triggered by an AJAX response) was allowed to cause the page to reflow, and they didn’t seem to mind, so I felt my solution would still be suitable.

The code

What I wrote ended up as three separate files, a semantic HTML5 page containing the page information, a CSS file for styling it, and a JavaScript file for simulating AJAX requests. All the script actually does is wait a fixed amount of time then add a warning next to a random form element on the page (removing any old warning first). The list of warnings is hardcoded in the script itself and eventually they repeat, but it is fine for a proof of concept demo.


<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>Float Test</title>
        <link rel="stylesheet" href="float.css" />
        <script src="float.js"></script>
</head>
<body>
        <div id="content">
                <h1>Fill in the form entries below</h1>
                <form action="#">
                        <div class="widget">
                                <p>
                                        <label for="name">Name</label>
                                        <input type="text" name="name" id="name" size="20" />
                                        <ins></ins>
                                </p>
                        </div>
                        <div class="widget">
                                <p>
                                        <label for="email">Email address</label>
                                        <input type="text" name="email" id="email" size="20" />
                                        <ins></ins>
                                </p>
                        </div>
                        <div class="widget">
                                <p>
                                        <label for="package">Package</label>
                                        <input type="text" name="package" id="package" size="20" />
                                        <ins></ins>
                                </p>
                        </div>
                        <div class="widget">
                                <p>
                                        <label for="title">Bug title</label>
                                        <input type="text" name="title" id="title" size="20" />
                                        <ins></ins>
                                </p>
                        </div>
                        <div class="widget">
                                <p>
                                        <label for="comment">Comment</label>
                                        <input type="text" name="comment" id="comment" size="20" />
                                        <ins></ins>
                                </p>
                        </div>
                        <div class="buttons">
                                <p>
                                        <input type="button" name="send" value="Send" />
                                        <input type="button" name="cancel" value="Cancel" />
                                </p>
                        </div>
                </form>
        </div>
        <script>setTimeout("main()", 5000);</script>
</body>
</html>
 

body
{
        background-color: gold;
        font-family: Arial, Helvetica, sans-serif;
}

#content
{
        border-radius: 7px;
        -moz-border-radius: 7px;
        float: left;
        background-color: white;
        padding: 1em;
}

h1
{
        border-bottom: 3px solid aliceblue;
        color: dimgray;
        font-size: 120%;
}

.widget
{
        float: left;
        width: 21em; /* change this to min-width if desired */
}

.widget label
{
        float: left;
        width: 8em;
        font-weight: bold;
}

.widget label:after
{
        content: ’:’;
}

.widget input
{
        float: left;
}

ins
{
        text-decoration: none;
        color: red;
        clear: both;
        float: left;
}

.buttons
{
        width: 100%;
        clear: both;
}

.buttons p
{
        float: right;
        width: 10em;
}
 

errorMessages = new Array(8);
errorMessages[0] = "This is a short error message.";
errorMessages[1] = "This is a longer error message that isn’t very helpful";
errorMessages[2] = "This is an even longer error message, that doesn’t really tell you what you need to do to fix the problem";
errorMessages[3] = "This is an error message with a long UUID string: 550e8400-e29b-41d4-a716-446655440000";
errorMessages[4] = "Malformed Latin text detected: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
errorMessages[5] = "lp0 on fire!";
errorMessages[6] = "PC LOAD LETTER";
errorMessages[7] = "Software failure! Press left mouse button to continue. Guru Meditation #84010007.00C13870";

var inserts;
var currentMessage = 0;
var lastInsertId = 0;

function changeMessage()
{
        currentInsert = inserts[lastInsertId];
        children = currentInsert.childNodes;
        if (children.length > 0)
        {
                currentInsert.removeChild(children[0]);
        }
        newInsertId = Math.floor(Math.random() * inserts.length);
        newTextNode = document.createTextNode(errorMessages[currentMessage % errorMessages.length]);
        currentMessage += 1;
        inserts[newInsertId].appendChild(newTextNode);
        lastInsertId = newInsertId;
        var t = setTimeout("changeMessage()", 5000);
}

function main()
{
        inserts = document.getElementsByTagName("ins");
        changeMessage();
}
 

Commentary

I like to think that just watching the page run is a visually compelling demonstration of the correctness of the div-based solution. Moreover, I am particularly pleased with the fact that the page is valid HTML5 and does not use any inline style information. Unfortunately the CSS file does not validate as CSS2.1, as it uses some CSS3 features and this standard is not complete yet. So incomplete is it, in fact, that recent versions of Firefox still use the proprietary -moz-border-radius CSS rule, which I have included in the file, but legacy and newer browsers should get an equivalent or at least acceptable page design, as the usability of the page is not dependent on this rule. Similarly with the content rule, non-supporting browsers should still see an acceptably usable page. Also technically invalid (under CSS2.1) are the colour names I’ve chosen, but if a browser does not support them then it should show the page as black and white which may make it less visually appealing, but doesn’t stop someone entering their data.

In terms of JavaScript, I have used getElementsByTagName() instead of getElementsByClassName(), so even IE6 might be supported (although I didn’t check). This was partly the motivation for using the unusual ins tag for holding the warnings, but as the warnings do get inserted into the page, it did seem semantically valid to do things that way. The strings used for the error messages include a collection of classic lines from software just to keep viewers of the page amused, as it is hard to write a random error message generator.

Conclusion

So the float: left; rule on each “widget” is the secret to filling the width of the page. I have yet to find a page where tables have been strictly necessary for layout, although if you want to support browsers which have not implemented some of the nice features of CSS3 (or that implement CSS2.1 badly) then you may be forced to use ugly workarounds. While we’re on the subject, I have yet to see anywhere in an official W3C recommendation that says tables may be used for presentation, despite the fact that the HTML specs allow all sort of things to appear inside td elements. Anyway, the community (where “community” includes “people you meet at parties”) always comes up with the right answer in the end. Now, how do you send an attachment of three files to someone who is famous for their strict email filtering rules?


Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments
Display comments as (Linear | Threaded)

No comments

Add Comment
E-Mail addresses will not be displayed and will only be used for E-Mail notifications
You can use [geshi lang=lang_name [,ln={y|n}]][/geshi] tags to embed source code snippets.
What is the third word in this sentence?
 
 
Submitted comments will be subject to moderation before being displayed.
 
 

Frontpage - Top level

Quicksearch

Archives

Categories



All categories

Syndicate This Blog

Blog Administration

Open login screen