Semantic Face-Off: Table vs. Definition List for a Résumé

by neoswf

HTML

<h1>Table</h1>
<table>
<thead>    
    <tr>
        <td>2010-2011</td>
        <td>2010-2011</td>
        <td>2010-2011</td>
        <td>2010-2011</td>
        <td>2010-2011</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td><h4>Acme Corp.</h4>
            Senior Bum</td>
        <td><h4>Acme Corp.</h4>
            Senior Bum</td>
        <td><h4>Acme Corp.</h4>
            Senior Bum</td>
        <td><h4>Acme Corp.</h4>
            Senior Bum</td>
        <td><h4>Acme Corp.</h4>
            Senior Bum</td>
    </tr>
</tbody>
</table>

<h1>Definition List</h1>
<dl>
    <div class="job">
        <dt>2010-2011</dt>
        <dd>
            <h4>Acme Corp.</h4>
            Senior Bum
        </dd>
    </div>
    <div class="job">
        <dt>2010-2011</dt>
        <dd>
            <h4>Acme Corp.</h4>
            Senior Bum
        </dd>
    </div>
    <div class="job">
        <dt>2010-2011</dt>
        <dd>
            <h4>Acme Corp.</h4>
            Senior Bum
        </dd>
    </div>
    <div class="job">
        <dt>2010-2011</dt>
        <dd>
            <h4>Acme Corp.</h4>
            Senior Bum
        </dd>
    </div>
    <div class="job">
        <dt>2010-2011</dt>
        <dd>
            <h4>Acme Corp.</h4>
            Senior Bum
        </dd>
    </div>
</dl>

CSS

h1 {font-size: 120%; font-weight: bold; margin-top: 1em;}

thead tr, dt {border-width: 1px 0; border-style: solid; border-color: #000;}
thead td, .job {position: relative; width: 120px;}
thead td:after, dt:after {
    content: "o";
    color: blue;
    width: 14px;
    height: 14px;
    position: absolute;
    display: block;
    bottom: -3px;
    left: 31px;
}

dt {position: relative;}
.job {float: left;}