CSS ile Div Tablo Oluşturma

Bu yazımda css de yazacağımız kodlarla div – tablo oluşturmayı göreceğiz.

Mesela yandaki menü tarzında bir tablo oluşturacağız. Eski sitemde table açarak oluşturduğmuzu biliyorsunuz. Yeni sistemde artık böyle değil. Yani biz böyle bir tabloyu oluşturmak için az kod harcamalı ve kullanıcıya hızlı veri getirebilmek için kodları css içine gömüyoruz ve oradan okutuyoruz.

Şimdi basit bir şekilde büyük dış kutumuzu yapıp sonrada aradaki ayraçları yerleştirirsek aslında bu tabloyu rahatlıkla oluşturabiliriz.

Oncelikle css kodlarımızı verelim;

#kutu {width:110px; height:80px; border:2px solid #399;float:left; font-family:candara; font-size:14px; text-align:center}
#ayrac {border-bottom:1px solid #399;}

Şimdide menüyü oluşturacak html kodlarımızı verelim;

<div id="kutu">
Anasayfa
<div id="ayrac"></div>
Program
<div id="ayrac"></div>
Oyun
<div id="ayrac"></div>
</div>

Gördüğünüz gibi bir dış kutu oluşturdum. Yüksekliğini, genişliğini, kalınlık, yazı tipi ve rengini belirttim. Hemen ardından ayracı oluşturdum onada kalınlık ve renk atadım.

Daha sonra html kodlarımada görüntülemek istediğim tablonun içerisindeki verileri yazdım. Ayırmak istediğim verinin hemen altına ise

<div id="ayrac"></div>

kodunu yazarak ayraç eklemiş oldum.




Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir