| outer tab 1 |
|
outer tab 2 |
|
outer tab 3 |
|
outer tab 4 |
|
|
some text here
| inner tab 1 |
|
inner tab 2 |
|
inner tab 3 |
|
|
some text here
| inner-inner tab 1 |
|
inner-inner tab 2 |
|
inner-inner tab 3 |
|
inner-inner tab 4 |
|
inner-inner tab 5 |
|
|
some text here
|
|
|
|
To achieve the effect above you only need to use standard HTML (nested tables) and very basic CSS. No DHTML, colspan hacks or other gimmicks are required, making this solution very stable and browser agnostic. Obviously, this only demonstrates the static HTML part. Clicking functionality needs to be implemented by converting the tab text to links that point to whatever back end funtionality is implied and return results plus the appropriately modified tabs.
You can easily generate this kind of tabs on the back-end using recursion to repeat the nested code as marked below.
Code follows:
<style>
td.tab{
padding-left:2px;padding-right:2px;border:solid blue 1px;xborder-bottom:1px;
}
td.tab-activated{
padding-left:2px;padding-right:2px;border:solid blue 1px;border-bottom:0px;
}
td.tab-spacer{
border-bottom:solid blue 1px;
}
td.content{
padding:20px;border:solid blue 1px; border-top:0px;
}
</style>
<table width="100%">
<tr>
<td align="middle">
<table id="mainTable" cellspacing="0" cellpadding="0">
<tr>
<td align="left" id="tabs_container">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td nowrap class="tab">outer tab 1</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab-activated">outer tab 2</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab">outer tab 3</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab">outer tab 4</td>
<td width="100%" nowrap class="tab-spacer"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" width="100%" id="content_container" class="content">
some text here<br><br>
<!-- nesting start -->
<table id="mainTable" cellspacing="0" cellpadding="0">
<tr>
<td align="left" id="tabs_container">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td nowrap class="tab">inner tab 1</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab">inner tab 2</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab-activated">inner tab 3</td>
<td width="100%"nowrap class="tab-spacer"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" width="100%" id="content_container" class="content">
some text here<br><br>
<!-- nesting start -->
<table id="mainTable" cellspacing="0" cellpadding="0">
<tr>
<td align="left" id="tabs_container">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td nowrap class="tab-activated">inner-inner tab 1</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab">inner-inner tab 2</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab">inner-inner tab 3</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab">inner-inner tab 4</td>
<td nowrap class="tab-spacer"> </td>
<td nowrap class="tab">inner-inner tab 5</td>
<td width="100%" nowrap class="tab-spacer"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" width="100%" id="content_container" class="content">
some text here<br>
</td>
</tr>
</table>
<!-- nesting end -->
</td>
</tr>
</table>
<!-- nesting end -->
</td>
</tr>
</table>
</td>
</tr>
</table>
Post new comment