CSS ile tablo dizayni

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">

<head>

<title>Arabalar</title>

.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>

<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" >  Renault Clio</td>