How to create a table with switching tab content?

Question

I want to make a table looks like this:

The inside table is not an issue but don't know how to create the outer frame which includes "Item Descriptions", "Shipping", and "Returns" tabs. A minimal example would be greatly appreciated. Thank you.

Answer 1

You could certainly use jQuery to solve this. That's what I did when I needed some tabs. I did something like:

<ul>
   <li><a href="#tab-description">Description</a></li>
   <li><a href="#tab-shipping">Shipping</a></li>
   <li><a href="#tab-returns">Returns</a></li>
</ul>
<div id="tab-description" class="mytabs">
</div>
<div id="tab-shipping" class="mytabs">
</div>
<div id="tab-returns" class="mytabs">
</div>

and then some jQuery to make the tabs:

<script language="javascript" type="text/javascript">
   $(document).ready(function () {
      $("#mytabs").tabs({ fx: {opacity: 'toggle'} });
   });
</script>

works pretty nicely for me. Just fill in whatever your content is in each of the divs.