Creating mid-aligned lists in HTML
Hello, this is Jan Lehnardt and you're visiting my blog. Thanks for stopping by.
plok — It reads like a blog, but it sounds harder!
↑ Archives
Monday, July 16. 2007
The Problem
HTML doesn’t allow the easy creation of lists consisting of a label and a value where both are centred visually along a imaginary line. I consider this one of the basic flaws in HTML because nearly every site could use this.
Why? — Well, to design more usable & better looking websites. The actual usefulness of proper label-alignment has been discussed by Swapnonil Mukherjee a while ago and as a comment, Jacob Arnold states:
This guy’s article could be summed up by a simple rule of graphic design: ‘Avoid trapped white space.’
Well then, we shan’t, but how?
<table>
The pre-CSS, old-school way of creating a mid-aligned list is using a HTML <table>. Yikes. They are easy to use, produce perfect-looking lists and look the same in all mayor browsers.
<table>s are not meant for creating anything but tabular data, though and if you strive to create a website that is semantically correct, you can’t use them here. Also, a web browser might not be the only piece of software that reads your website, so you might impose limits on screen readers and other technology.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>List Example</title>
<style type="text/css" media="screen">
td.label {
text-align:right;
}
td.value {
padding-left:.5em;
}
</style>
</head>
<body>
<h2>Definition lists</h2>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="label">Key</td>
<td class="value">Value</td>
</tr>
<tr>
<td class="label">Key2</td>
<td class="value">Value2</td>
</tr>
<tr>
<td class="label">Something</td>
<td class="value">Else</td>
</tr>
</table>
</body>
</html>
<dl>
More akin to what we want to do are definition lists. They work pretty well, only they don’t have a natural way to position label and value on the same line, like a list. Some CSS magic has to be used (read: float and clear) to get things working. This is probably the area where HTML should be improved.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>List Example</title>
<style type="text/css" media="screen">
dl {
width:15em;
}
dt {
float:left;
width:8em;
text-align:right;
}
dd {
margin:0 0 .4em .5em;
float:left;
}
p.clear {
clear:both;
}
</style>
</head>
<body>
<h2>Definition lists</h2>
<dl>
<dt>Key</dt>
<dd>Value</dd>
<dt>Key2</dt>
<dd>Value2</dd>
<dt>Something</dt>
<dd>Else</dd>
</dl>
<p class="clear" />
</body>
</html>
<ul>
In the meantime, regular lists can be forged into label-value pairs and mid-alingment. I came across this solution while working on the Community Advertising Project.. It uses regular HTML lists and the display:inline-block CSS attribute to make things work. They were tested under Safari 2 and 3, Firefox 2 and IE 6 and 7.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>List Example</title>
<style type="text/css" media="screen">
li {
list-style:none;
}
span.label {
width:5em;
display:inline-block;
text-align:right;
}
span.value {
vertical-align:top;
margin-left:.5em;
}
</style>
</head>
<body>
<h2>Lists</h2>
<ul>
<li>
<span class="label">Key</span>
<span class="value">Value</span>
</li>
<li>
<span class="label">Key2</span>
<span class="value">Value2</span>
</li>
<li>
<span class="label">Something</span>
<span class="value">Else</span>
</li>
</ul>
</body>
</html>
Conclusion
The last solution isn’t necessarily better than any of the above, again, because I think there should be an obvious way to do this. But it feels the most natural for me.
In case you like the code, feel free to take and use it where appropriate.
The last one wasn’t centered for me (WinXP, Firefox 2.0.0.4)