В этой теме вы найдете коды готовых таблиц, которые вы сможете использовать у себя на форуме
Готовые таблицы
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться12013-08-19 20:51:38
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Поделиться22013-08-30 16:48:48
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Таблица 1
Описание
Таблица состоит из трех колонок. Первая и последняя колонки статичные, вторая колонка пролистывается. В ней три вкладки, на первой Нужные, Администрация, Игрок недели, на второй Флудоманы, Постоманы и Лучший пост, на третьей - баннеры для голосования.
Как выглядит:
в HTML-низ
Код:
<!--К таблице-->
<script src="http://forumstatic.ru/files/0012/f1/06/21200.js"></script>
<script>
$(function(){
$('#slides').slides({
play: 5000,
pause: 2500,
hoverPause: true,
pagination: true,
start: 1
});
});
</script>
<style type="text/css" media="screen">
.slides_container {
width:170px;
height:190px;
}
.slides_container div {
width:170px;
height:170px;
display:block;
}
/*
Pagination
*/
.pagination {
margin:16px 0 0 70px;
width:100px;
}
.pagination li {
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
border-radius: 6px;
width:12px;
height:12px;
background-position:0 0;
background-color: #463731;
float:left;
overflow:hidden;
color: #fff !important;
text-align: center;
font-size: 9px;
text-decoration: none !important;
}
.pagination li a:hover, .pagination li a:active
{background-color: #715950}
.pagination li.current a {
background-position:0 -12px;
background-color: #715950
}
a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited{text-decoration: none;
background-color: #463731;
font:normal 7pt century gothic;
color: #ffffff;
line-height: 14pt;
text-transform: uppercase;
text-align: center;
display:block;
width:150px;
border-bottom: 2px solid #3e2a35;
}
a.tvm:hover {
background-color:#715950;
color: #FFFFFF ;
border-bottom :2px solid #ffffff;}
a.tvm2, a.tvm2:active, a.tvm2:link, a.tvm2:visited{
text-decoration: none;
background-color: #3e2a35;
font:normal 7pt century gothic;
color: #ffffff;
line-height: 14pt;
text-transform: uppercase;
text-align: center;
display:block;
width:120px;
border-bottom: 2px solid #3e2a35;
}
a.tvm2:hover {
background-color:#666666;
color: #FFFFFF ;
border-bottom :2px solid #ffffff;}
</style>В объявление
Код:
<table width="750px" cellspacing="5" border="0" cellpadding="5" >
<tr>
<td align="left" width="400px">
<br/> <br/>
<div style="font-size: 12px; text-align: justufy; width: 100%; height: 215px;">
<center><b>Дорогие гости!</b><br>
Текст текст текст текст <br><br>
<b>Система игры:</b> текст | <b>Рейтинг:</b> текст<br></center>
</div>
</td>
<td width="170px">
<div id="slides">
<div class="slides_container">
<div style="text-align: center">
<b>НУЖНЫ КАК ВОЗДУХ</b>
<p>
<a href="ссылка на нужного"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на нужного"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на нужного"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на нужного"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a>
</p>
<b>АДМИНИСТРАЦИЯ</b>
<p>
<a href="ссылка на профиль администратора"><img style="border: 1px solid; width: 65px; height: 33px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на профиль администратора"><img style="border: 1px solid; width: 65px; height: 33px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a>
</p>
<b>ИГРОК НЕДЕЛИ</b><br/>
<p>
<a href="ссылка на профиль игрока"><img style="border: 1px solid; width: 140px; height: 77px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a>
</p>
</div>
<div style="text-align: center">
<b>ФЛУДОДЕТИ</b>
<p>
<a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a>
</p>
<b>ПОСТОМАНЫ</b>
<p>
<a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a><a href="ссылка на профиль пользователя"><img style="border: 1px solid; width: 35px; height: 35px;" onmouseover="this.src='ссылка на картинку при наведении'" src="картинка в спокойном состоянии" onmouseout="this.src='картинка в спокойном состоянии'"></a>
</p>
<b>ВОСХИЩАЕМСЯ</b>
<p>
<a href="ссылка на пост"><img style="border: 1px solid;width: 140px; height: 70px;" onmouseover="this.src='ссылка на картинку при наведении'" src="ссылка на картинку в спокойном состоянии" onmouseout="this.src='ссылка на картинку в спокойном состоянии'"></a>
</p>
</div>
<div style="text-align: center">
<b>ГОЛОСУЕМ</b><br/><br/>
баннер топа
</div>
</div>
</div>
</td>
<td align="center" width="150px">
<table align="center">
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
<tr>
<td><a href="ссылка на тему" class="tvm" target="">Название темы</a></td></td>
</tr>
</table>
</td>
</tr>
</table>Поделиться32013-08-30 17:00:09
- Администратор
- Зарегистрирован: 2013-08-10
- Приглашений: 0
- Сообщений: 614
- Уважение: +10
- Провел на форуме:
2 дня 14 часов - Последний визит:
2013-11-24 18:19:38
Таблица 2
Как выглядит
в HTML-верх
Код:
<!—к таблице -->
<style>
#menu {
width: 750px;}
#menu span {
width: 750px;
word-spacing: 15px;
text-align: center;
display: inline;
height: 16px;}
#menu .tabactive {
background-color: #BEA982;}
#submenu {
padding: 0px;
height: 250px;
text-align: center;
width: 750px;
background: #E5D4B7 url(картинка фона) center no-repeat;}
.submenutext {
display: none;}
.anima a{display: inline; color: #431a1a; background: center center no-repeat; text-align: center; width: 74px; font-size: 12px; font-family: Trebuchet; text-decoration: none; padding: 6px 8px 6px 8px;}
.anima a:hover{color: #fff; text-decoration: none;}
</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>В объявление
Код:
<table style="width: 750px; height: 250px;"> <tbody> <tr> <td style="width: 100%; " align="center" valign="top"><div id="menu"><table style="width: 750px;"><tr><td><span alt="#sm1" style="cursor: pointer;">В игре</span></td><td><span alt="#sm2" style="cursor: pointer;">Админы</span></td><td><span alt="#sm3" style="cursor: pointer;">Лучшие</span></td><td><span alt="#sm4" style="cursor: pointer;">Важно</span></td><td><span alt="#sm5" style="cursor: pointer;">Баннеры</span></td></tr></table></div></td></tr> <tr> <td id="MenuTxT" align="center" valign="top"> <div id="submenu" align="center"> <div id="sm1" class="submenutext" style="display:block;"> <table> <tr> <td style="width: 40%;" > <center>Добро пожаловать</center><br> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </td> <td style="width: 20%;" ><div class="anima"> <a href="ссылка на тему">Кнопка 1</a><br><a href="ссылка на тему">Кнопка 2</a><br><a href="ссылка на тему">Кнопка 3</a><br><a href="ссылка на тему">Кнопка 4</a><br><a href="ссылка на тему">Кнопка 5</a><br><a href="ссылка на тему">Кнопка 6</a><br><a href="ссылка на тему">Кнопка 7</a> </div></td> <td style="width: 40%;" style="display:block;"><center>В игре</center><br> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </td> </tr> </table> </div> <div id="sm2" class="submenutext"> <table> <tr> <td> <img src="" style="width: 75px; height: 75px;" align="left" hspace="30" vspace="5"> <b>Имя администратора</b><br> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </td><td><img src="" style="width: 75px; height: 75px;" align="left" hspace="30" vspace="5"><b>Имя администратора</b><br> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</td> </tr> <tr> <td><img src="" style="width: 75px; height: 75px;" align="left" hspace="30" vspace="5"> <b>Имя администратора</b><br> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</td><td><img src="" style="width: 75px; height: 75px;" align="left" hspace="30" vspace="5"> <b>Имя администратора</b><br> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</td> </tr></table> </div> <div id="sm3" class="submenutext" style="display:block;"> <table style="width: 100%"> <tr> <td style="width: 60%;"> <center><b>Говоруны</b></center></br> <img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"> </td> <td style="width: 40%;"><center><b>Победитель конкурса</b></center></br> <img src="" width="200px" height="75px"> </td> </tr> <tr> <td style="width: 60%;"> <center><b>Постоманы</b></center></br> <img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"><img src="" widht="75px" height="75px"> </td> <td style="width: 40%;"><center><b>Лучший пост</b></center></br> <img src="" width="200px" height="75px"> </td> </tr></table></div> <div id="sm4" class="submenutext" style="display:block;"> </div> <div id="sm5" class="submenutext" style="display:block;"> </div> </td></tr></table>
Страница: 1
