Таблица с переключаемыми вкладками
Таб-контейнер с возможностью оформления вида каждой вкладки и вида переключаемых кнопок, включённой кнопки и неактивных кнопок на текущей вкладке, общей фоновой картинкой в размер всей таблицы и т.д.

Автор: Deff
Платформа: любая
Демо:
[html]        <!-- Стиль меню таблицы в объявлении -->
        <style type="text/css">
        /****************************************
           Таблица с переключаемыми Вкладками

        ****************************************/
        #tab2,#tab2*{
          paddibg:0;
          margin:0;
        }
        #tab2 {
          background:transparent url(http://s2.uploads.ru/Eu9Vt.png) 0 0 no-repeat;
          height:286px;
          width:790px;
          outline:solid red 1px;/* Убираем Строку после настройки*/
        }
        #tab2,#tab2 td{
          border:none 0 transparent!important;
          border-collapse:collapse;
        }
        img[data^="tab"]{
          cursor:pointer;
          height:100%;
          outline:solid red 1px;/* Убираем Строку после настройки*/
          border:none 0 transparent!important;
        }
        .tab-content {
          display:none;
          width:100%;
          height:226px;
          outline:solid blue 1px;/* Убираем Строку после настройки*/
          color:#fff;
          overflow-y:auto;
        }
        </style>
        <script type="text/javascript">
        $.fn.switch_tabs = function() {
          var tbl = this,knopK = $("img[data^='tab']",tbl);
          knopK.each(function(){
            var arr = $(this).attr('data').split(",");
            $(this).css("background-image","url("+arr[1]+")")
          }); knopK.css("background-position","120% 10000px")
              knopK.css("background-repeat","no-repeat")

          knopK.click(function(){
            knopK.removeClass('active');
            $(this).addClass('active');
            var arr = $(this).attr('data').split(",");
            tbl.css("background-image","url("+arr[1]+")")
            $(".tab-content",tbl).hide();
            $("#"+arr[0]+"",tbl).show();
          });
        }
        </script>
    <table id="tab2" class="tbl-0" border="0">
    <tr>
    <td class="butt" valign=center height=40>   <!-- Секция кнопок -->
    <img width="195" data="tab-1,http://s2.uploads.ru/Eu9Vt.png"  src="/i/blank.gif" class="active"/>
    <img width="238" data="tab-2,http://s2.uploads.ru/IR1f9.png"  src="/i/blank.gif"/>
    <img width="135" data="tab-3,http://s3.uploads.ru/SolKv.png"  src="/i/blank.gif"/>
    <img width="60" data="tab-4,http://s2.uploads.ru/HeSUV.png"  src="/i/blank.gif"/>
    </td>
    </tr>
    <tr>
    <td  class="content" align=center>
    <!-- Контейнер контента 1-й кнопки -->
    <div id="tab-1" class="tab-content"  style="display:block;">

    Контент 1-й кнопки

    </div>

    <!-- Контейнер контента 2-й кнопки -->
    <div id="tab-2" class="tab-content">

    Контент 2-й кнопки

    </div>

    <!-- Контейнер контента 3-й кнопки -->
    <div id="tab-3" class="tab-content">

    Контент 3-й кнопки

    </div>

    <!-- Контейнер контента 4-й кнопки -->
    <div id="tab-4" class="tab-content">

    Контент 4-й кнопки

    </div>

    </td>
    </tr>
    </table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->
[/html]

Скрипт и стиль

<!-- Стиль меню таблицы в объявлении -->
        <style type="text/css">
        /****************************************
           Таблица с переключаемыми Вкладками

        ****************************************/
        #tab2,#tab2*{
          paddibg:0;
          margin:0;
        }
        #tab2 {
          background:transparent url(http://s2.uploads.ru/Eu9Vt.png) 0 0 no-repeat;
          height:286px;
          width:790px;
          outline:solid red 1px;/* Убираем Строку после настройки*/
        }
        #tab2,#tab2 td{
          border:none 0 transparent!important;
          border-collapse:collapse;
        }
        img[data^="tab"]{
          cursor:pointer;
          height:100%;
          outline:solid red 1px;/* Убираем Строку после настройки*/
          border:none 0 transparent!important;
        }
        .tab-content {
          display:none;
          width:100%;
          height:226px;
          outline:solid blue 1px;/* Убираем Строку после настройки*/
          color:#fff;
          overflow-y:auto;
        }
        </style>
        <script type="text/javascript">
        $.fn.switch_tabs = function() {
          var tbl = this,knopK = $("img[data^='tab']",tbl);
          knopK.each(function(){
            var arr = $(this).attr('data').split(",");
            $(this).css("background-image","url("+arr[1]+")")
          }); knopK.css("background-position","120% 10000px")
              knopK.css("background-repeat","no-repeat")

          knopK.click(function(){
            knopK.removeClass('active');
            $(this).addClass('active');
            var arr = $(this).attr('data').split(",");
            tbl.css("background-image","url("+arr[1]+")")
            $(".tab-content",tbl).hide();
            $("#"+arr[0]+"",tbl).show();
          });
        }
        </script>

таблица:

<table id="tab2" class="tbl-0" border="0">
    <tr>
    <td class="butt" valign=center height=40>   <!-- Секция кнопок -->
    <img width="195" data="tab-1,http://s2.uploads.ru/Eu9Vt.png"  src="/i/blank.gif" class="active"/>
    <img width="238" data="tab-2,http://s2.uploads.ru/IR1f9.png"  src="/i/blank.gif"/>
    <img width="135" data="tab-3,http://s3.uploads.ru/SolKv.png"  src="/i/blank.gif"/>
    <img width="200" data="tab-4,http://s2.uploads.ru/HeSUV.png"  src="/i/blank.gif"/>
    </td>
    </tr>
    <tr>
    <td  class="content" align=center>
    <!-- Контейнер контента 1-й кнопки -->
    <div id="tab-1" class="tab-content"  style="display:block;">

    Контент 1-й кнопки

    </div>

    <!-- Контейнер контента 2-й кнопки -->
    <div id="tab-2" class="tab-content">

    Контент 2-й кнопки

    </div>

    <!-- Контейнер контента 3-й кнопки -->
    <div id="tab-3" class="tab-content">

    Контент 3-й кнопки

    </div>

    <!-- Контейнер контента 4-й кнопки -->
    <div id="tab-4" class="tab-content">

    Контент 4-й кнопки

    </div>

    </td>
    </tr>
    </table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->