Yaptığım bir indexte eklemiş olduğum güzel bir dj isim listesi tablosu. Tabloya Dj avatarı, yayın bilgileri, yayın saati gibi özellikleri ekleyebilirsiniz. Renk kodlarını kullanarak istediğiniz rengi kullanabilirsiniz.
Tablo canlı demosu =>
Ekran görüntüsü:
Sitenize eklemeniz gereken kodlar:
Not: Kodlar eklediğiniz sayfanın css yapılandırmasına göre değişiklik gösterebilir, kodlarla oynayarak istediğiniz düzenlemeyi yapabilirsiniz. Eğer yapamazsanız konu altından yardım isteyebilirsiniz.
Tablo canlı demosu =>
Bu bağlantı ziyaretçiler için gizlenmiştir. Görmek için lütfen giriş yapın veya üye olun.
Ekran görüntüsü:
Sitenize eklemeniz gereken kodlar:
HTML:
<style>
body {font-family: tahoma;font-size: 15px;}
.yayinci-listesi {
background: #191919;
padding: 3px 0px;
}
.yayinci-listesi ul {
position: relative;
margin-top: -15px;
left: -1.5px;
display: block;
list-style: none;
}
.yayinci-listesi ul li {
display: inline-block;
margin-left: 5px;
margin-top: 15px;
width: 240px;
}
td img {
width: 100%;
height: 220px;
border: dashed 1px #999;
position: relative;
left: -1px;
}
td {
background: #191919;
border: 1px dashed #999;
padding: 5px;
text-align: center;
}
</style>
<div class="yayinci-listesi">
<ul>
<!--Liste 1-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#ff0000;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#ff0000;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#ff0000;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#ff0000;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 2-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#00ff21;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#00ff21;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#00ff21;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#00ff21;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 3-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#00ffd4;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#00ffd4;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#00ffd4;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#00ffd4;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 4-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#ffd400;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#ffd400;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#ffd400;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#ffd400;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 5-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#00cbff;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#00cbff;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#00cbff;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#00cbff;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 6-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#e332ff;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#e332ff;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#e332ff;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#e332ff;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 7-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#31a9ff;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#31a9ff;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#31a9ff;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#31a9ff;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 8-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#ff0000;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#ff0000;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#ff0000;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#ff0000;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 9-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#ff0000;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#ff0000;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#ff0000;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#ff0000;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 10-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#ff0000;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#ff0000;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#ff0000;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#ff0000;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 11-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#ff0000;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#ff0000;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#ff0000;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#ff0000;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
<!--Liste 12-->
<li>
<table width="240" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><img src="http://demo.www.trturka.com/muzik-zamani-radyo-index/images/12.jpg"></td>
</tr>
<tr>
<td><span class="style3">Yayıncı :</span> <span style="color:#ff0000;">Dj Adı</span></td>
</tr>
<tr>
<td><span class="style3">Tarzı :</span> <span style="color:#ff0000;">Karışık</font></font></td>
</tr>
<tr>
<td><span class="style3">Nerden :</span> <span style="color:#ff0000;">ADANA</font></td>
</tr>
<tr>
<td><span class="style3">Görevi :</span> <span style="color:#ff0000;">RADYO KURUCU</font></td>
</tr>
</table>
</li>
</ul>
</div>Not: Kodlar eklediğiniz sayfanın css yapılandırmasına göre değişiklik gösterebilir, kodlarla oynayarak istediğiniz düzenlemeyi yapabilirsiniz. Eğer yapamazsanız konu altından yardım isteyebilirsiniz.
