Top

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

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

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.

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 7 – Listeleri Stillendirme başlıklı makalemizde crossbrowser, css ve dersleri hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious