Merhaba,

Bu dersimizde Css ile tablo özelliklerine değineceğiz.

Html in vazgeçilmez öğelerinden biride hepimizin bildiği tablolardır.

Tablolarda kendi içerisinde th, tr, td gibi elementlere sahiptirler ve bu dersimizde bu elementlerin renkleri, kenar çizgileri, içlerinde bulunan elementlerin hizalamaları boyutları gibi görsel noktaları işleyeceğiz.

Kenarlıklar ;

Kenarlık konusunu daha sonra detaylı bir biçimde işleyeceğiz şimdilik sadece tablolarda kullanımına bakalım.

Yazdığımız bu kod ile tablomuza 1px genişliğinde solid siyah bir çerçeve eklemiş olduk. Eğer satır ve kolonlarıda kenarlıklı yapmak istersek kodumuzu şu şekilde modifiye edebiliriz.

Artık ana çerçeve, satır ve sütun larda da borderımız mevcuttur.

Eğer mevcut borderı kaldırmak istersek ;

Table, th, td {border-collapse : collapse ;} kod satırını kullanmamız yeterli olacaktır.

En ve Yükseklik ayarları ;

Tablomuzu en için width boy için heigth parametrelerini kullanarak boyutlandırabiliriz.

Örneğin ;

Table {width:100%;} komutunu kullanarak tablomuzun genişiliğini bir üst öğresi yada içinde bulunduğu sayfa genişliğinde yapabiliriz. (% kullanımında rakam % iconundan önce gelmelidir.)

Th {heigth : 40px;} aynı şekilde satır yüksekliğimizide örnekte görüldüğü gibi 40px olarak ayarlayabiliriz.

Hizalama ;

Tablolarda hizalama yazı hizalama ile aynı şekilde kullanılmaktadır.

Td {text-align : center;} bu hücre içerisindeki yazı artık ortalanmış olarak duracaktır. Burada bir diğer husus tablo hücreleri en ve boydan oluştuğundan dolatı sadece sağa sola veya ortala gibi değil yukarı aşağı hizlama özellikleride bulunmaktadır. Dolayısı ile bizim şu kod satırınıda bilmemiz gerekmektedir.

Td{vertical-align:top;} bu satır ile elemente içeriğini üste dayaması gerektiğini bildirdik.

Vertical-align için sık kullanılan parametreler : top, bottom, middle, baseline,inherit

Top : Ãœst

Bottom : Alt

Middle : Orta

İnherit : Bir üst elementin özelliği ne ise onu alır.

Renklendirme ;

Tablolarda arkaplan ve yazı renklendirmesi kullanılmaktadır.

Bu yaptığımız işlem ile tablomuzun arka planını siyah yazılarını beyaz yaptık. Ancak başlık satırının farklı renkte olmasını istiyoruz.

Ozaman;

Olarak ufak bir eklemede bulunalım.

Tablo görselleştirmesi ile ilgili yazımızında sonuna geldik. Bir sonraki dersimizde border (kenar çizgileri) yapısını detaylı bir biçimde işleyeceğiz.

İyi Günler Dilerim,