I am completely new to CSS and can not get around making tabs. We currently have tabs like this However, these tabs are made using a bad looking <table>
tag
Below is the code that produced the image in above link
<table name="incomesummarytable" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="4">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#990000"><img src="/eiv/images/left_curve.gif" alt="Left Curve" width="10" height="20"></td>
<td bgcolor="#990000"><div align="center"><font face="Verdana" size=2 color="#ffffff"><b>Summary Reports</b></font></div></td>
<td align="right" bgcolor="#990000"><img src="/eiv/images/right_curve.gif" alt="Right Curve" width="10" height="20"></td>
<td> </td>
<td bgcolor="#dddddd"><img src="/eiv/images/left_curve.gif" alt="Left Curve" width="10" height="20"></td>
<td bgcolor="#dddddd"><div align="center"><a href="javascript:submitData('View Detail Reports');" style='text-decoration: none;'><font face="Verdana" size=2 color="#000000"><b>Detail Reports</b></font></a></div></td>
<td align="right" bgcolor="#dddddd"><img src="/eiv/images/right_curve.gif" alt="Right Curve" width="10" height="20"></td>
<td> </td>
</tr>
</table>
</td>
However, I am trying to use more elegant method of jquery tabs plugin. This plugin changes div's to tabs. So I am trying to find out how to convert the tabs that I have into div's so that I can use them with the jquery tab plugin.
I would appreciate some help that would at least get me started on this.
Ideally I would like the html to be as simple as
<div id="container-1" bgcolor="#990000">
<ul>
<li ><a href="#fragment-1"><span>Summary</span></a></li>
<li ><a href="#fragment-2"><span>Detailed</span></a></li>
</ul>
<div id="fragment-1">
<p>Summary Info goes here:</p>
</div>
<div id="fragment-2">
<p>Detailed Info goes here:</p>
</div>
</div>
But I cant wrap my head around CSS that would do this.