title: How do I implement a switchable grid/table view?
body: <p>I've been implementing a grid view of some content -  and I have it implemented as a genuine unordered list to get a nice block, visual look. Now I'm being tasked to implement the same data, but as a table. There are actions you can do on this data as well. The figure is meant to show switching, but the lists can be longer.</p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/AA5m4.png" alt="Grid/Table View"></p>
  </blockquote>
  
  <p>Now, I have a sense that I could use the existing unordered list structure, and add elements to it and then "fake" a table view, which actually doesn't seem that much harder. Or I could do it the other way, change everything to a table view then implement the grid view with CSS.</p>
  
  <p>My question is, what are some approaches to do this? I could double up my markup - implementing both, and then switching between. But in an AJAX heavy application, I'm doing twice the DOM manipulations to add this stuff.</p>
  
  <p>Is there a best practice for being able to toggle a view like this? I'm looking for ideas and working examples, especially.</p>
  
  <hr>
  
  <p>I've updated this with <a href="http://jsfiddle.net/artlung/RLqw2/" rel="nofollow noreferrer">a jsFiddle</a> showing an unordered list as the basis. Does anyone have any example CSS that uses a table as the basis? <code></code></p>