<style>
#menu {margin: 0px;}

#menu span {
padding: 0px;
margin: 0px;
width: 155px;}

#submenu {
padding: 0px;
width: 600px;
height: 200px;
background: transparent url(http://s019.radikal.ru/i607/1203/8a/2b75d1e87da2.jpg) center no-repeat;}

.submenutext {
display: none;
text-align: center;
width: 580px;
height: 198px;}
</style>

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 480;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // С помощью скрипта убираем прокрутку в контейнере.
  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner 
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
    // Скрыть левую стрелку у первого контейнера
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Скрыть правую стрелку у последнего контейнера
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

<center><table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
 <tbody>
  <tr height="50">
   <td align="center">
    <div id="menu">
<span alt="#sm1" style="cursor: pointer;"><img src="http://s019.radikal.ru/i635/1203/bd/73a6ec48b7ac.jpg"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://s019.radikal.ru/i607/1203/40/8eff7bbe048b.jpg"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://s019.radikal.ru/i611/1203/73/043fefa3bdb6.jpg"></span>
<span alt="#sm4" style="cursor: pointer;"><img src="http://s019.radikal.ru/i621/1203/7c/3a779c31886c.jpg"></span>
    </div>
   </td>
  </tr>
  <tr height="200">
   <td id="MenuTxT" align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<!-- Cлайдер-->
<style type="text/css">
#slideshow {
margin:0 auto;
width:560px;
height:190px;
background-color: transparent;
position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:480px;
  height:190px;
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:460px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  overflow-y:auto; /* поддержка прокрутки */
  height:190px;
}
.control {
  display:block;
  width:25px;
  height:30px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:100;
}
#leftControl {
  top:80px;
  left:0;
  background:transparent url(http://uploads.ru/i/U/H/5/UH5yj.png) no-repeat 0 0;
}
#rightControl {
  top:80px;
  right:0;
  background:transparent url(http://s019.radikal.ru/i635/1203/18/d93e2c5a1eb4.png) no-repeat 0 0;
}
</style>
<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
<table style="width: 100%; height: 100%;" border="0" cellpadding="8" cellspacing="0">
<tr>
<td style="width: 50%;" align="left" valign="top">

Текст левой колонки

</td>
<td style="width: 50%;" align="left" valign="top">

Текст правой колонки

</td>
</tr>
</table>
</div>
<div class="slide">
<table style="width: 100%; height: 100%;" border="0" cellpadding="4" cellspacing="0">
<tr>
<td style="width: 33%;" align="center" valign="top">
<img src="http://s019.radikal.ru/i604/1203/b8/68a9d533d66a.png">
<br/><br/>
<img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар">
<br/>
<img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар">

</td>
<td style="width: 33%;" align="center" valign="top">

Текст центр. колонки

</td>
<td style="width: 33%;" align="center" valign="top">
<img src="http://s019.radikal.ru/i619/1203/87/7f7c1781c301.png">
<br/><br/>
<img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар">
<br/>
<img style="width: 65px; height: 65px;" src="аватар"> <img style="width: 65px; height: 65px;" src="аватар">

</td>
</tr>
</table>
</div>
</div></div><!--End// Cлайдер-->

</div>
     <div id="sm2" class="submenutext">
<table style="width: 100%; height: 100%;" border="0" cellpadding="8" cellspacing="0">
<tr>
<td style="width: 50%;" align="left" valign="top">

Текст левой колонки

</td>
<td style="width: 50%;" align="left" valign="top">

Текст правой колонки

</td>
</tr>
</table>
</div>
     <div id="sm3" class="submenutext"><br/>

Контент третьей кнопки

</div>
     <div id="sm4" class="submenutext"><br/>

Контент четвертой кнопки

</div>
</td>
</tr>
</tbody>
</table></center>