CSS Dersleri Bölüm 8 –Tabloları Stillendirme

CSS Dersleri Bölüm 8 –Tabloları Stillendirme

by Hasan Yasin Türkyılmaz Ağustos 26, 2011

Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.

Ek açıklama da; bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…

Table Borders(tablo kenarları)

border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.

Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:

Örnek

table, th, td
 {
 border: 1px solid black;
 }
 Kendiniz deneyin! »

Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.

Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.

Kenarları birleştirmek

border-collapse özelliği tablo kenarlarının birleşik ya da ayrı olup olmayacağını belirler:

Örnek

table
 {
 border-collapse:collapse;
 }
 table,th, td
 {
 border: 1px solid black;
 }
Kendiniz deneyin! »

 


Tablo genişlik ve yüksekliği

Width ve height özellikleri ile tablonun genişlik ve yüksekliği belirlenir.

Aşağıdaki örnekte genişlik yüzde yüz ve yükseklik de 50px:

Örnek

table
 {
 width:100%;
 }
 th
 {
 height:50px;
 }
Kendiniz deneyin! »

 


Tablo yazısı hizalaması

text-align ve vertical-align özellikleri ile tablo içeriği hizalanmaktadır.

text-align özelliği yatay hizalama tıpkı sol,sağ  veya merkeze alma gibi(left,right,center):

Örnek

td
 {
 text-align:right;
 }
Kendiniz deneyin! »

vertical-align özelliği de dikey hizalama için  tıpkı tepede, dipte veya ortada gibi(top,bottom,middle):

Örnek

td
 {
 height:50px;
 vertical-align:bottom;
 }
Kendiniz deneyin! »

 


Table Padding(Tablo iç boşluğu)

Tablodaki içerik ile kenar arasındaki boşluğu kontrol edebilmeyi sağlar padding özelliğini td ve th elementlerinde kullanmak:

Örnek

td
 {
 padding:15px;
 }
Kendiniz deneyin! »

 


Table Color(Tablo rengi)

Aşağıdaki örnek bize tablo kenarlarının rengini ve  th elementine ait olan yazının ve arkaplanın rengini değiştirmeyi göstermektedir:

Örnek

table, td, th
 {
 border:1px solid green;
 }
 th
 {
 background-color:green;
 color:white;
 }
Kendiniz deneyin! »

 


Daha fazla Örnek

Süslü bir tablo yapın
 Bu örnek süslü bir tablo yapımını göstermektedir.
Tablo başlığının konumunu ayarlama
 Bu örnek tablo açıklamasının konumunu ayarlamayı göstermektedir.

Bültenime kaydol!

İster soru sor, ister yazılarımdan ve etkinliklerimden haberdar ol...

Hasan Yasin Türkyılmaz

Dijital stratejist, growth hacker, pazarlama ve reklam danışmanı, eğitmen, konuşmacı, yazar @bilgeadam @g4asw @hyturkyilmaz

Related Articles

%d blogcu bunu beğendi: