Tabular display of divs using css

Question

EDIT: I have clarified why I do not really want tables.

I have the following html:

<div id="heading">
   <span class="name">name</span> 
   <span class="age">age</span> 
</div> 
<div class="person">
   <span class="name">Sam</span> 
   <span class="age">1</span>
   <span class="description">This is a person description</span> 
</div> 
<div class="person">
   <span class="name">Bob bob</span> 
   <span class="age">2</span> 
   <span class="description">This is another person description</span>
</div>

I would like to render a pixel perfect table like structure:

       name         age
       ---------------------------------------------

       Sam          1

       This is a person description  

       ---------------------------------------------

       Bob bob      2

       This is another person description

       ---------------------------------------------

What css can I use for this?

To me this seems to fit a bit better in divs as opposed to a table, but if the same markup can be altered to be a table, without introducing non-semantic rows, I would be happy to go with a table.

Answer 1

*.name { float:left; clear:left; width:200px; }
*.age { float:left; width:200px; }

div.heading, div.person { clear:both; overflow:hidden; zoom:1; }

^ Hypothetically this would be it but semantically your markup should stay as a table, and mark it up as:

 <table summary="Your Summary">
    <thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Sam</td>
        <td>1</td>
    </tr>

    <tr>
        <td>Bob bob</td>
        <td>2</td>
    </tr>
    </tbody>
</table>

Answer 2

Let's just say that considering this is tabular data, it is not very semantic to use <div> tags... Semantic HTML is all about using the proper tag to represent the data being outputted, regardless of the display. Moving on.

You can use the following CSS to display it in a tabular way:

.heading, .person {
    clear: both;
}
.heading {
    font-weight: bold;
}
.heading .name,
.person  .name {
    display: block;
    width: 40em; /* for a table of 50em */
    float: left;
    clear: left;
}

.heading .age,
.person  .age {
    width: 10em; /* for a table of 50em */
    display: block;
    float: left;
}

.heading .description,
.person  .description {
    width: 50em; /* for a table of 50em */
    display: block;
    clear: left;
}

Now, since you modified your original question to allow the use of tables:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sam</td>
      <td>1</td>
    </tr>
    <tr>
      <td colspan="2">This is a person description</td>
    </tr>
    <tr>
      <td>Bob bob</td>
      <td>2</td>
    </tr>
    <tr>
      <td colspan="2">This is another person description</td>
    </tr>
  </tbody>
</table>

And no CSS required!

Answer 3

This should work:

.name, .age {
    display: block;
    float: left;
}

.name {
    width: 15em; /* change to fit needs */
}

/* consider adding the following */
.age {
    margin-left: 15em /* same as or greater than above width */
}

.person {
    clear: left;
}

#heading div {
    font-weight: bold;
    /* other fancy markup for heading style */
}