<style>
#pun-announcement table.main {
    width: 800px;
    margin: 0 auto;
    border-spacing: 0;
}
#pun-announcement table.main th {
    width: 25%;
    cursor: pointer;
    font-weight: normal;
    border: 1px solid black;
}
#pun-announcement table.main th.clicable:hover, #pun-announcement table.main th.clicable.active {
    font-weight: bold;
}
#pun-announcement table.main > tbody > tr > td {
    padding: 0;
    border: 1px solid black;
}
#pun-announcement table.main th div {
    display: none;
}
#pun-announcement table.main tbody div.content {
    height: 315px;
    text-align: center;
}
#pun-announcement table.main tbody div.content ul li {
    border: 1px solid black;
    margin-bottom: 2px;
}

#pun-announcement table.main tbody div.content > table { width: 100%; height: 100%; }
.scroll { overflow-y: auto; height: 100%; border: 1px solid black }
img.ava { width: 75px; height: 75px; margin: 0 10px; }
</style>

<table class="main"><thead><tr>
<th>Объявления</th>
<th class="clicable active"><span>Начало</span>
<div>
Картинка или видео.
</div></th>
<th class="clicable"><span>Форум</span>
<div><table><tr><td>
<embed src="http://chasikov.net.ru/flash/animals/cat/cat_3.swf" width="170" height="152" wmode="transparent" type="application/x-shockwave-flash"></embed>
</td>
<td><h6>Полезные ссылки</h6>
<ul>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=70">Магазин</a></li>
<li><a href="http://kotak.0pk.ru/viewtopic.php?id=65#p87">Как стать членом клуба</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=96">Игры</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=75">Способности и привычки кошек</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=28">Котята</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=72">Здоровье кошек</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=24">Породы</a></li>
<li><a href="http://kotak.0pk.ru/viewforum.php?id=30">Статьи о кошках</a></li>
</ul>
</td><td>
    <iframe name="Calendar" src="http://avatarochka.ru/Calendar2/Calend.html" height="120" width="120" scrolling="no" frameborder="0"></iframe>
</td>
</tr></table></div></th>
<th class="clicable"><span>Актив недели</span>
<div>
<h6>Администраторы</h6>
<img src="http://s52.radikal.ru/i136/1211/4a/a92db757ebad.gif" class="ava" />
<img src="http://s019.radikal.ru/i615/1211/8a/50eeee48172c.jpg" class="ava" />
<img src="http://s017.radikal.ru/i403/1211/71/44924cfbff0d.gif" class="ava" />

<h6>Модераторы</h6>
<img src="http://s08.radikal.ru/i181/1211/65/9f6764cdc3c3.jpg" class="ava" />
<img src="" class="ava" />
<img src="" class="ava" />

<h6>Дизайнер</h6>
<img src="" class="ava" />
</div></th></tr></thead>

<tbody><tr>
<td><div class="scroll">Контент объявлений</div></td>
<td colspan=3><div class="content"></div></td></tr></table>

<script>
function announcementMoveTo(index) {
    $('#pun-announcement table.main th.clicable').eq(index).trigger('click');
}
$('#pun-announcement table.main th.clicable').click(function() {
    $('#pun-announcement table.main th').removeClass('active');
    $("#pun-announcement table.main tbody div.content")
        .fadeOut('slow', function() { $(this).html($('#pun-announcement table.main th.active > div').html()); })
        .fadeIn('slow');
    $(this).addClass('active');
}).filter('.active').trigger('click');
</script>

<style>
.rootAnn {
    width: 50%;
}
#pun-announcement table/*, #slider #main*/ {
    width: 100%;
}
#slider {
    margin: 0 auto;
}
#slider #main {
    height: 200px;
}
#slider .bx-window {
    border: 1px solid black;
}
a.pager-link, a.bx-prev, a.bx-next, a.bx-start {
    display: inline-block;
    pointer: cursor;
    margin: 0 5px;
    width: 30px;
    height: 25px;
    padding-top: 5px;
    border-radius: 15px;
    background: #374C64;
    font: normal 13px Verdana;
    color: whitesmoke;
    text-decoration: none;
}
a.pager-link.pager-active {
    background: #44678E; cursor: auto;
}
a.pager-link:hover, a.bx-prev:hover, a.bx-next:hover, a.bx-start:hover {
    background: #6289B4;
}
</style>

<table><tr><td class="rootAnn">
<h3>Объявления</h3>
<p>Объявление 1</p>
<p>Объявление 2</p>
<p>Объявление 3</p>
<p>Объявление 4</p>
</td><td class="rootAnn">
<table id="slider"><tr><td id="prev"></td>
<td><div id="main">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div></td>
<td id="next"></td>
</tr><tr></table>
</td></tr></table>

<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<script>
$('#slider #main').bxSlider({
    prevSelector: '#slider #prev',
    prevText: '<',
    nextSelector: '#slider #next',
    nextText: '>',
    pager: false,
    auto: false
});
</script>