Semantics and presentation of tabular data - html

Question

Right now, I'm displaying tabular data using <table> with HTML, which is semantically correct. I'm wondering whether there's a way to change the presentation of the data for a less tabular appearance when viewing the data.
My markup currently looks like this:
<table>
<thead>
<tr>
<th scope='col'>Vehicle</th>
<th scope='col'>License plate</th>
<th scope='col'>Location</th>
<th scope='col'>Deployment date</th>
<th scope='col'>Date of last inspection</th>
<th scope='col'>Last inspection at</th>
</tr>
</thead>
<tbody>
<tr itemscope>
<th scope='row' itemprop='primary_key_id'> ... </th>
<td itemprop='license_plate'> ... </td>
<td itemprop='location'> ... </td>
<td itemprop='deployment_date'><time> ... </time></td>
<td itemprop='last_inspection_date'><time> ... </time></td>
<td itemprop='last_inspection_odometer'> ... </td>
</tr>
</tbody>
</table>
Of course there's more than one vehicle in the table, but that's pretty much how I'm displaying the data right now. There's also additional columns, for the purpose of my example I'll just stick with these six.
I'm looking to do more of a list view, but I'm not sure if using <ul> and display: table-* here would be semantically correct since this is tabular data. I know I can also put <span itemprop='...'> into the <td> cells along with block-level elements to arrange the content the way I want to, but I'm not sure if this would be correct either.
Presentation-wise, this is what I'm looking to achieve:
<table>
<tbody>
<tr itemscope>
<th scope='row'>
<b itemprop='primary_key_id'> ... </b>
<div itemprop='license_plate'> ... </div>
</th>
<td>
<p>Located at: <span itemprop='location'> ... </span>
<p>Deployed at: <time itemprop='deployment_date'> ... </time>
</td>
<td>
Last inspected on <time itemprop='last_inspection_date'> ... </time>
at <span itemprop='last_inspection_odometer'> ... </span>
</td>
</tr>
</tbody>
</table>
But in this case wouldn't I just be using the table markup to style the information into three columns? Would it make a difference if I did this?
<ul>
<li itemscope>
<div class='column'>
<b itemprop='primary_key_id'> ... </b>
<div itemprop='license_plate'> ... </div>
</div>
<div class='column'>
<p>Located at: <span itemprop='location'> ... </span>
<p>Deployed at: <time itemprop='deployment_date'> ... </time>
</div>
<div class='column'>
Last inspected on <time itemprop='last_inspection_date'> ... </time>
at <span itemprop='last_inspection_odometer'> ... </span>
</div>
</li>
</ul>
What is the best way to markup and style the data?

Answer 1

Tables are semantically correct.
What you try to achieve in your example is not good.
Use tables, but for identification and additional properties you can dynamically assign classes or IDs.
Another way is to add data-* attribute to table element.
<td data-some-key="value">
Also I don't see a semantic problem if you will use code from your last example for your custom mark-up of rows.

Answer 2

If the markup you use under “Presentation-wise, this is what I'm looking to achieve” suits your needs, use it. It does not seem to be possible to achieve such presentation using just CSS on the current markup. (The obstacle is that you would need to combine two cells into one. This might be possible in a sense using Grid Layout, but it’s not ready for prime time yet.)
Using div class=column is not more semantic than using a table. Actually, less.

Answer 3

Sadly, you can't always present data semantically in HTML if you want it to be displayed in a certain way. The dl element might help in this case, though.