Frequently I am aligning text such as:
To: 07/02/2010
From: 07/02/2010
Id like it to be displayed like this:
To: 07/02/2010
From: 07/02/2010
So what is the quickest/easiest/best way to do this? CSS? using a few nbsp (would work if its mono spacing) or using tables. Normally if I am not in a anti-hating table mood, ill use tables.
What do you recommend?
Definitely definition list (<dl>).
<dl>
<dt>From:</dt><dd>07/02/2010</dd>
<dt>To:</dt><dd>07/02/2010</dd>
</dl>
/* CSS */
dl {
overflow: hidden;
}
dt {
width: 50px;
float: left;
}
I'd recommend tables. It really is the best way, especially seeing as it really is tabular data there, and HTML doesn't support tab stops.
But it really is silly to avoid tables for the sake of avoiding tables. Unless you want the option later to style like so:
To: From:
07/02/2010 07/02/2010
You could do something like this, if for some reason you didn't want to use tables:
CSS
.sideheading { width: 3em; float: left; }
HTML
<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010
Or use a definition list (but if the reason you are avoiding tables is due to semantics, then DLs would be avoided for the same thing).
But of course, it's about the layout, no customer or web surfer is ever going to care how you do it, as long as they can read it!
Padding with s sounds messy. How about something like this:
<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010
.header { display: inline-block; width: 5em;}
In this case, though, I'd actually say tables are appropriate; it does look like tabular data, with a column of headers.
This has come up at work many times and I ended up creating some styling for a 2-column table which hides borders. Technically, this is tabular data, but a table with only 2 rows and 2 columns is pretty lame considering the amount of markup needed to achieve it within spec.
I've often regretted creating the class, as now everyone uses it far too much and I have to constantly be on the lookout for it in our code reviews. If you don't anticipate that problem, it's a semantically-correct solution, and slightly more elegant than the hoops you'll jump through with DL's, spans, etc.
I've seen this problem before, a quick google search:
http://www.google.com/search?q=css+forms
...brought me here:
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
...and I copypasted the HTML and CSS into this:
<html>
<head>
<style>
label
{
width: 5em;
float: left;
text-align: right;
margin-right: 1em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
</style>
</head>
<body>
<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Looks good to me, save it in a .html and see for yourself.