Tables vs. ul / li

Question

I have been playing with different way to display data and have been looking into taking the actual data out of a table and displaying it in UL's. This gives me greater flexability in what I can do with the mark-up.

However there is one this that I'm having a think about - how do you make the row (or UL in this case) clickable?

I don't want to use any JavaScript so my first thought was something like this:

<div class="liTable">
<ul class="headerRow">
    <li class="cell col-1">title1</li>
    <li class="cell col-2">title2</li>
    <li class="cell col-3">title3</li>
    <li class="cell col-3">title4</li>
</ul>
<a href=”myURL”>
    <ul class="row">
        <li class="cell col-1">1</li>
        <li class="cell col-2">2</li>
        <li class="cell col-3">3</li>
        <li class="cell col-3">4</li>
    </ul>
</a></div>

But this mark-up is illegal because you cannot place ul's inside links.

Any ideas or suggestions on best practice for this?

Answer 1

Please put tabular data into a table and list data into lists, that's what they are for after all.

You can make any element call up a URL by adding

 onclick="location.href='http://www.example.com';"

to the tag, but be aware that there's no right-click options for this and you'll need to style the element to make it obvious it's a link.

You can test it here: http://jsfiddle.net/WguUR/

---

But would it not be enough to enclose the content of the table field in an "a" like this?

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td><a href="http://www.example.com">January</a></td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>