Is there a more semantic way to markup Price Lists? Example as Table and as Description List

Question

I have a pricing list that I can make sense of as both a table and as a description list. Using a table feels hackish. I thought a dl might be appropriate because description lists "are useful for displaying metadata as a list of key-value pairs" according to the docs at MDN

---

As a table

<div class="wrapper">
 <div class="unit three-of-four cost-summary">
 <table class="pricing-table">
 <caption>Server Cost</caption>
 <tbody>
 <tr>
 <td>
 2VPU + 4GB Memory
 </td>
 <td>
 $ 0.066666 / hr
 </td>
 </tr>
 <tr>
 <td>
 10 GB Storage Disks
 </td>
 <td>
 $ 0.088888 / hr
 </td>
 </tr>
 <tr >
 <td></td>
 <td class="subtotal tally">
 <strong>0ドル.155554</strong> / hr
 </td>
 </tr>
 </tbody>
 </table>
 <table class="pricing-table">
 <caption>Monthly Licensing Cost</caption>
 <tr>
 <td>
 @0.00 per CPU x 1
 </td>
 <td class="subtotal">
 $ <strong>0.00 </strong>/ month
 </td>
 </tr>
 </table>
 </div>
</div>
<!-- end wrapper -->

---

As a description list

<div class="wrapper">
 <div class="unit three-of-four cost-summary">
 <h4>Server Cost</h4>
 <dl class="line-item">
 <dt>2VPU + 4GB Memory</dt>
 <dd>$ 0.066666 / hr</dd>
 <dt>10 GB Storage Disks</dt>
 <dd>$ 0.088888 / hr</dd>
 <dt class="hide">subtotal</dt>
 <dd class="subtotal tally">$ <strong>0.155554</strong> / hr</dd>
 </dl>
 <h4>Licensing Cost</h4>
 <dl class="line-item">
 <dt >@0.00 per CPU x 1</dt>
 <dd class="subtotal">$ <strong>0.00</strong> / month</dd>
 </dl>
 </div>
</div>

Here's a codepen with the examples:

http://codepen.io/anon/pen/bAoLe

You can see that they display more or less the same, I'm interested to know what is the more semantic way of representing data like this.

Answer 1

I'd say stick with the table.

Yes, tables are frowned upon - if you use them for purely visual purposes. But this isn't "just" layout; it's information structure. And these are tabular data sets so semantically speaking tables are the right choice. There's nothing hacky about it; the table element was made for this sort of thing.

Meanwhile, dls are for terms and their definition(s). Semantically speaking, is an item defined by its cost? Eh, not quite. Of course this is a rather pedantic interpretation I'm applying, and a dl solution wouldn't be completely crazy, but still.

Flexibility is another issue: If an item only has name and cost, sure, a list will work. But what if that's not all? What if you need to add a column for the number of units ordered/in stock/shipped/whatever. Or an SKU column? Or anything else, really?

Yes, you can have multiple dd elements following a dt but you'll have to do all the layout yourself for n "pseudo-columns" of unknown content, whereas a table just works it out for you including resizing itself, wrapping text where necessary and all that. Again: It's made for this.

Think of it this way: If it wasn't a web page, and you just had to make a document, wouldn't you use a spreadsheet, or at least use table in a word processor? If yes, use a table in on the webpage too.

Other stuff:

• I'd add a thead element with th elements for column headers, and wrap the rest in a tbody
• I'd probably use a span for the total cost instead of strong. Give the span a class like cost or amount or total for styling purposes. I'm assuming you just want the price to stand out visually, but using a strong is a bit, well, strong. A span, meanwhile, doesn't imply much at all about its content. Even a good ol' b tag could be used here. b simply says "this text is bold" without implying why it's bold - which is why you don't often see the b tag anymore: no semantic purpose. But that's kinda what you want here; just some bold text for visual purposes.

• tim: The table felt hackish because of the absence of column headers - it would be imprecise to label the second column price because it also holds the subtotal, and since I'm building off of a pre-approved design I can't just add another column. Then there's that empty table cell, which I could remove and do a colspan, but then adding the top border to the subtotal cell looks weird. Even still, I was leaning towards the table because of your point about the pseudo columns with the dl. Thanks for your well thought out reply.
• Flambino: @tim It's true that headers do muddy the picture a bit. Although it depends on what you call them: "Amount" for instance works for both price and total. "Cost" would work too. As for the subtotal line, there's a tfoot section for that, which works well, semantically. I wouldn't worry too much about the empty cell; it looks odd, but it makes sense nonetheless. The tricky thing with tables is that they do define layout; they're not "purely" semantic like other elements, so they seem "wrong". Yet that's how tables work, and sometimes it's exactly what you want