How To Create A Table With Switching Tab Content?

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'

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

Solution 2:

People usually call those tabs. You can find an example in this link.