What's semantically correct here - a <table> or a <ul>?

Question

Let's assume you have an overview like this:

To me, this is both a table and a couple of nested lists.

What is the semantically correct way of implementing this in HTML?

Answer 1

Unlike Mike, I don't think we're dealing with tabular data here. You have nested lists of publications. Following a few guidelines (Google, html5 Doctor, ...) about authorship and publications dates; the extra data about publication you're dealing with is more likely "labels" to your content that could be styled in many ways, thus rejecting the tabular data hypothesis. I've chosen the following approach per <li> :

<span class="title">What Should I use, li or table?</span>        
<time datetime="2014-04-08T15:27Z">2d ago</time>
<address><a rel="author" href="#">John Jackson</a></address>

I reproduced your nested list in this JSFiddle, styled it as yours and styled it in a non-tabular way. You'll notice the HTML segment never changed in any of the three styling I've produced. Being able to style it like the previous Fiddles demonstrates how the HTML is semantically appropriate.

Semantics often induces different valid approaches, some of my usage might not be perfect, but the main idea should be appropriate. Let me know if this answers your question properly! :-)

Answer 2

I think some of the others are being thrown off by the bullets. This contains tabular data, so a table is fitting. The list-like styling can be easily created within table cells.

It seems to me, however, that the representation of data is entirely as a table, and the list-like structure is just to show the structure of messages (ie, by indenting replies).

Answer 3

It's a nested list. The first one is the outermost, with three items under it, some of which have lists of their own.

Essentially it could look something like this:

<ul>
  <li>What Should I use
    <ul>
      <li>Re: What Should I use </li>
      <li>I think the best option is . . .
        <ul> . . . </ul>
      </li>
    </ul>
  </li>
</ul>

To get the name and date info lined up you could probably use a float: right span element, and to prevent the li from wrapping you'd probably need to set overflow appropriately, but I think it's just a matter of formatting.