How to do this using css

Question

I'm currently working on a web application and I need to display some fields in a tabular way. For example:

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------- 
etc  
-------------------------------------------------

The fields need to be aligned (in the above example 'Town' should be exactly below 'First Name', 'Country' should be below 'LastName' etc). I was thinking of using an html table (and putting a fieldname/value in each cell) but after everything I've read on this site it looks like I should be using css as the data I want to display is not really tabular. I just want it to look tabular. I can't find a simple way of doing this with css though. Any ideas?

Answer 1

I think you're a bit confused as to when to use CSS and when to use tables. When you have that much data, you probably should be using tables. It's fine to position the actual BOX that it's in using CSS, but from what I can see the data inside the box should be inside a table.

Answer 2

In these cases fumbling with CSS is a PITA and I would nearly always suggest a table. As Scott already said, semantically a definition list would be good choice:

<dl>
  <dt>First Name</dt><dd>John</dd>
  <dt>Last Name</dt> <dd>Smith</dd>
  <dt>Age</dt>       <dd>26</dd>
  <dt>Town</dt>      <dd>Madrid</dd>
  <dt>Country</dt>   <dd>Canada</dd>
  <dt>Colour</dt>    <dd>Blue</dd>
</dl>

You could style it like this:

dl {
    margin: 0;
}
dt {
    float: left;
    background: #eee;
    width: 10%;
    margin: 0;
    white-space: nowrap;
    padding: 0.25em;
}
dt:after {
    content: ':';
}
dd {
    float: left;
    width: 20%;
    margin: 0;
    padding: 0.25em;
}

To get X values per row aligned you have to explicitly specify the width for each element which might not always be that practical. Though to get a new row you could work with the :nth-child selector (or use an attribute for older browsers) and put clear: left; in its definition.