<style type="text/css">
#menu {
padding-left: 20px;
text-align: center;
}

#menu a {
padding: 7px 15px 7px;
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}

#submenu {
padding: 5px;
height: 100px;
text-align: center;
font-size: 12px;
width: 700px;
}

.submenutext {
display: none;
height: 60px;
}

#submenu A {
color: #CCC;
}
#menu .tabactive {
color: #65065f;
}
</style>
<script type="text/javascript">
var prevmenu, prevtab
function subMenu(obj, menu) {
if (document.getElementById) {
if (prevmenu) document.getElementById(prevmenu).style.display = "none"
document.getElementById(menu).style.display = "block"
if (prevtab) { prevtab.className = "" }
obj.className = "tabactive"
prevmenu = menu
prevtab = obj
}
}
</script>

<table style="width: 100%;">
<tbody>
  <tr>
   <td>
    <div id="menu">
     <a onclick="subMenu(this,'sm1')" style="cursor: pointer;">Заголовок 1</a>
     <a onclick="subMenu(this,'sm2')" style="cursor: pointer;">Заголовок 2</a>
     <a onclick="subMenu(this,'sm3')" style="cursor: pointer;">Заголовок 3</a>
     <a onclick="subMenu(this,'sm4')" style="cursor: pointer;">Заголовок 4</a>
     <a onclick="subMenu(this,'sm5')" style="cursor: pointer;">Заголовок 5</a>
     <a onclick="subMenu(this,'sm6')" style="cursor: pointer;">Заголовок 6</a>
     <a onclick="subMenu(this,'sm7')" style="cursor: pointer;">Заголовок 7</a>
    </div>
   </td>
  </tr>
  <tr>
   <td align="center">
    <div id="submenu">
     <div id="sm1" class="submenutext"><br /><br />Текст 1</div>
     <div id="sm2" class="submenutext"><br /><br />Текст 2</div>
     <div id="sm3" class="submenutext"><br /><br />Текст 3</div>
     <div id="sm4" class="submenutext"><br /><br />Текст 4</div>
     <div id="sm5" class="submenutext"><br /><br />Текст 5</div>
     <div id="sm6" class="submenutext"><br /><br />Текст 6</div>
     <div id="sm7" class="submenutext"><br /><br />Текст 7</div>
    </div>
   </td>
  </tr>
</tbody>
</table>