Ara:

Şu an misafir modundasın. YazılımDevi olmak ister misin? Giriş Yap / Kayıt Ol

Makale Hakkında!

CSS ile tablo dizayni Makale Yazarı Okunma Sayısı Eklenme Tarihi
halit patan 2045 12.03.2009

Makale Detayı

Merhaba arkadaslar,
Bu dersimizde CSS kullanarak verilerimizi listeleyebilecegimiz bir tablo dizayn edecegiz.Internette, CSS kullanilarak olusturulmus birçok tablo örnegi bulabiliriz.Yaptigim örnek onlardan pek de farkli olmayacak ama yine de sizlere faydali olabilir düsüncesiyle kodlari sizlerle paylasmayi düsündüm.NET frameworklerinin bizlere sunmus oldugu birtakim bilesenlerle (DataGrid,GridView,DetailsView...) bizler kayitlarimizi kolayca listeleyebiliyoruz.Fakat ASP ile web sayfasi hazirlayanlar iyi bilir.Database'den çektigimiz verileri listeleyebilecegimiz ya da bind edebilecegimiz herhangi bir bilesenimiz (component) yoktu.O yüzden kendimiz html taglari kullanarak tablolar olusturur, bu tablolarin satir ve sütunlarini kullanarak verilerimizi listelerdik. 

Ben kodlari asagida listeledim.Sizler style’lar üzerinde oynamalar yaparak tablo dizaynini degistirebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Arabalar</title>
<style type="text/css">
.mytable {
      border-collapse: collapse;
      border: 1px solid #C0CEDF;
      width:80%; 
}
.mycontent {
      border: 1px solid #C0CEDF;
      width: 245px;
      font-size: small ;
      font-family: Tahoma;
      text-align:center ;   
}
.mycontent:hover{
background-color:silver;
cursor: pointer;
} 
.myheader {
      font-family: Tahoma;
      font-size: small;
      color: #FFFFFF;
      text-align: center;
      border: 1px solid #C0CEDF;
      background-color: #82A2C6;
      font-weight: bold;
      width: 245px;
      height: 30px;
}
.mycolumn {
      font-family: Tahoma;
      font-size: small;
      color: #5981A7;
      border: 1px solid #C0CEDF;
      background-color: #DAE3EF;
      font-weight: bold;
      width: 245px;
      height: 25px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" class="mytable">
      <tr>
            <td class="myheader" >Arabalar</td>
            <td class="myheader" >Model</td>
            <td class="myheader" >Fiyat</td>
            <td class="myheader" >Seçiminiz</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Renault Clio</td>
            <td class="mycontent" >2007</td>
            <td class="mycontent" >15000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Ford Focus</td>
            <td class="mycontent" >2009</td>
            <td class="mycontent" >35000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Ford Fiesta</td>
            <td class="mycontent" >2007</td>
            <td class="mycontent" >25000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Toyota Corolla</td>
            <td class="mycontent" >2008</td>
            <td class="mycontent" >35000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Opel Corsa</td>
            <td class="mycontent" >2003</td>
            <td class="mycontent" >23000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Opel Astra</td>
            <td class="mycontent" >2005</td>
            <td class="mycontent" >15000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Land Rover</td>
            <td class="mycontent" >2009</td>
            <td class="mycontent" >45000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
      <tr>
            <td class="mycolumn" >&nbsp; Kia</td>
            <td class="mycontent" >2009</td>
            <td class="mycontent" >60000 $</td>
            <td class="mycontent" >Araba Detaylari</td>
      </tr>
</table>
</body>
</html>
 
 

 Iyi çalismalar
Halit PATAN

 

Makale Tagları

Makale Dosyası

Makaleye Ait Dosya Bulunamamıştır

Paylaş


Yazar Hakkında
Genel Bilgiler   Yazar Hakkında
Ad: halit patan
Kurum:
Meslek:
E-Mail: hpatan83@hotmail.com
Web Sitesi:
Makale-Video: 6

Bu makale için yapılmış yorumlar

Bu makale hakkında yorum yapınız!...

Bu makale hakkında yorum yapabilmek için lütfen üye olunuz veya giriş yapınız.

Konular

Yazarlar

Image
Veysel Uğur Kizmaz (214)
Engin Demiroğ (194)
Ahmet Sait Duran (71)
Ortaç DEMİREL (64)
Salih Demiroğ (63)
Tolga Ayas (56)
Veli Kadir KOZAN (50)

Son Eklenen Makaleler

System Center Operation Manager 2007 R2 Suncuda Bildirimlerin Mail ile İletilmesini Sağlamak (Ortaç DEMİREL)
System Center Configuration Manager 2007 R2 Client Status Reporting Kurulumu (Ortaç DEMİREL)
System Center Configuration Manager 2007'de OU bazlı Collection Yaratma (Ortaç DEMİREL)
Cloud Computing Düşüncesi (İbrahim Atay)
Internet Explorer 9 ve Web Uygulamaları (İbrahim Atay)

Son Eklenen Videolar

WEBCAST, ASP.Net MVC 4 ile Web Uygulaması Geliştirmek (İbrahim Atay)
WEBCAST, WPF'te Nesneler (Mustafa Karakuş)
Webcast, PowerShell 2.0'a Giriş (Ahmet Sait Duran)
WEBCAST, SCOM 2007 ile Workgroup Makinelerin Yönetimi (Ortaç DEMİREL)
WebCast, Team Foundation Server - Source Control (Engin Demiroğ)

Ziyaretçi İstatistiği

ImageOnline : 9         Bugün : 1367

Bu Ay : 8198        Bu Yıl : 58372

Toplam : 441211

Kullanıcı Giriş Paneli!
E-Mail:
Şifreniz:
Giriş Yap
Şifremi Unuttum!
E-Mail:
    Gönder

Bu site Engin Demiroğ ve Salih Demiroğ tarafından yazılmış ve tasarlanmıştır.