верх
<style> .container1 {width: 770px; margin: 0 auto; padding: 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; width:770px; } ul.tabs li { float: left; margin: 0; padding: 0; height: 40px; width: 130px; line-height: 40px; border: 0px; border-top: 1px solid #000000; border-bottom: 0px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; margin-bottom: -2px; background: url(); 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 { } html ul.tabs li.active { border-bottom: 0px dashed #000000; border-top: 1px dashed #000000; border-left: 1px dashed #000000; border-right: 1px dashed #000000; } html ul.tabs li.active a:hover { background: url(); border-bottom: 0px solid #160f0a; } .tab_container1 { clear: both; float: left; width: 770px; height: 390px; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; } .tab_content { padding: 5px; } .tab_content h2 { font-weight: normal; padding-bottom: 2px; } </style>
низ
<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>
объявление
<div class="container"> <div class="html-box"> <ul class="tabs"> <li class="active"><a href="#tab1">Вкладка 1</a></li> <li><a href="#tab2">Вкладка 2</a></li> <li><a href="#tab3">Вкладка 3</a></li> <li><a href="#tab4">Вкладка 4</a></li> <li><a href="#tab5">Вкладка 5</a></li> </ul> <div class="tab_container1"> <div style="display: block;" id="tab1" class="tab_content"> <table height="360" width="100%" > <tr><td width="60%" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 180px; "> <br><font size="4">текст приветствия </font></div> </td> <td width="40%" valign="top" rowspan="2"> <b>заголовок</b> <br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; overflow: scroll; overflow-x: hidden; height: 350px;"><br> текст</div></td> </tr> <tr><td width="60%" valign="top" > <table height="70%" width="90%" > <tr><td width="50%" valign="top" ><center><b>Ссылки 1</b><br> <a href="ссылка">ссылка название</a> </center></td> <td width="50%" valign="top" ><center><b>Ссылки 2</b><br> <a href="ссылка">ссылка название</a> </center></td> </tr> </table> </td> </tr> </table> </div> <div style="display: none;" id="tab2" class="tab_content"> <table height="360" width="100%" > <tr><td width="50%" valign="top" rowspan="2"><b>заголовок</b> <br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; overflow: scroll; overflow-x: hidden; height: 350px;"><br> текст 1</div> </td> <td width="50%" valign="top" > <b>Игрок недели</b> <br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 100px;"><br> текст 2</div></td> </tr> <tr><td width="50%" valign="top" ><br><br> <b>Активист недели</b> <br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 160px;"><br> текст 3</div> </td> </tr> </table> </div> <div style="display: none;" id="tab3" class="tab_content"> <table width="100%" height="350"> <tr> <td width="50%" height="110"> <table border="1" width="100%" height="110"> <tr> <td>Фото</td> <td bgcolor="#c9a0dc"><center><b>заголовок</b> <br>текст 1</td> </tr> </table> </td> <td height="110"> <table border="1" width="100%" height="110"> <tr> <td bgcolor="#c9a0dc"><center><b>заголовок</b> <br>текст 2</center></td> <td>Фото</td> </tr> </table> </td> </tr> <tr> <td height="110"> <table border="1" width="100%" height="110"> <tr> <td>Фото</td> <td bgcolor="#c9a0dc"><center><b>заголовок</b> <br>текст 3</center></td> </tr> </table> </td> <td height="110"> <table border="1" width="100%" height="110"> <tr> <td bgcolor="#c9a0dc"><center><b>заголовок</b> <br>текст 4</center></td> <td>Фото</td> </tr> </table> </td> </tr> <tr> <td height="110"> <table border="1" width="100%" height="110"> <tr> <td>Фото</td> <td bgcolor="#c9a0dc"><center><b>заголовок</b> <br>текст 5</center></td> </tr> </table> </td><td height="110"> <table border="1" width="100%" height="110"> <tr> <td bgcolor="#c9a0dc"><center><b>заголовок</b> <br>текст 6</center></td> <td>Фото</td> </tr> </table> </td> </tr> </table> </div> <div style="display: none;" id="tab4" class="tab_content"> <table height="360" width="100%" > <tr> <td bgcolor="#c9a0dc" width="30%" height="85" ><center>1</center></td><td bgcolor="#c9a0dc" width="30%"><center>2</center></td> <td rowspan="4"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 95%; height:350px; "> <br>Текст очереди</div></td> </tr> <tr> <td bgcolor="#c9a0dc" width="30%" height="85"><center>3</center></td> <td bgcolor="#c9a0dc" width="30%"><center>4</center></td></tr> <tr> <td bgcolor="#c9a0dc" width="30%" height="85"><center>5</center></td> <td bgcolor="#c9a0dc" width="30%"><center>6</center></td></tr> <tr> <td bgcolor="#c9a0dc" width="30%" height="85"><center>7</center></td> <td bgcolor="#c9a0dc" width="30%"><center>8</center></td></tr> </table> </div> <div style="display: none;" id="tab5" class="tab_content"> <table height="360" width="100%" > <tr> <td width="50%" > <div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 95%; height:250px; "> <br>Конкурс 1 </div> </td> <td width="50%" > <div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 95%; height:250px; "> <br>Конкурс 2 </div> </td> </tr> <tr> <td width="50%" ><br> <table border="1" width="85%" height="100"> <tr> <td>Фото</td> <td bgcolor="#c9a0dc"><center> <br>текст 1</td> </tr> </table></td> <td width="50%" ><br><table border="1" width="85%" height="100"> <tr> <td>Фото</td> <td bgcolor="#c9a0dc"><center> <br>текст 2</td> </tr> </table></td></tr> </table> </div> </div> </div> </div>
- Подпись автора
При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.