I’ll admit it. To the chagrin of my inner CSS purist, I still catch myself using the valign attribute to vertically align content to the tops of table cells. That’s because, as too many developers know, IE still doesn’t support the vertical-align CSS attribute that’s supposed to take care of that design issue.

But the reasons to let go are compelling. For one thing, the W3C’s latest working draft on HTML 5 states that the valign attribute will be among those that are dropped because they are “presentational attributes … better handled by CSS.”

Additionally, the pure-CSS fix isn’t nearly as ugly or esoteric as many designers imagine. (See below.) But the biggest reason to send the valign attribute to the HTML retirement community already rightly inhabited by residents like the <font> tag, the <center> tag, and the align attribute is that its usage violates one of the fundamental goals of well-executed web design— that design and content are separate entities that should be handled by separately-served documents. HTML tags and attributes are intended to lay out the semantic, logical flow and structure of a page of web-delivered content. They should not be used to define the particular aesthetics of that structure, and tags or attributes whose primary function is to do just that should rightly be retired.

The valign CSS fix

Here, then, is the most straightforward cross-browser way to handle top-aligned content within table cells. First, add the vertical-align attribute for the benefit of standards-compliant browsers:

td { vertical-align:top; }

Second, wrap the content inside each table cell with another tag— say, a paragraph tag:

<td><p>Cell content</p></td>

Then, define any tags within table cells to have relative positioning at the top of the containing <td> element:

td { position:relative;vertical-align:top; }
td * { position:relative;top:0px; }

That’s all it takes! Here’s a simple example.

Now, HTML purists may object that my workaround of using additional “wrapper tags” unnecessarily clutters the semantic structure of the HTML document. They might argue that this practice is just a variation on what’s often called “divitis”— wrapping everything in <div> tags when other tags would be more appropriate. My response is that, if we’re careful to choose an appropriate tag, then we’re not violating the spirit of HTML markup. Is a <p> tag not completely appropriate for a particular table cell? Well, then, choose another, more appropriate block-level HTML tag. Since the left column of a true tabular data presentation (which is what <table> tags are really, really, intended for) often involves row headings, why not use one of the little-used lower-level header tags (like <h5> or <h6>) to give them the semantic emphasis that they ought to have anyway? My point is that an ultra-minimalist view of tag usage is just as detrimental to good, semantically valid design as is the smorgasbord approach of overusing and abusing tags and attributes. (More on this…)

So goodbye, valign, my old friend; you’ve served me well, but I’m older (!) and wiser now. Be sure to say hello to <center> and <font> for me…