<style> 
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background:  url(http://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>

<style>
#WRP{
  width:850px;
  margin:14px auto!important;
  border: 10px solid transparent;!important;
  -moz-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round;
  -webkit-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round; 
  -o-border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round;
  border-image: url(http://funkyimg.com/i/2bG7M.png) 9 round round;
}
#MyTbl {
  background-color:#E9DEC2!important;
  border-collapse:collapse;
}
#MyTbl>tbody>tr.a1{
  height:46px;
}
#MyTbl td{
  border:rgba(121,41,23, 0.8) solid 2px;
}
#MyTbl td{
  cursor:pointer;
}
#MyTbl>tbody>tr>td.no-pointer{
  cursor:default;
}
td#a1 {
  background: url() -946px 0px no-repeat;
}
td#a2 {
  background: url(http://forumstatic.ru/files/0017/91/66/20884.png) 0px 0px no-repeat;
}
td#a3 {
  background: url(http://forumstatic.ru/files/0017/91/66/75978.png) 0px 0px no-repeat;;
}
td#a4 {
  background: url(http://forumstatic.ru/files/0017/91/66/17845.png) 0px 0px no-repeat;
}
/*Фон активных кнопок или при наведении(не делал позиционирование)*/
td#a1:hover,
td#a1.active {
  background: url() -946px 0px no-repeat;
}
td#a2:hover,
td#a2.active {
  background: url(http://forumstatic.ru/files/0017/91/66/52128.png) 0px 0px no-repeat;
}
td#a3:hover,
td#a3.active {
  background: url(http://forumstatic.ru/files/0017/91/66/82675.png) 0px 0px no-repeat;;
}
td#a4:hover,
td#a4.active {
  background: url(http://forumstatic.ru/files/0017/91/66/42351.png) 0px 0px no-repeat;
}
 
.td-cnt .cnt{
 display:none;
 height:498px;
 padding:8px;
 overflow-x:hidden;
 overflow-y:auto
}
.td-cnt .cnt:first-child{
 display:block;
}
#MyTbl-2 td{
  background: #E9DEC2;
}
#MyTbl-2{
  margin:0;
}
tr.wind,
td.wind {
  text-align:center;
  position:relative;
  z-index:0;
  padding:0;
  margin:0;
}
div.wrp-12{
  height:502px;
  padding:0;
  position:relative;
  z-index:0;
  margin:0!important;
}
#MyTbl-2 td>.cnt2{
  padding:8px;
  position:absolute;
  border:#835508 2px solid;
  border-radius:4px;
  height:512px;
  width:615px;
  overflow-x:hidden;
  overflow-y:auto;
  left:200px;
  top:-14px;
  margin:auto!important;
  margin-top:0!important;
  background: url(http://forumstatic.ru/files/0017/91/66/79922.jpg) top center repeat;
  box-shadow:rgba(0,0,0,.7) 0 0 2em, inset rgba(0,0,0,.7) 0 0 1em;
  display:none;
}
#MyTbl-2 td.active{
  z-index:100;
  background:#BFF2B2;
}
#MyTbl-2 td.active .cnt2{
  display:block;
}
#IKissa td {
border:0 none!important;
}
</style>
<div id=WRP>
<table id="MyTbl" width=700>
    <tr width=25% class=a1>
        <td id="a1" class=active></td>
        <td id="a2"></td>
        <td id="a3"></td>
        <td id="a4"></td>
    </tr>
    <tr class="wind">
<td width=25% height="500" class="no-pointer wind">
<div class="wrp-12">
<table id="MyTbl-2" height="100%" width="100%" align=center>
    <tr>
<td> Имя кнопки
<div class="cnt2">
<table border="1">
<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> 
</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
</tr>
    <tr>
<td> Имя кнопки
<div class="cnt2">Content кнопки</div>
</td>
    </tr>
</table></div>
</td>
<td  colspan="3" class="no-pointer td-cnt" valign=top>
<!-- Cекция контента кнопок верхнего ряда -->
<div class=cnt><!-- Контент 1-ой кнопки --> ывлаодлфыовадфывлаофдлваоылдвао</div>
<div class=cnt><!-- Контент 2-ой кнопки --> 2</div>
<div class=cnt><!-- Контент 3-ой кнопки --> 3</div>
<div class=cnt><!-- Контент 4-ой кнопки --> 4</div>
</td>
    </tr>
</table></div>
 
 
<script type="text/javascript">
$(function() {
  var $Kn = $('tr.a1>td');
  var $cnt = $('.td-cnt>.cnt');
 
  $Kn.click(function() {
    $Kn.removeClass('active');
    $Kn2.not(this).removeClass('active');
    $(this).addClass('active');
    var I = $Kn.index(this);
    $cnt.hide().eq(I).show();
  });
 
  var $Kn2 = $('#MyTbl-2 td');
  var $cnt2 = $('#MyTbl-2 td .cnt2');
 
  $Kn2.click(function() {
    if($(this).hasClass('noClick')) return false;
    $Kn2.not(this).removeClass('active');
    $(this).toggleClass('active');
  });
  $cnt2.click(function() {
    var $td = $(this).parent('td');$td.addClass('noClick');
    setTimeout(function(){$td.removeClass('noClick')},21);
  });
 
});
</script>