Best way to implement tab stops in valid XHTML?

Question

For explanation imagine a simple address. Written in a HTML paragraph with line breaks it would like this:

Street: Example Street 1
City: Vienna
Zip Code: 1010
Country: Austria

Most of the time that's completely okay, but sometimes I have to achieve the following output:

Street:   Example Street 1
City:     Vienna
Zip Code: 1010
Country:  Austria

My thoughts so far:

1. Should be valid XHTML and work or degrade gracefully in all major browsers
2. Using tags in a semantically correct way is strongly preferred
3. Because of point two: I hope there's a better solution than tables
4. The problem is not limited to addresses - would be useful in other situation too

How do you achieve this output (using HTML and/or CSS)?

Answer 1

I think you've taken "tables are bad" concept to the extreme.

• Tables used purely for layout (when other element would be more semantic) are bad.
• Tables for tabular data are good. They were intended for that purpose!

What you've got fits very nicely into concept of rows and columns, with headers (<th>) and data (<td>) – based on semantics, not only layout.

If you want to make it more explicit that it's an address, then use adr Microformat or add a <caption>.

Wrong approaches:

• <dl>: "1010" is not a definition of "Zip Code". The other way round it makes a bit more sense, but the relationship is just as clear with <th> → <td>, it doesn't rely on CSS, and will look perfect regearless of user's font size.
  If you use <th> will be perfectly rendered even in lynx! Address in <dl> without CSS trick will look weird.
• HTML's <address> element may not be appropriate for this, because it is intended only for page author's/maintainer's contact information. It also allows inline content only, so you would lose structure of the address.