Is there a more semantic way to markup Price Lists? Example as Table and as Description List 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

&lt;div class="wrapper"&gt;
    &lt;div class="unit three-of-four cost-summary"&gt;
        &lt;table class="pricing-table"&gt;
            &lt;caption&gt;Server Cost&lt;/caption&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        2VPU + 4GB Memory
                    &lt;/td&gt;
                    &lt;td&gt;
                        $ 0.066666 / hr
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        10 GB Storage Disks
                    &lt;/td&gt;
                    &lt;td&gt;
                        $ 0.088888 / hr
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr &gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td class="subtotal tally"&gt;
                        &lt;strong&gt;$0.155554&lt;/strong&gt; / hr
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;

        &lt;table class="pricing-table"&gt;
            &lt;caption&gt;Monthly Licensing Cost&lt;/caption&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    @0.00 per CPU x 1
                &lt;/td&gt;
                &lt;td class="subtotal"&gt;
                    $ &lt;strong&gt;0.00 &lt;/strong&gt;/ month
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- end wrapper --&gt;




As a description list

&lt;div class="wrapper"&gt;
    &lt;div class="unit three-of-four cost-summary"&gt;
        &lt;h4&gt;Server Cost&lt;/h4&gt;
        &lt;dl class="line-item"&gt;
            &lt;dt&gt;2VPU + 4GB Memory&lt;/dt&gt;
            &lt;dd&gt;$ 0.066666 / hr&lt;/dd&gt;
            &lt;dt&gt;10 GB Storage Disks&lt;/dt&gt;
            &lt;dd&gt;$ 0.088888 / hr&lt;/dd&gt;
            &lt;dt class="hide"&gt;subtotal&lt;/dt&gt;
            &lt;dd class="subtotal tally"&gt;$ &lt;strong&gt;0.155554&lt;/strong&gt; / hr&lt;/dd&gt;
        &lt;/dl&gt;

        &lt;h4&gt;Licensing Cost&lt;/h4&gt;
        &lt;dl class="line-item"&gt;
            &lt;dt &gt;@0.00 per CPU x 1&lt;/dt&gt;
            &lt;dd class="subtotal"&gt;$ &lt;strong&gt;0.00&lt;/strong&gt; / month&lt;/dd&gt;
        &lt;/dl&gt;

    &lt;/div&gt;
&lt;/div&gt;


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.
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.