YazilimDevi.Com {..} Yazılım Devi Olacaksın :)  
Kullanıcı Adı :
Şifre :
 
   
  En Çok İzlenen KonularAnlatım
İzle  C# ile Ado.NET-Tablo Verilerini Projemize AktaralimEngin Demirog
İzle  Active Directory Kurulumu (1)Salih Demirog
İzle  Exchange Server 2003 KurulumuSalih Demirog
ASP.NET
ASP.NET AJAX
BILGISAYAR
C#
CRYSTAL REPORTS
CSS
LINQ
MS ACCESS
MS EXCEL
MS POWERPOINT
MS WORD
POCKET PC
SQL
SQL SERVER
VISUAL BASIC
WPF
ISA SERVER 2006
MS EXCHANGE SERVER
MS OUTLOOK
MS SERVER 2003-2008
 
 

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