<!-- Таблица -->
<style>
#tstTable{
  border-style: solid;
  border-width: 53px 51px 51px 48px;
  -moz-border-image: url(http://s16.radikal.ru/i190/1603/53/69522075fb79.png) 53 51 51 48 repeat;
  -webkit-border-image: url(http://s16.radikal.ru/i190/1603/53/69522075fb79.png) 53 51 51 48 repeat;
  -o-border-image: url(http://s16.radikal.ru/i190/1603/53/69522075fb79.png) 53 51 51 48 repeat;
  border-image: url(http://s16.radikal.ru/i190/1603/53/69522075fb79.png) 53 51 51 48 fill repeat;
  background-color:#EBFFF7;
}
#tstTable table[id]{
  height: 290px;
  position:absolute;
  display:none;
}
#tstTable table[id] p span {
  display: inline-block;
}
.tabindex {
  height: 300px;
  width: 100%;
  position: relative;
  background: #EBFFF7;
}
#tstTable td{border:none 0 transparent !important}
.navbuttons{
  width:100%;
  text-align:center;
  margin-top: -30px;
}
</style>
 
<div id="tstTable">
 
<table class="navbuttons">
  <tr>
    <td id="btn1"><img src="Кнопка1" /></td>
    <td id="btn2"><img src="Кнопка2" /></td>
    <td id="btn3"><img src="Кнопка3" /></td>
    <td id="btn4"><img src="Кнопка4" /></td>
  </tr>
</table>
 
<div class="tabindex">
 
<table id="tbl1"><!-- 1 -->
  <tr>
    <td>
        ПЕРВАЯ ВКЛАДКА ТАБЛИЦЫ
    </td>
  </tr>
</table>
 
<table id="tbl2"><!-- 2 -->
  <tr>
    <td>
        ВТОРАЯ ВКЛАДКА ТАБЛИЦЫ ....
    </td>
  </tr>
</table>
 
<table id="tbl3"><!-- 3 -->
  <tr>
    <td>
      <p style="text-align:center">
        ТЕКСТ 3-я вкладка
      </p>
      <br/>
      <br/>
      <p style="text-align:center">
         <span style="display:inline-block;"><img src="Картинка" style="float:left" />Описание картинки</span>
      </p>
      <br/>
      <br/>
      <p style="text-align:center">
        ТЕКСТ ...
      </p>
      <br/>
      <br/>
      <p style="text-align:center">
         <span><img src="Картинка" style="display:block" />Описание картинки</span>
         <span><img src="Картинка" style="display:block" />Описание картинки</span>
         <span><img src="Картинка" style="display:block" />Описание картинки</span>
         <span><img src="Картинка" style="display:block" />Описание картинки</span>
      </p>
    </td>
  </tr>
</table>
 
<table id="tbl4"><!-- 4 -->
  <tr>
    <td>
       <center>
         <a href="ссылка">описание ссылки</a> <br/>
         <a href="ссылка">описание ссылки</a> <br/>
         <a href="ссылка">описание ссылки</a> <br/>
         <a href="ссылка">описание ссылки</a> <br/>
       </center>
    </td>
    <td>
       <center>
         <a href="ссылка">описание ссылки</a> <br/>
         <a href="ссылка">описание ссылки</a> <br/>
         <a href="ссылка">описание ссылки</a> <br/>
         <a href="ссылка">описание ссылки</a> <br/>
       </center>
    </td>
  </tr>
</table>
 
</div>
 
</div>
 
<script type="text/javascript">
$(function () {
    $("#tstTable #tbl1").fadeIn(200);
    $(".navbuttons td#btn1").addClass("active");
    $(".navbuttons td").click(function(){
        var num=$(this).attr("id");
        if(num)num=num.split("btn")[1];
        $(".navbuttons td").removeClass("active");
        $(this).addClass("active");
        $("#tstTable table[id]").fadeOut(200);
        $("#tstTable table[id='tbl"+num+"']").fadeIn(200);
    });
});
</script>

<!-- Таблица -->
<style>
#tstTable table[id]{
  height: 290px;
  position:absolute;
  display:none;
}
#tstTable table[id] p span {
  display: inline-block;
}
.tabindex {
  height: 300px;
  width: 100%;
  position: relative;
  background: #EBFFF7;
}
#tstTable td{border:none 0 transparent !important}
.navbuttons{
  width:100%;
  text-align:center;
}
.navbuttons td{
  cursor:pointer;
  font-size:1.1em;
}

/* РАМКА, - для теста */
.Wrapper_007 > tbody > tr >td, .Wrapper_007 div, .navbuttons {
  border: solid 1px #000 !important;
  padding: 5px;
}
</style>
 
<div id="tstTable">
 
<table class="navbuttons">
  <tr>
    <td id="btn1">Объявления</td>
    <td id="btn2">Игровые новости</td>
    <td id="btn3">Время и погода</td>
  </tr>
</table>
 
 
        <table class="Wrapper_007">
          <tr>

   <td style="width:250px">
     Полезные ссылки
   </td>

   <td>

<div class="tbl_head">
Приветствие
</div>
<br/>

<div class="tabindex">
 
<table id="tbl1"><!-- 1 -->
  <tr>
    <td>
        Лента новостей и объявлений
    </td>
  </tr>
</table>
 
<table id="tbl2"><!-- 2 -->
  <tr>
    <td>
        Текст вкладки   "Игровые новости"
    </td>
  </tr>
</table>
 
<table id="tbl3"><!-- 3 -->
  <tr>
    <td>
      Текст Вкладки "Время и погода"
    </td>
  </tr>
</table>
 

</div>

   </td>

   <td style="width:100px">
     <div class=ins2>
       Баннеры
 
     <br/><br/>
     </div>

     <div class=ins3>
       Жанр 
        
       <br/>
       Рейтинг
        
       <br/>
       Система игры
     </div>
   </td>

        </tr>
       </table>
 
</div>
 
<script type="text/javascript">
$(function () {
    $("#tstTable #tbl1").fadeIn(200);
    $(".navbuttons td#btn1").addClass("active");
    $(".navbuttons td").click(function(){
        var num=$(this).attr("id");
        if(num)num=num.split("btn")[1];
        $(".navbuttons td").removeClass("active");
        $(this).addClass("active");
        $("#tstTable table[id]").fadeOut(200);
        $("#tstTable table[id='tbl"+num+"']").fadeIn(200);
    });
});
</script>

<!-- Таблица -->
    <style>
    #tstTable table[id]{
      height: 290px;
      position:absolute;
      display:none;
    }
    #tstTable table[id] p span {
      display: inline-block;
    }
    .tabindex {
      height: 300px;
      width: 100%;
      position: relative;
      background: #EBFFF7;
    }
    #tstTable td{border:none 0 transparent !important}
    .navbuttons{
      width:100%;
      text-align:center;
    }
    .navbuttons td{
      cursor:pointer;
      font-size:1.1em;
    }
     
    /* РАМКА, - для теста */
    .Wrapper_007 > tbody > tr >td, .Wrapper_007 div, .navbuttons {
      border: solid 1px #000 !important;
      padding: 5px;
    }
    </style>
     
    <div id="tstTable">
     
    <table class="navbuttons">
      <tr>
        <td id="btn1">Объявления</td>
        <td id="btn2">Игровые новости</td>
        <td id="btn3">Время и погода</td>
      </tr>
    </table>
     
     
            <table class="Wrapper_007">
              <tr>
     
       <td style="width:200px">

       </td>
      - <a href=http://eidren.rolka.su/viewtopic.php?id=136>ГМ персонажи</a><br>
 - <a href=http://eidren.rolka.su/viewtopic.php?id=556>Расы</a><br>
 - <a href=http://eidren.rolka.su/viewtopic.php?id=185>Полная история Тарфо-Мортена</a><br>
 - <a href=http://eidren.rolka.su/viewtopic.php?id=399>Рыночная экономика</a><br>
 - <a href=http://eidren.rolka.su/viewtopic.php?id=412>Бестиарий</a><br>
 - <a href=http://eidren.rolka.su/viewtopic.php?id=704>Полезная информация</a><br>
- <a href=http://eidren.rolka.su/viewtopic.php?id=736>Гостевая</a> <br>
 - <a href=http://eidren.rolka.su/viewtopic.php?id=842>Помощь при регистрации</a> <br>

       <td>
     
    <div class="tbl_head">
    Добро пожаловать в Тарфо-Мортен!
    </div>
    <br/>
     
    <div class="tabindex">
     
    <table id="tbl1"><!-- 1 -->
      <div style="width: 250px; height: 100px; overflow: auto; overflow-x: hidden;">
2.02.2016<br><font size="4" face="Monotype Corsiva">В</font></b>нимание! Желающим зарегистрироваться расписана </font><br><a href=http://eidren.rolka.su/viewtopic.php?id=842>инструкция.</a>
<br><br>6.03.2016<br><font size="4" face="Monotype Corsiva">Р</font>екомендуем активным игрокам, в связи с большим количеством игровых событий, обновить информацию о персонаже в темах Отношения, Спутники, Картотека. Это же касается подписей. 
<br><br>10.04.16<br><font size="4" face="Monotype Corsiva">П</font>роводится чистка локаций и обновление дизайна форума. Просим извинения за неудобства. </div>

    </table>
     
    <table id="tbl2"><!-- 2 -->

<div style="width: 250px; height: 100px; overflow: auto; overflow-x: hidden;">
11.04.16 <br><font size="4" face="Monotype Corsiva">Р</font>оспуск круга Вуду!
В восточном крыле замка Гильдии Колдунов, где ещё не были завершены ремонтные работы, произошло обрушение. В результате него несколько этажей были крайне повреждены. Помещения располагавшегося в этом крыле круга магии Вуду были практически полностью уничтожены. Вудуисты, находившиеся внутри на момент трагедии, погибли.
Из-за понесённого ущерба и потери множества участников, круг Вуду не может продолжать свою деятельность. Магистру пришлось расформировать его.
Есть непроверенные пока свидетельства, что обрушение является результатом злонамеренной диверсии. Вероятность этого довольно высока. У круга Вуду имелось немало врагов: Мастер Круга имел противостояние с Гильдией Магов, а совсем недавно вудуистам угрожал некто, связанный с неизвестными некромантами. Также у круга Вуду имелись разногласия с внегильдейскими коллегами. Можно допустить и то, что вудуисты чем-то прогневали демонов…</div>
        </td>
      </tr>
    </table>
     
    <table id="tbl3"><!-- 3 -->
<div style="width: 250px; height: 100px; overflow: auto; overflow-x: hidden;">
      11.04.2016<br><b><font size="4" face="Monotype Corsiva">П</font></b>о всей территории Тарфо-Мортена душно, намечаются грозы. На севере - мелкий снег с дождем.</div>
        </td>
      </tr>
    </table>
     
       <td style="width:100px"> 
         <div class=ins2>
          <center>
<a href="http://forum-top.ru/vote/3625" title="Рейтинг форумов Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_3.gif" alt="Рейтинг форумов Forum-top.ru" /></a>

<!-- Top.Roleplay.Ru -->
<script type="text/javascript" language="javascript">
var topRPGc="<img src='http://top.roleplay.ru/cgi-bin/iv.cgi?a=ins&id=22505&rnd=" + Math.random();
topRPGc += "&r="+escape(document.referrer)+"' width='1' height='1' border='0'><a href='http://top.roleplay.ru/22505' title='Рейтинг Ролевых Ресурсов - RPG TOP' target='top_'>"+
"<img src='http://img.rpgtop.su/rpgtop1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> ";
document.write(topRPGc);
</script>
<noscript>
<img src='http://top.roleplay.ru/cgi-bin/iv.cgi?a=ins&id=22505' width='1' height='1' border='0'><a href='http://top.roleplay.ru/22505' target='_top'><img src='http://img.rpgtop.su/rpgtop1.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a>
</noscript>
<!-- /Top.Roleplay.Ru -->

<a title="Каталог фэнтези сайтов Палантир" href='http://palantir.in/?from=18188' target='_blank'>	
<script type="text/javascript">
Md=document;Mnv=navigator;
Mrn=Math.random();Mn=(Mnv.appName.substring(0,2)=="Mi")?0:1;Mp=0;Mz="p="+Mp+"&";
Ms=screen;Mz+="wh="+Ms.width+'x'+Ms.height;My="<img src='http://palantir.in/count.php?id=18188&today_hosts=1&total_hosts=1&cid=valar2006.png";My+="&cntc=none&rand="+Mrn+"&"+Mz+"&referer="+escape(Md.referrer)+'&pg='+escape(window.location.href);My+="'  alt='Palantir' title='Каталог фэнтези сайтов Палантир' border='0' width='88px' height='31px'>";Md.write(My);</script>
<noscript><img src="http://palantir.in/count.php?id=18188&today_hosts=1&total_hosts=1&cid=valar2006.png" alt='Palantir' title="Каталог фэнтези сайтов Палантир" border=0 width="88px" height="31px">

</noscript>
</a>
</center>

     
         <br/><br/>
         </div>
     
         <div class=ins3>
           <center><b><font size="4" face="Monotype Corsiva">Ж</font>анр:</b> фэнтези <br><br>
<b><font size="4" face="Monotype Corsiva">Р</font>ейтинг:</b> NC-17 (18+). <br><br>
<b><font size="4" face="Monotype Corsiva">С</font>истема игры:</b> локационная. <br><br></center>

         </div>
       </td>
     
            </tr>
           </table>
     
    </div>
     
    <script type="text/javascript">
    $(function () {
        $("#tstTable #tbl1").fadeIn(200);
        $(".navbuttons td#btn1").addClass("active");
        $(".navbuttons td").click(function(){
            var num=$(this).attr("id");
            if(num)num=num.split("btn")[1];
            $(".navbuttons td").removeClass("active");
            $(this).addClass("active");
            $("#tstTable table[id]").fadeOut(200);
            $("#tstTable table[id='tbl"+num+"']").fadeIn(200);
        });
    });
    </script>">

<style>
#WRP{
  width:700px;
  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(https://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat;
}
td#a2 {
  background: url(https://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat;
}
td#a3 {
  background: url(https://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;;
}
td#a4 {
  background: url(https://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 0px no-repeat;
}
/*Фон активных кнопок или при наведении(не делал позиционирование)*/
td#a1:hover,
td#a1.active {
  background: url(https://forumstatic.ru/files/0016/e3/8a/46417.png) -946px 0px no-repeat;
}
td#a2:hover,
td#a2.active {
  background: url(https://forumstatic.ru/files/0016/e3/8a/46417.png) -1046px 0px no-repeat;
}
td#a3:hover,
td#a3.active {
  background: url(https://forumstatic.ru/files/0016/e3/8a/46417.png) -1166px 0px no-repeat;;
}
td#a4:hover,
td#a4.active {
  background: url(https://forumstatic.ru/files/0016/e3/8a/46417.png) -1276px 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:498px;
  width:504px;
  overflow-x:hidden;
  overflow-y:auto;
  left:173px;
  top:-8px;
  margin:auto!important;
  margin-top:0!important;
  background: #FFDB46;
  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;
}
</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">Content кнопки sdddddddddddddddddddddddd</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>