CSS ile çizilen tablolar

30 / Kasım / 2008 Author

İsa Engiz

Genel

css, tablo Yorumlar

9 Yorum Yapilmis.

css ile çizilen tablolar CSS ile tablo çizmek istediğinizde karşınıza hemen iki alternatif çıkar, birincisi, < table> etiketleri ile çizecek ve bu etiketlere CSS ile sitil vereceksiniz. Bunun örneklerini internette bulabilirsiniz. İkinci seçenek ise < table> etiketleri kullanmadan tablo çizmektir ki bu yazımızda bunu ele alalım. Örneğimize buradan erişebilirsiniz.

Mantık

CSS ile tablo çizmekte iki kilit noktamız var.

1 – Satırları < li> etiketleri ile ayıracağız. Daha önce “CSS ile form tasarlama” yazımızda da buna benzer bir mantık yürütmüştük.
2 – Satırlardaki hücreleri ise < div> etiketleri ile ayıracağız.

HTML kısmı

Örneğimizde yer alan tablonun HTML kodu, yukarıda söylediğimiz mantığa göre şu şekilde:

	<ul>
 
		<li class="baslik">
			<div class="sutun">İsim</div>
			<div class="sutun">Yaş</div>
			<div class="sutun">Meslek</div>
			<div class="sutun">Yer</div>
			<div style="clear:both"></div>
 
		</li>
 
		<li>
			<div class="sutun">Ali</div>
			<div class="sutun">34</div>
			<div class="sutun">Grafiker</div>
			<div class="sutun">Bursa</div>
			<div style="clear:both"></div>
 
		</li>
 
		<li>
			<div class="sutun">Mehmet</div>
			<div class="sutun">26</div>
			<div class="sutun">HTML-CSS Geliştirici</div>
			<div class="sutun">İstanbul</div>
			<div style="clear:both"></div>
 
		</li>
 
		<li>
			<div class="sutun">Ahmet</div>
			<div class="sutun">29</div>
			<div class="sutun">PHP-MySQL Geliştirici</div>
			<div class="sutun">Çanakkale</div>
			<div style="clear:both"></div>
 
		</li>
 
	</ul>

Görüldüğü gibi satırlar < li> etiketi ile, hücreler ise < div> etiketleri ile ayrılmış durumda.

CSS kısmı

CSS bölümünde ise li ve div etiketlerine sitillerimizi verelim:

      ul {
		list-style-type:none;
		float:left;
		padding:0px;
		margin:0px;
		width:500px;
	}
	li {
		padding:0px;
		margin:0px;
		display:block;
		border:2px solid #eee;
	}
	li:hover {
		background-color:#e4efd5;
	}
	li.baslik {
		background-color:#faf0e6;
		font-weight:bold;
	}
	div.sutun {
		width:112px;
		padding:5px;
		margin:0px;
		border:1px solid #eee;
		float:left;
		height:35px;
	}

Burada iki önemli nokta bulunmakta:

1 – li etiketlerinin margin değerleri, satır aralarını belirtmekte, buna 0 değerini verdik, başka bir değer verirsek satırlar arasında mesafe gözükecek.
2 – div etiketlerini “float:left” olarak tanımladık. Bu şekilde yan yana sıralanıyor olacaklar.

Sonuç

CSS ile tablo çizmenin mantığı bu şekilde, li ve div etiketlerinin kullanılması. Normal yolla çizilen tabloya göre bariz bir avantajı bulunmamakla beraber, bazı CSS severler için bu işlem güzel olacaktır!

Örnek tablomuza buradan erişebilirsiniz. Ya da diğer yazıları “içindekiler” sayfasında görüntüleyebilirsiniz.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!