[block=class][/block] 

<style type="text/css">
/******************************************************************
  Cтиль:"таблица с вкладками"
******************************************************************/

/*Правки для Цвета фона и бордюров таблицы*/
.s-tabs>.stab,.s-tabs>span{
background:#F7F6D2;
border-color: #7E7E7E!important;
border:none !important;
}
.s-tabs{
width:799px; /*ширина таблицы*/
height:350px;
display:block;
padding:0px 27px 55px;
align-content: center !important;
border: none;
background: white;
}
.s-tabs>.stab{
height:350px; /*высота вкладки*/
left: -10px !important;
align-content: center !important;
}
/* Стиль "Ушка" вкладок */
.s-tabs>span{
position:relative;
z-index:100;
color:#626436;
cursor:pointer;
border: 1px solid;
display:inline-block;
padding:4px;
height: 17px;
width:259px;
margin:0;
margin-right:-1px;
text-align:center;
padding-right:4px;
text-shadow: 1px 1px 2px rgba(0,0,0,.4);
font: italic normal 400 13px/16.5px "Comic Sans Ms";
border: none !important;
}
/* Активное "Ушко" */
.s-tabs>span.selected{
color:#fff;
background:#000;
border-bottom-color:transparent!important;
}
/* Стиль вкладки(LI)*/
.s-tabs>.stab{
width:100%;
margin:0;
display:none;
text-align:center;
vertical-align:middle;
border:  4px solid;
left: -100px !important;
padding: 0px 0px!important;

}
</style>
<ul class="s-tabs">
    <span>Новости</span><span>Соревнования</span><span>События</span>
    <li class="stab">
    <!-- Ваш контент 1--> 
    <table  class="table-1ob">
    <tr>
        <td colspan="2" rowspan="2">
            <div class="igrok-m-blok">
            <div class="month-igrok-block" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" >
            <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > </div>
        </td>
    <td rowspan="2" colspan="2" class="celebretes">ячейка 3+11+4+12</td>
    <td rowspan="2" colspan="2" class="raspredelenie">ячейка 5+13+6+14</td>
    <td rowspan="5" colspan="2" class="news">ячейка 7+15+23+31+39+8+16+24+32+40</td>
    </tr>
    <tr class="nol">
    </tr>
    <tr>
        <td colspan="2" class="nav-blok">
             <div class="ssilka-block">
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
            <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" >
        </div>
            
        </td>
    <td colspan="4" class="citats">
        
        <div><style>#КонтентРотатор p{display:none}</style>
<div id="КонтентРотатор" style="width:400px;"><!-- Ротатор произвольного контента -->
<p>1-й Контент</p>
<p>2-й Контент</p>
<p>3-й Контент</p>
<p>4-й Контент</p>
<p>N-й Контент</p>
</div>

<script language="javascript">
var sek = 50000;  // Время отображения

var Nrout=$("#КонтентРотатор p").length
var i=Math.round(Math.random()*(Nrout-1));RotatorMycontent(i);
function RotatorMycontent(i) {
$("#КонтентРотатор p").hide();
$("#КонтентРотатор p").eq(i).show();
j =Math.round(Math.random()*(Nrout-1));
timerID = setTimeout("RotatorMycontent(j)",sek);}
</script></div>

    </td>
    </tr>
    <tr>
    <td colspan="4" rowspan="2" class="ep-blok">
         <div class="epizod-block">
            <img  src="https://i.ibb.co/Wy8mp0Q/126-41.jpg" >
            <img  src="https://i.ibb.co/LR3kSDg/126-41-1.jpg" >
        </div>
        <div class="poisk-pers">
            <img  src="https://i.ibb.co/DfWXRst/35-35.jpg" >
            <img  src="https://i.ibb.co/DfWXRst/35-35.jpg" >
            <img  src="https://i.ibb.co/DfWXRst/35-35.jpg" >
            <img  src="https://i.ibb.co/DfWXRst/35-35.jpg" >
        </div>
        <div class="rotator"> 
        
<style>#КонтентРотатор p{display:none}</style>
<div id="КонтентРотатор" style="width:400px;"><!-- Ротатор произвольного контента -->
<p>
<a href="http://ilvermornysayre.mybb.ru"target=_blank><img src="http://images.vfl.ru/ii/1596708852/e72333e3/31268707.gif" alt= "Llvermorny Sayre" border="0"></a>
</p>
<p>
<a href="https://darkness.rolfor.me/" title="Marauders: Deep Into Darkness" target=_blank><img src="http://forumstatic.ru/files/001b/02/f2/80712.gif"></a>
</p>
<p>
<a href="http://explodingsnaps.mybb.ru/"target=_blank><img src="https://i.imgur.com/tgw06aU_d.webp?maxwidth=640&shape=thumb&fidelity=medium" alt= "HP: UNFETTERED" height="31" width="88" border="0"></a>

</p>
<p>
<a href="http://imperiumaeternum.rolka.me/" target="_blank"><img src="https://i.imgur.com/WX5beWm.gif" title="Imperium Aeternum"></a>
</p>
<p>
<a href="https://top.mail.ru/jump?from=3214323">
<img src="https://top-fwz1.mail.ru/counter?id=3214323;t=478;l=1" style="border:0;" height="31" width="88" alt="Top.Mail.Ru" /></a>
</p>
<p>
<a href="https://somethingold.f-rpg.me"><img src="https://i.imgur.com/D49Emq1.gif" title="DOCTOR WHO, OR THERE AND BACK AGAIN" width="88" height="31"></a>

</p>
<p>
<a href="https://eiriamach.rusff.me/" target="_blank"><img src="http://forumstatic.ru/files/001b/0a/fd/24883.jpg" title="Éirí Amach – ролевая игра по миру ГП. 1968 год, независимость Магической Ирландии!" width="88" height="31"></a>
</p>

 <p>
<a href="http://insideout.mybb.ru/" target=_blank><img src="https://i.imgur.com/0inOxfi.png" title="Inside Out"></a> 
 </p>

<p><a href="http://ouatuntold.rusff.me/" target="blank"><img src="http://sh.uploads.ru/xuIB9.gif" class="" width="88" height="31"></a></p>

</div>

<script language="javascript">
function Rotator_cont(selek) {
var s = 10000;  // Время отображения
var N=$(selek).length;
var i=Math.round(Math.random()*(N-1));Rotator(i);

function Rotator(i) {
$(selek).hide();$(selek).eq(i).show();i++;
if(i>N-1){i=0};
timerId01=setTimeout(function(){Rotator(i)},s);return;}
}Rotator_cont('#КонтентРотатор p')
</script>
        </div>
        
        
    </td>
    <td rowspan="2" colspan="2" class="admin-blok">ячейка 29+37+30+38</td>
    </tr>
    </table>
    </li>
 <li class="stab">
    <!-- Ваш контент 2-->
<table class="table-2ob">
<tr> 
<td class="facult" rowspan="2">Баллы факультетов</td> 
<td class="top5">Топ 5 лучших студентов</td> 
<td class="dekansb" rowspan="2">Деканы блок
<div class="dekans">
    <a class="slyzerin" target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a>
    <a class="grifindor" target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a>
    <a class="reyvenklo"  target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a>
    <a class="hufflpuff" target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a>
    <div class="zurnal"></div>
</div>

</td> 
</tr>
<tr><td class="somes">Что-то</td></tr>
</table>

</li>




    
    <li class="stab">
    <!-- Ваш контент 3-->
    <div class="table-3ob" >

<div class="blokzag">
<div class="zaglavie" colspan="3" >Заглавье</div>
</div>
<div class="bloksob1">
    
<div class="films" rowspan="2" >
<h5>Кино</h5>
Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
<br>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

</div>
</div>

<div class="bloksob">
<div class="ivents" rowspan="2" >
<h5>Ивенты</h5>
Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
<br>

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

</div>
</div>

<div class="bloksob2">
<div class="celebrates" rowspan="2">
<h5>Праздники</h5>
Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
<br>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
</div>
</div>
    </li>
    </ul>
    <script type="text/javascript">
$('.s-tabs').each(function(){
   $(this).children('span:first').addClass('selected');
   $(this).children('.stab').eq(0).show();   
});
$('.s-tabs>span').live('click', function(){
     var a = $(this).parent('.s-tabs');
     var arr = a.children('span');
     var index = arr.index(this);
     arr.removeClass('selected');
     $(this).addClass('selected');
     a.children('.stab').hide();   
     a.children('.stab').eq(index).show();   
});
</script>


    <style type="text/css">
    .nol{
    width: 0px;
    height: 0px;
    }
    .ssilka{
     padding: 1px;
     margin: 1.5px;
    }
    
   .month-igrok{
       padding:5px;
   }  
   
      .month-igrok-block{
       padding:5px;
   }  
    
    .table-1ob{
width: 799px;
height: 350px;
padding:17px;
background: #000000;
}

.admin-blok{
width: 248px;
height: 97px;
background: #300F0F;
}

.igrok-m-blok{
width: 210px;
height: 105px;
background: #D34E4E;
margin-top:-33px;
}

.ep-blok{
width: 279px;
height: 97px;
background: #01F0B7;
}

.epizod-block1{
    margin: 8px 6px 48px 147px;
}
.epizod-block2{
    margin: 8px 145px 48px 8px;
}

.epizod-block{
        position:relative;
}
.poisk-pers{
       margin-top:5px; 
       margin-bottom:8px;
}
.rotator{
        margin-left:190px;
} 

.nav-blok{
width: 208px;
height: 106px;
background: #FF8717;
margin-top:-38px;
margin-left:1px;
display:grid;
}

.citats{
width: 317px;
height: 68px;
background: #FFFFFF;
}
.celebretes{
width: 158px;
height: 135px;
background: #BE1717;
}

.raspredelenie{
width: 160px;
height: 135px;
background: #29B748;
}

.news{
width: 222px;
height: 316px;
background: #9D7070;
}
    .table-2ob{
    width: 799px;
    height: 350px;
    background: #000000;
}
.facult{
    width: 249px;
    height: 350px;
    background: #FFE70C;
}
.dekans{
    width: 250px;
    height: 191px;
    background: #08158F;
    margin: 75px 25px;
    padding: 9px;
    
}

.slyzerin{
    margin: 12px 9px 153px 214px;
}
.grifindor{
    margin: 47px 214px 118px 9px;
}
.reyvenklo{
    margin: 82px 9px 83px 214px;
}
.hufflpuff{
    margin: 117px 214px 48px 9px;
}

.zurnal{
    width: 240px;
    height: 18px;
    background: #C4C4C4;
    margin: 15px 19px 15px 5px;
}


.top5{
    width: 249px;
    height: 175px;
    background: #FB0FC7;
}
.dekansb{
    width: 303px;
    height: 350px;
    background: #C4C4C4;
}
.somes{
    width: 249px;
    height: 175px;
    background: #0EFFF1;
}
</style>

 <style type="text/css">
    .table-3ob{
    width: 755px;
    height: 350px;
    background: #090000;
    padding:22px;
    text-align: center;
}

.zaglavie{
    background: #C4C4C4;
    text-align: center;
    height: 48px;
    width: 417px;
  }
  
.blokzag{
    margin: 0px 165px 22px;
}

.bloksob{
    margin-top: -236px;
}
.bloksob2{

    margin-top: -236px;
    margin-left: 209px;
}

.films{
    width: 202px;
    height: 236px;
    background: #FF0C0C;
    text-align: center;
    overflow-y: auto;
    margin-left: -10px;
 }
.ivents{
    width: 351px;
    height: 236px;
    background: #C4C4C4;
    text-align: center;
    margin: -13px 202px;
    overflow-y: auto;
}
.celebrates{
    width: 202px;
    height: 236px;
    background: #7D0B0B;
    text-align: center;
    margin: -13px 354px;
    overflow-y: auto;
}
</style>