Таблицы

Страница: 1

Сообщений 1 страница 12 из 12

Поделиться12013-12-20 10:39:40

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Все таблицы взяты с форуму Единый форум поддержки
Мы не рисуем вам таблицы тут вы можете найти что-то похожее для себя
Все таблицы подписаны автором

Поделиться22013-12-20 10:40:24

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

html-верх

Код:

<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 0em}
</style>

<style>	
#menu {
margin-top: -4px;
width: 190px;}

#menu span {
text-align: center;
display: block;
margin: 15px 0;
padding: 13px;
height: 16px;
width: 180px;}

#submenu, #menu span {
  border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
  background-color: #E5D4B7;}

#menu .tabactive {
background-color: #BEA982;}

#submenu {
padding: 0px;
height: 355px;
text-align: center;
width: 540px;
background: #E5D4B7 url(картинка фона) center no-repeat;}

.submenutext {
display: none;}
</style>

html-низ

Код:

<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>

объявление

Код:

<center><table style="width: 100%;">
 <tbody>
  <tr>
   <td style="width: 20%;" align="center" valign="top">
    <div id="menu"><b>
<span alt="#sm1" style="cursor: pointer;">Приветствие</span>
<span alt="#sm2" style="cursor: pointer;">Новости</span>
<span alt="#sm3" style="cursor: pointer;">Сюжет</span>
<span alt="#sm4" style="cursor: pointer;">Л.И.Н.</span>
<span alt="#sm5" style="cursor: pointer;">Админ. состав</span>
<span alt="#sm6" style="cursor: pointer;">Полезные ссылки</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT" style="width: 80%;" align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="2">
<marquee style="width: 100%; height: 20px; font-family: 'Book Antiqua'; font-size: 16px;">
Приветствую тебя, бродяга!
</marquee>
</td></tr>
<tr>
<td style="width: 60%;" align="center" valign="top">

много текста

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

<img style="width: 200px; height: 300px;" src="http://forumavatars.ru/img/avatars/0000/14/1c/27986-1326090206.jpg">

<br/><br/>

КукараччА

</td>
</tr>
</table>
</div>
     <div id="sm2" class="submenutext">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="2">
<marquee style="width: 100%; height: 20px; font-family: 'Book Antiqua'; font-size: 16px;">
Колонка новостей
</marquee>
</td></tr>
<tr>
<td style="width: 60%;" align="center" valign="top">

много текста

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

<img style="width: 200px; height: 300px;" src="http://forumavatars.ru/img/avatars/0000/14/1c/27986-1326090206.jpg">

<br/><br/>

КукараччА

</td>
</tr>
</table></div>
     <div id="sm3" class="submenutext">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="2">
<marquee style="width: 100%; height: 20px; font-family: 'Book Antiqua'; font-size: 16px;">
Сюжетик
</marquee>
</td></tr>
<tr>
<td style="width: 60%;" align="center" valign="top">

много текста

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

<img style="width: 200px; height: 300px;" src="http://forumavatars.ru/img/avatars/0000/14/1c/27986-1326090206.jpg">

<br/><br/>

КукараччА

</td>
</tr>
</table></div>
     <div id="sm4" class="submenutext">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="2">
<marquee style="width: 100%; height: 20px; font-family: 'Book Antiqua'; font-size: 16px;">
Л.И.Н.
</marquee>
</td></tr>
<tr>
<td style="width: 60%;" align="center" valign="top">

много текста

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

<img style="width: 200px; height: 300px;" src="http://forumavatars.ru/img/avatars/0000/14/1c/27986-1326090206.jpg">

<br/><br/>

КукараччА

</td>
</tr>
</table></div>
     <div id="sm5" class="submenutext">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="2">
<marquee style="width: 100%; height: 20px; font-family: 'Book Antiqua'; font-size: 16px;">
Об Администрации...
</marquee>
</td></tr>
<tr>
<td style="width: 60%;" align="center" valign="top">

много текста

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

<img style="width: 200px; height: 300px;" src="http://forumavatars.ru/img/avatars/0000/14/1c/27986-1326090206.jpg">

<br/><br/>

КукараччА

</td>
</tr>
</table></div>
     <div id="sm6" class="submenutext">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="2">
<marquee style="width: 100%; height: 20px; font-family: 'Book Antiqua'; font-size: 16px;">
Ссылки
</marquee>
</td></tr>
<tr>
<td style="width: 60%;" align="center" valign="top">

много текста

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

<img style="width: 200px; height: 300px;" src="http://forumavatars.ru/img/avatars/0000/14/1c/27986-1326090206.jpg">

<br/><br/>

КукараччА

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

Автор Rion Leonheart

Поделиться32013-12-20 10:45:09

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

объявление

Код:

<!-- Cлайдер-->
<style type="text/css">
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background: transparent none;
position:relative;
}

#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* На двадцать пикселев меньше чем ширина #slidesContainer */
  overflow-y:auto; /* поддержка прокрутки */
  height:263px;
  text-align: center;
}

.control {
  display:block;
  width:25px;
  height:175px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
  z-index:100;
}

#leftControl {
  top:44px;
  left:0;
  background:transparent url(левая стрелка) no-repeat 0 0;
}

#rightControl {
  top:44px;
  right:0;
  background:transparent url(правая стрелка) no-repeat 0 0;
}
</style>
<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 33%;" align="center" valign="top">

<img src="http://savepic.su/1485277.png">
<br/><br/>

текст текст текст текст

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

<img src="http://savepic.su/1464796.png">
<br/><br/>

текст текст текст

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

<img src="http://savepic.su/1469916.png">
<br/><br/>

текст текст текст текст

</td>
</tr>
</table>
      </div>
<div class="slide">
<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 33%;" align="center" valign="top">

<img src="http://savepic.su/1456605.png">
<br/><br/>

текст текст текст текст

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

<img src="http://savepic.su/1504732.png">
<br/><br/>

текст текст текст текст

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

<img src="http://savepic.su/1497564.png">
<br/><br/>

текст текст текст текст

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

html-низ

Код:

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  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>

Автор Rion Leonheart

Поделиться42013-12-20 10:55:52

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

html-верх:

Код:

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

#menu span {
width: 190px;
height: 12px;
text-align:center;
display: block;
margin-bottom: 5px;
padding: 1em 0 1em 0;}

#menu .tabactive {
color: #fff;}

#submenu {
padding: 0px;
height: 200px;}

.submenutext {
display: none;
text-align: center;
width: 100%;
height: 198px;
overflow-y: auto;}

#menu span, .submenutext {
border: 1px solid #000;}
</style>

html-низ:

Код:

<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>

объявление

Код:

<center><table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td valign="top" align="center" style="width: 25%;">
    <div id="menu"><b>
<span alt="#sm1" style="cursor: pointer;">Новости</span>
<span alt="#sm2" style="cursor: pointer;">Погода | Время</span>
<span alt="#sm3" style="cursor: pointer;">Навигация</span>
<span alt="#sm4" style="cursor: pointer;">Администрация</span>
<span alt="#sm5" style="cursor: pointer;">Баннеры</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT" style="width: 75%;" align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;"><br/>

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

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

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

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

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

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

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

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

Контент пятой кнопки

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

Автор Rion Leonheart

Поделиться52013-12-20 11:05:42

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

html-верх:

Код:

<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>

html-низ:

Код:

<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>

Автор Rion Leonheart

Поделиться62013-12-21 19:07:01

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

В обявления

Код:

<table width="100%" >
    <tr>
    <td colspan="3"> <center><img src="http://s1.uploads.ru/i/gbsXH.gif"></center> </td>
    </tr>

    <tr>
    <td width="30%"><center><img src="http://s1.uploads.ru/i/wo4Kb.gif"></center>
<style> 
.nav {margin: 2px;}
.nav a{display: block; color:#3e3933; background-color: #d7d7d7; text-align: center; width:170px; padding: 5px; margin: 1px; text-decoration: none}
.nav a:hover{background-color: transparent !important; color:#392928}
</style> 

<center><div class="nav"> 
<a href="http://aaaaa.rolka.su/">гостевая</a> 
<a href="http://aaaaa.rolka.su/">сюжет</a> 
<a href="http://aaaaa.rolka.su/">правила</a> 
<a href="http://aaaaa.rolka.su/">занятые  внешности</a> 
<a href="http://aaaaa.rolka.su/">роли</a> 
<a href="http://aaaaa.rolka.su/">объявления</a> 
<a href="http://aaaaa.rolka.su/">акции</a>  
</div></center>
</td>
    <td width="40%"><center><img src="http://s1.uploads.ru/i/aN1zO.gif"></center>
Добро пожаловать на слэш-ролевую "Бедная Настя: Histoire d'amour".
...
</td>
    <td width="30%"><center><img src="http://s1.uploads.ru/i/fg0mK.gif"></center>
<center>
<a href="ссылка на профиль" title="имя"><img src="изображение" class="Hoverbuttons" style="" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)" border="0"></a>

<a href="ссылка на профиль" title="имя"><img src="изображение" class="Hoverbuttons" style="" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)" border="0"></a>

<a href="ссылка на профиль" title="имя"><img src="изображение" class="Hoverbuttons" style="" onmouseover="makevisible(this,0)" onmouseout="makevisible(this,1)" border="0"></a>
</center>
</td>
    </tr>
    </table>

Таблица взята с сайта ForumDTS.org
Автор viktoshaaa

Поделиться72013-12-21 19:32:13

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

html-верх

Код:

<style>	
#menu {
margin-top: -5px;
width: 160px;
height: 20px;
background-repeat : no-repeat;
}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 5px 0;
padding: 10px;
}
#submenu, #menu span {
color:#000000; 
border-style: solid;
border-width: 1px;}

#menu .tabactive {
color:#000000;
}

#submenu {
padding: 3px;
height: 250px;
text-align:justify;
font-size: 12px;
width: 270px;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

html-низ

Код:

<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>

объявление

Код:

<table width="100%" ><tr>
<td width="60%"><center><div style="width: 100%; height: 250px; overflow-y: scroll;">приветствие</div></center></td>
<td><center><table style="width: 100%;">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Время и погода</span>
<span alt="#sm2" style="cursor: pointer;">Администрация</span>
<span alt="#sm3" style="cursor: pointer;">События игры</span>
<span alt="#sm4" style="cursor: pointer;">Навигация</span>
<span alt="#sm5" style="cursor: pointer;">Новости</span>
  </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
текст
</div>
     <div id="sm2" class="submenutext">
текст
</div>
     <div id="sm3" class="submenutext">
текст
</div>
     <div id="sm4" class="submenutext">текст
</div>
<div id="sm5" class="submenutext">текст
</div>
</div>
   </td>
</tr>
 </tbody>
</table></center></td>
</tr><tr>
<td ><center>Баннеры</center></td>
</tr>
</table>

Таблица взята с сайта ForumDTS.org
Автор Бу

Поделиться82013-12-21 19:42:58

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

HTML верх

Код:

<style>	
#menu {
margin-top: -5px;
width: 150px;
height: 10px;
}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 2px;
}
#submenu, #menu span {
    
}

#menu .tabactive {
color: #000000;
    
}

#submenu {
padding: 3px;
height: 300px;
text-align: center;
font-size: 12px;
width: 520px;
background-image: url(http://s1.uploads.ru/i/dAqo1.png);
background-repeat : no-repeat;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

HTML низ

Код:

<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>

Объявление

Код:

<center><table style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><img src="http://s1.uploads.ru/i/X9tk1.png"></span>
<span alt="#sm2" style="cursor: pointer;"><img src="http://s1.uploads.ru/i/jziV4.png"></span>
<span alt="#sm3" style="cursor: pointer;"><img src="http://s1.uploads.ru/i/FXNYB.png"></span>
<span alt="#sm4" style="cursor: pointer;"><img src="http://s1.uploads.ru/i/EuDnT.png"></span>
<span alt="#sm5" style="cursor: pointer;"><img src="http://s1.uploads.ru/i/UJcTu.png"></span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;"><br/><br/>
<div style="width: 500px; height: 205px; overflow-y: scroll;">текст 1</div>
</div>
     <div id="sm2" class="submenutext"><br/><br/>
<div style="width: 500px; height: 205px; overflow-y: scroll;">текст 2</div>
</div>
     <div id="sm3" class="submenutext"><br/><br/>
<table width="100%" >
<tr>
<td width="50%"><center><a href="ссылка">название ссылки</a></center></td>
<td><center><a href="ссылка">название ссылки</a></center></td>
</tr>
</table>
</div>
     <div id="sm4" class="submenutext"><br /><br />
<div style="width: 500px; height: 205px; overflow-y: scroll;">текст 4</div>
</div>

<div id="sm5" class="submenutext"><br /><br />
<a href="ссылка на профиль1" target="_blank"><img src="картинка1" title="имя1">   
</div>
</div>
   </td>
</tr>
 </tbody>
</table></center>

Таблица взята с сайта ForumDTS.org
Автор Бу

Поделиться92013-12-31 09:13:08

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

таблица

ХТМЛ-верх

Код:

<style>
#menu {width: 600px; height: 55px; margin-top: 10px;}
#menu span {
width: 115px;
text-decoration: none;
}
#submenu {
padding: 5px;
height: 220px;
text-align: center;
width: 604px;
}
.submenutext {
display: none; 
height: 60px;
}
</style>

В Объявление

Код:

<center>
<table border="0" cellspacing="2" cellpadding="2" style="background: url(http://uploads.ru/i/R/d/k/RdkCL.png) no-repeat top center; height: 340px; width: 680px;">
<tbody><tr>
<td align="center" style="height: 60px;">
<!--- Кнопки меню --->
<div id="menu"> 
<span alt=#sm1 style="cursor: pointer;"><img src="http://uploads.ru/i/Q/3/i/Q3iX5.png" alt="" width="115" height="50" border="0"></span>
<span alt=#sm2 style="cursor: pointer;"><img src="http://uploads.ru/i/f/p/c/fpcA8.png" alt="" width="115" height="50" border="0"></span>
<span alt=#sm3 style="cursor: pointer;"><img src="http://uploads.ru/i/6/U/k/6UkV8.png" alt="" width="115" height="50" border="0"></span>
<span alt=#sm4 style="cursor: pointer;"><img src="http://uploads.ru/i/F/v/A/FvArK.png" alt="" width="115" height="50" border="0"></span>
<span alt=#sm5 style="cursor: pointer;"><img src="http://uploads.ru/i/D/5/r/D5rCj.png" alt="" width="115" height="50" border="0"></span>
<!--- Конец кнопок меню --->
</td>
</tr>
<tr><td align="center" id="MenuTxT" valign="top">

<div id="submenu" align="center"> 
<!--- контент событий --->
<div id="sm1" class="submenutext" style="display:block;">
<div style="border-bottom: 2px dotted #925E3D; border-top: 2px dotted #925E3D; width: 600px; height: 215px; overflow: auto; overflow-x: hidden; padding: 2px;">

Содержимое кнопки события

</div>
</div>
<!--- Контент времени и даты --->
<div id="sm2" class="submenutext">

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

</div>
<!--- Контент погоды --->
<div id="sm3" class="submenutext">
<div style="border-bottom: 2px dotted #925E3D; border-top: 2px dotted #925E3D; width: 600px; height: 215px; overflow: auto; overflow-x: hidden; padding: 2px;">

Содержимое кнопки погода

</div>
</div>
<!--- Контент навигации --->
<div id="sm4" class="submenutext">
<center>

<table cellpadding="0" cellspacing="0" width="520" height="230" border="0">
<tr height="25%">
<td width="33%">

<a href="http://reilana.mybb.ru/viewtopic.php?id=3"><img src="http://i25.fastpic.ru/big/2011/0818/bf/c6af7a78bf11fca55f24a062074bbabf.png"></a>

</td>

<td width="33%" rowspan="4">

<div id="yoblako" align="center"><noindex>
<a style="font-size:12pt;" href="ссылка" rel="nofollow" class="eTag eTagGr8">Навигация 1</a>
 
<a style="font-size:12pt;" href="ссылка" rel="nofollow" class="eTag eTagGr8">Навигация 2</a> 

<a style="font-size:12pt;" href="ссылка" rel="nofollow" class="eTag eTagGr8">Навигация 3</a> 

<a style="font-size:12pt;" href="ссылка" rel="nofollow" class="eTag eTagGr8">Навигация 4</a> 

<a style="font-size:12pt;" href="ссылка" rel="nofollow" class="eTag eTagGr8">Навигация 5</a> 

<a style="font-size:12pt;" href="ссылка" rel="nofollow" class="eTag eTagGr8">Навигация 6</a>

<a style="font-size:12pt;" href="ссылка" rel="nofollow" class="eTag eTagGr8">Навигация 7</a>
</noindex></div>

</td>

<td width="33%">

<a href="http://reilana.mybb.ru/viewtopic.php?id=23"><img src="http://i24.fastpic.ru/big/2011/0818/f7/45667f3da29fea2e079958bc66b865f7.png"></a>

</td></tr>

<tr height="25%">
<td>

<a href="http://reilana.mybb.ru/viewtopic.php?id=2#p4216"><img src="http://i24.fastpic.ru/big/2011/0818/19/a3ea063decff4c9a8bfb83f098673e19.png"></a>

</td>

<td>

<a href="http://reilana.mybb.ru/viewtopic.php?id=141"><img src="http://i24.fastpic.ru/big/2011/0818/a9/f546baa615643924c60a13deb668cfa9.png"></a>

</td></tr>

<tr height="25%">
<td>

<a href="http://reilana.mybb.ru/viewtopic.php?id=4"><img src="http://i26.fastpic.ru/big/2011/0818/94/6bd93b0de2e8a5684eaa28d15bd05194.png"></a>

</td>

<td>

<a href="http://reilana.mybb.ru/viewtopic.php?id=26"><img src="http://i24.fastpic.ru/big/2011/0818/fe/1d91356a21c5afb131a1001f96b953fe.png"></a>

</td></tr>

<tr valign="top" height="25%">

<td>

<a href="ссылка"><img src="http://i24.fastpic.ru/big/2011/0818/73/fc69b9746be5c726db356bc6a53d4e73.png"></a>

</td>

<td>

<a href="http://reilana.mybb.ru/viewtopic.php?id=10"><img src="http://i26.fastpic.ru/big/2011/0818/c4/bc0fe250f8503551daf6c6903f4f2bc4.png"></a>

</td></tr>

</table>
</center>

</div>
<!--- Контент администрации --->
<div id="sm5" class="submenutext">

<table align="center" width="100%" height="200" cellspacing="1" cellpadding="1" border="1" style="margin-top: 20px;">
<tr>
	<td width="20%" align="center" style="height: 40px;" valign="bottom">ник 1</td>
	<td width="20%" align="center" style="height: 40px;" valign="bottom">ник 2</td>
	<td width="20%" align="center" style="height: 40px;" valign="bottom">ник 3</td>
	<td width="20%" align="center" style="height: 40px;" valign="bottom">ник 4</td>
	<td width="20%" align="center" style="height: 40px;" valign="bottom">ник 5</td>
</tr>
<tr>
	<td width="20%" align="center"><a href="ссылка на профиль"><img src="адрес аватара" alt="аватар 1" border="0" style="width: 100%;"></a></td>
	<td width="20%" align="center"><a href="ссылка на профиль"><img src="адрес аватара" alt="аватар 2" border="0" style="width: 100%;"></a></td>
	<td width="20%" align="center"><a href="ссылка на профиль"><img src="адрес аватара" alt="аватар 3" border="0" style="width: 100%;"></a></td>
	<td width="20%" align="center"><a href="ссылка на профиль"><img src="адрес аватара" alt="аватар 4" border="0" style="width: 100%;"></a></td>
	<td width="20%" align="center"><a href="ссылка на профиль"><img src="адрес аватара" alt="аватар 5" border="0" style="width: 100%;"></a></td>
</tr>
</table>

</div>

</div>

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



<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>

Автор Кофеман Единый форум поддержки

Поделиться102014-01-03 10:08:09

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

таблица

ХТМЛ-верх

Код:

<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 115px;
    width: 480px;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 115px;
    line-height: 40px;
    border: 0px;
border-top: 0px dotted #000000;
    border-bottom: 0px dotted #000000;
        border-right: 0px dotted #000000;
        border-left: 0px dotted #000000;
    margin-bottom: -2px;
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
}

ul.tabs li a:hover {
       background: url();
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  
}    

html ul.tabs li.active  {
    background: url();    
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;   
}  

html ul.tabs li.active a:hover  {
        background: url();
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 450px;
    height: 286px;
    background-image : url(http://s1.uploads.ru/i/HwdQr.jpg);   
background-color: #FFFFFF;  
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #000000;
}
</style>
<style>
#my_col {
height: 284px;
width: 150px;
background-image : url(http://s1.uploads.ru/i/aePSm.jpg); 
}
</style>

HTML низ

Код:

<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>
<script type="text/javascript">

$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});

});

</script>

В Объявление

Код:

<table height="400" width="820">
<tr>
<td width="490" height="115"><div class="container">
    <div class="html-box">
<ul class="tabs">
    <li class="active"><a href="#tab1"><img src="http://s1.uploads.ru/i/jXLB3.png"></a></li>
    <li><a href="#tab2"><img src="http://s1.uploads.ru/i/PtSfp.png"></a></li>
    <li><a href="#tab3"><img src="http://s1.uploads.ru/i/2w6JU.png"></a></li>
</ul> </div>
</div></td><td width="150"><br><br><br><img src="http://s1.uploads.ru/i/reCKR.png"></td><td width="150"><br><br><br><img src="http://s1.uploads.ru/i/Y2iBT.png"></td>
</tr>
<tr>
<td > <div class="container"> <div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<table width="100%">
<tr>
<td width="60%">Приветствие</td>
<td><center>Ссылки</center></td>
</tr>
</table>
</div>
<div style="display: none;" id="tab2" class="tab_content">
<div style="overflow: scroll; overflow-x: hidden; height: 275px; "><center><img src="http://s1.uploads.ru/i/MG2ac.png"><br><img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание"><br><img src="http://s1.uploads.ru/i/CRSmc.png"><br><img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание"></center>
</div>
</div>
<div style="display: none;" id="tab3" class="tab_content"><div style="overflow: scroll; overflow-x: hidden; height: 275px; "> 
<center><img src="http://s1.uploads.ru/i/7gFUp.png"><br><img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание"><br><img src="http://s1.uploads.ru/i/JfBHL.png"><br><img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание">  <img src="http://s1.uploads.ru/i/Zw4oO.jpg" title="описание"> </center>
</div></div>
</div>
</div></td><td height="284"><br><br><br><div id="my_col">
<div style="padding-left:12px;"><br>текст топов</div>
</div></td><td  height="284"><br><br><br><div id="my_col">
<div style="padding-left:12px;"><br>текст партнеров</div>
</div></td>
</tr>
</table>

Таблица взята с сайта ForumDTS.org
Автор Бу

Поделиться112014-01-03 10:43:52

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

таблица

В Объявление

Код:

<style>    
#menu {
margin-top: -2px;
width: 150px;
height: 20px;
background-repeat : no-repeat;}
#menu span {
border:1px solid # 8f7468
text-align:left;
font: normal 100% Trebuchet Mst;
display:block;
color:# 1c1c1d;
margin: 9px 0;
padding: 10px;
}
#submenu,#menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: url(http://s1.uploads.ru/6us5v.png);
}
#menu .tabactive {
color: #8f7468;
    background:0;
}
#submenu {
padding: 0px;
height: 300px;
border:1px solid #8f7468;
text-align: center;
font: normal 100% Trebuchet Ms;
font-size: 14px;
width: 640px;
}
.submenutext {
display: none; 
height: 40px;
}
</style>
<center><table style="width: 640px">
<tbody>
  <tr>
   <td valign=top>
 <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;"><font color=#660000><b>Контейнер 1</b></font></font></span>
<span alt="#sm2" style="cursor: pointer;"><font color=#660000><b>Контейнер 2</b></font></span>
<span alt="#sm3" style="cursor: pointer;"><font color=#660000><b>Контейнер 3</b></font></font></span>
<span alt="#sm4" style="cursor: pointer;"><font color=#660000><b>Контейнер 4</b></font></font></span>
<span alt="#sm5" style="cursor: pointer;"><font color=#660000><b>Контейнер 5</b></font></font></span>

    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     
<div id="sm1" class="submenutext" 
style="display:block;padding:10px;height:280px;overflow-y: non;">  
<p>
<table>
<tr>
<td rowspan="2"><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 370px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div></td>
</tr>
<tr>
<td><div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 200px ; height: 90px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 88px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>
     

<div id="sm2" class="submenutext">
<table>
<tr>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
<td>
<div style="text-align:right;"><font color=#660000><b>надпись</b></font></div><br/><div style="text-align: center; width: 300px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</div>

<div id="sm3" class="submenutext"><center>
<div style="text-align:right; padding-right: 15px;"><font color=#660000><b>надпись  
</b></font></div><br/><div style="text-align: center; width: 600px ; height: 220px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 215px; overflow-y: scroll; ">текст</div></div>

</center></div>

<div id="sm4" class="submenutext"><center>
<table>
<tr>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 68px; overflow-y: scroll; ">текст</div></div>
</td>
<td><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 290px ; height: 70px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 67px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<font color=#660000><b>надпись</b></font></center><br/><div style="text-align: center; width: 590px ; height: 120px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 115px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</p></center></div>
    
 <div id="sm5" class="submenutext"><center>
<table>
<tr>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 185px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><img src="картинка" /></div>
</td>
</tr>
<tr>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 100%; height: 78px; overflow-y: scroll; ">текст</div></div>
</td>
<td><div style="text-align: center; width: 120px ; height: 80px; border: 1px solid #8f7468; border-radius: 10px; padding: 5px;"><div style="width: 98%; height: 77px; overflow-y: scroll; ">текст</div></div>
</td>
</tr>
</table>

</center></div>




</div> </td></tr></tbody></table> 
<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>

Таблица взята с сайта ForumDTS.org
Автор Бу

Поделиться122014-01-03 12:09:12

Автор: kolista
Активный участник
Зарегистрирован: 2013-12-18
Приглашений: 0
Сообщений: 103
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 14 часов
Последний визит:
2015-01-12 22:24:37

Таблица

верх

Код:

<style>	
#menu {
margin-top: -5px;
width: 180px;
height: 60px;
background-repeat : no-repeat;}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 11px;
  border: 1px solid #160f0a;
border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px; }
#submenu, #menu span {
  

}

#menu .tabactive {
color: #000000;
  border: 1px solid #160f0a;
border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;   }

#submenu {
padding: 3px;
height: 200px;
text-align: center;
font-size: 12px;
width: 540px;
}

.submenutext {
display: none; 
height: 40px;
}
</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>

объявление

Код:

<center><table style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">1</span>
<span alt="#sm2" style="cursor: pointer;">2</span>
<span alt="#sm3" style="cursor: pointer;">3</span>
<span alt="#sm4" style="cursor: pointer;">4</span>
<span alt="#sm5" style="cursor: pointer;">5</span>

           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 


<div id="sm1" class="submenutext" style="display:block;">
<table width="100%" >
<tr>
<td width="50%" ><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 125px; overflow-y: scroll;">1</div></td>
<td rowspan="2"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 100%; height: 190px; overflow-y: scroll;">3</div></td>
</tr>
<tr>
<td width="50%" ><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 50px; overflow-y: scroll;">2</div></td>
</tr>
</table>
</div>
     

<div id="sm2" class="submenutext">
<table width="100%" >
<tr>
<td width="33%"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 190px;">1</div></td>
<td width="33%"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 190px;">2</div></td>
<td><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 190px;">3</div></td>
</tr>
</table>
</div>


<div id="sm3" class="submenutext">
<table width="100%" >
<tr>
<td width="50%" ><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 125px; overflow-y: scroll;">1</div></td>
<td rowspan="2"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 100%; height: 190px; overflow-y: scroll;">3</div></td>
</tr>
<tr>
<td width="50%" ><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 50px; overflow-y: scroll;">2</div></td>
</tr>
</table>
</div>
     


<div id="sm4" class="submenutext">
<table width="100%" >
<tr>
<td ><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 100%; height: 90px;">1</div></td>
</tr>
<tr>
<td><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 100%; height: 90px;">2</div></td>
</tr>
</table>
</div>

 

<div id="sm5" class="submenutext">
<table width="100%" >
<tr>
<td width="50%"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 125px; overflow-y: scroll;">1</div></td>
<td><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 125px; overflow-y: scroll;">2</div></td>
</tr>
<tr>
<td colspan="2"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 95%; height: 60px; overflow-y: scroll;">2</div></td>
</tr>
</table>
</div>

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

Таблица взята с сайта ForumDTS.org
Автор Бу

Страница: 1

Photoshop

Меню навигации

Пользовательские ссылки

Информация о пользователе

Таблицы

Сообщений 1 страница 12 из 12

Поделиться12013-12-20 10:39:40

Поделиться22013-12-20 10:40:24

Поделиться32013-12-20 10:45:09

Поделиться42013-12-20 10:55:52

Поделиться52013-12-20 11:05:42

Поделиться62013-12-21 19:07:01

Поделиться72013-12-21 19:32:13

Поделиться82013-12-21 19:42:58

Поделиться92013-12-31 09:13:08

Поделиться102014-01-03 10:08:09

Поделиться112014-01-03 10:43:52

Поделиться122014-01-03 12:09:12