Bu makalemizde CSS ile tablolarýmýzý nasýl daha okunaklý ve güzel gösterebiliriz onu anlatmaya çalýþacaðýz. Bildiðiniz gibi CSS’in namýný arttýran olay web sayfa iskeletinin tablolar ile deðilde katman(<div>) ile kodlamasý ile olmuþtur. Ancak burada bir yanlýþ anlaþýlma oluyor genelde, oda þudur ki tablolarda bir Xhtml elementidir ve gerektiði yerlerde kullanýlmalýdýr, amacýmýz tablo kullanmamak deðil web standartlarýna uygun kodlama yapmak olduðunu hiç bir zaman unutmayalým. Tablo kullanýlacak yerlerde de katman kullanarak iþi çýðýrýndan çýkýlmaz hala getirmenin bir anlamý yoktur. Tablolarýn kullanýldýðý yerlere bir kaç örnek verelim:
Takvim
Finansal Tablolar
Çizelgeler
Plan Listeleri(otobüs, uçak iniþ kalkýþ saat listesi vb.)
Yukarýda verdiðimiz örnekler vb. durumlarda kullanýlan tablolar genelde okunmasý zor ve göze hoþ gelmeyen yapýlardýr. Biz CSS ile bu tablolarý daha okunaklý, kodlamasý daha kolay ve güzel hale getireceðiz.
Tablolarýn genel yapýsý aþaðýdaki gibidir.
<table>
<tr>
<td>… içerik ….</td>
</tr>
</table>
Yukarýda kullanýlan tablo yapýsý genelde kullanýlan tablo yapýsýdýr. Ancak tüm araçlara uyumu, eriþebilirliði ve kolay kodlama için daha geliþmiþ bir tablo kodlamasý kullanýlmalýdýr. Örnek
<table cellspacing="1" class="uzerinde" id="golKrallari" summary="Türkiye Süper Ligi’nin son 3 yýlýnda en çok gol atan futbolcu listesi">
<caption>1. LÝG TARÝHÝNDEKÝ GOL KRALLARI(SON 3 YIL)</caption>
<thead>
<tr>
<th scope="col" abbr="sezon" class="bgYok">SEZON</th>
<th scope="col" abbr="adsoyad">ADI-SOYADI</th>
<th scope="col" abbr="takým">TAKIM</th>
<th scope="col" abbr="maç">MAÇ SAYISI</th>
<th scope="col" abbr="gol">ATTIðžI GOL</th>
<th scope="col" abbr="ortalama">ORTALAMA</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" abbr="03-04" class="baslikBir">2003 - 2004</th>
<td class="tabloZRFark">ZAFER BÝRYOL</td>
<td class="tabloZRFark">Konyaspor</td>
<td class="tabloZRFark">34</td>
<td class="tabloZRFark">25</td>
<td class="tabloZRFark">0.74</td>
</tr>
<tr>
<th scope="row" abbr="04-05" class="baslikIki">2004 - 2005</th>
<td>FATÝH TEKKE</td>
<td>Trabzonspor</td>
<td>34</td>
<td>31</td>
<td>0.91</td>
</tr>
<tr>
<th scope="row" abbr="05-06" class="baslikBir">2005 - 2006</th>
<td class="tabloZRFark">GÖKHAN ÜNAL</td>
<td class="tabloZRFark">Kayserispor</td>
<td class="tabloZRFark">32</td>
<td class="tabloZRFark">25</td>
<td class="tabloZRFark">0.78</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">Kaynak: Fatih Futbol Okulu(F.F.O)</td>
</tr>
</tfoot>
</table>
Tablomuzun içeriði bu kadar kýsa olmasýna karþýn ne kadar okunaksýz ve kötü göründüðü ortada. Bizim amacýmýz web sayfalarý kodlarken sadece bilgi sunmak deðildir. Bilgiyi en kullanýþlý ve güzel þekilde sunmaktýr.
Burada normal tablo kodlamasýndan farklý olan etiketleri açýklarsak. <table> kodu içindeki summary özelliði ile tablo içeriðinin bir özet açýklamasý yapýlmýþtýr. Bu özellik web deðilde cep telefonu, pda vb. araçlarda tablo okumasý için önemlidir. <caption> özelliði tablonun baþlýðýný oluþturmak için üretilmiþ bir etiketitir ve bu amaçla burada kullanýlmýþtýr.(Bir çok sitede tablo baþlýðý için <p>, <div> ve <hx> kullanýlmaktadýr. Bu kullanýmlarýn yanlýþ olduðunu burdan belirtelim.) <th> etiketi bu alanýn bir baþlýk olduðu belirtir, <th> etiketi içerisinde kullanýlan scop="col" ve scop="row" özelikleri yine küçük ekranlý araçlar için baþlýk ile içerik arasýndaki iliþkiyi göstermesi bakýmýndan önemlidir. abbr özelliði ise küçük ekranlarda baþlýðýn sýðmamasý halinde görüntülenecek baþlýðýn kýsaltmasýný içerir.
Ayrýca thead, tbody ve tfoot etiketleri tabloyu 3 alana böler ve CSS ile XHTML etiketleri arasýnda daha fazla etkileþim yapmamýzý saðlar.
Tablolarý CSS ile güzelleþtirirken renk seçimi önemlidir. Birbirine uyumlu renkleri seçmek her zaman güzel sonuçlar doðuracaktýr. Ben biraz sade tasarýmlarý beðendiðim için gri aðýrlýklý bir tablo yapacaðým. Genelde tablolara uygulanacak renklerin seçimini yaparken web sitesinin tasarýmýna uygun renkler seçilmelidir. Bu yaptýðýmýz web sitesindeki tutarlýlýðý korumamýzý saðlayacaktýr. Benim seçtiðim renkler:
CSS kodunu yazmaya baþlayalým:
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#golKrallari {
width: 700px;
}
Tablonun baþlýðýný(<caption>) düzenleyelim
caption {
padding: 0 0 5px 0;
font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
Daha sonra kolon baþlýklarýný <th> kodlayalým. Burada baþlýklarýn daha güzel görünmesi için kolon baþlýklarýnýn zeminine degradeli bir zemin resmi koyalým. Ayrýca kolon ve satýr baþlýklarýnýn birleþtiði sol üst hücreyi diðerlerinden ayýracak(.bgYok) bir zemin resmi ve rengi olmadan kodlayalým:
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #474747;
border-bottom:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
border-top:1px solid #E0E0E0;
letter-spacing: 2px;
text-align: left;
padding: 6px;
background: #F3F3F3 url(images/tablo_baslik_zr.gif) repeat-x;
}
th.bgYok {
border-top: 0;
border-left: 0;
border-right: 1px solid #E0E0E0;
background: none;
}
Kolon baþlýklarý ile satýr baþlýklarýný bir birinden ayýralým. Ayrýca Satýr baþlýklarýna bir top ikonu koyalým. Burada dikkat edilmesi gereken bir konuda birbirini takip eden tablo satýrlarýnýn zemin rengini farklý farklý tanýmlayarak tablo okunurluluðunu arttýrmaktýr. Biz burada bir satýrýn zemin rengini #F3F3F3 diðer satýrýn zemin rengini de #FFF yaptýk.
Burada ikonlardan farklý olanýn bordo-mavi olmasý ve bu satýrýn Fatih Tekke’ye denk gelmesi tamamen bir rastlantý dýr :-)
th.baslikIki {
border-left: 1px solid #E0E0E0;
border-top: 0;
padding-left:25px;
background: #fff url(images/top2.gif) 5px no-repeat;
}
th.baslikBir {
border-left: 1px solid #E0E0E0;
border-top: 0;
padding-left:25px;
background: #F3F3F3 url(images/top.gif) 5px no-repeat;
}
Veri içeren hücreler içinde kenarlýk, zemin rengi, font rengi ve padding tanýmlamasý yapalým ve burada da birbirini takip eden satýrlar için farklý renk uygulamasýný yapalým. Bunun için bir sýnýf oluþturup(.tabloZRFark) farklý satýrlara atayalým.
td {
border-bottom:1px solid #E0E0E0;
border-right:1px solid #E0E0E0;
background: #fff;
padding: 6px;
color: #474747;
font:11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
td.tabloZRFark {
background: #F3F3F3;
color: #474747;
}
Tablonun alt kýsmý içinde aþaðýdaki kodu yazalým:
tfoot tr td{
text-align:right;
border-left:1px solid #e0e0e0;
border-bottom:2px solid #e0e0e0;
font:italic 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
Son olarak farenin imleci üzerine gelen satýrýn zemin rengini deðiþtirerek okunurluluðu arttýrmak için aþaðýdaki kodlarý yazalým:
#golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
background:#474747;
color:#f3f3f3;
}
fare imlecinin satýr üzerine geldiðinde çalýþacak javascript kodu:
function uzerinegelince()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName(’table’);
for (var i=0;i<tables.length;i++)
{
if(tables[i].className==’uzerinde’)
{
var trs=tables[i].getElementsByTagName(’tr’);
for(var j=0;j<trs.length;j++)
{
if(trs[j].parentNode.nodeName==’TBODY’)
{
trs[j].onmouseover=function(){this.className=’uzerineGel ince’;return false}
trs[j].onmouseout=function(){this.className=”;return false}
}
}
}
}
}
}
Bu kodu tetiklemek için:
<body onload="uzerinegelince()">
kodunu yazalým. Fare imlecinin üzerine geldiðinde satýr zemin rengi ve metin renginin deðiþmesi bölümün de bir iki dikkat edilmesi gereken yer var. Ýlki tablodaki class="uzerinde" ve javasciriptteki if(tables[i].className==’uzerinde‘) ayný olmasý, ikincisi javascriptteki
trs[j].onmouseover=function(){this.className=’uzerineGel ince‘;return false}
ile
#golKrallari tr.uzerineGelince td, #golKrallari tr.uzerineGelince th{
background:#474747;
color:#f3f3f3;
}
ayný olmasý. Evet tablomuz sona erdi.
Sonuç sayfasýný görmek için týklayýnýz.
Kodlar Windows ortamýnda Firefox 2.0, IE 5.01, IE7 ve Opera 9.0 web tarayýcýlarý ile test edilmiþtir.
CSS ile Tablolarý þekillendirmek
Ağaç şeklinde