Css Tablolar

Css tablo biçimlendirme özellikleri Html dersleri'nde öğrendiğimiz tablolara stil vererek görsel açıdan daha güzel tablolar oluşturmak için kullanılmaktadır.

Tablolara renk ekleme, genişliğini ve yüksekliğini belirleme, kenarlıklara özellik ekleme kalınlığı inceliği gibi, tablo içindeki metinleri hizalama, tablo içindeki metinlerin görsel açıdan zengin olmasını sağlama, hücrelerin üzerine geldiğinde belirgin olması ve responsive tabloların nasıl yapılacağını anlatacağız.

Css tabloları biçimlendirirken kullanacağımız özellikler:

1. Tablo kenar çizgileri 
   • border
   • border-collapse
2. Tablo genişliği ve yüksekliği
   • width
   • height
3. Tablo Metin hizalama
   • text-align
   • vertical-align
4. Tablo kenar içi boşluk
   • padding
5. Tablo hücre rengi
   • background-color

Tablo Kenar Çizgileri

Tablo kenar çizgilerinin rengini , kalınlığını, tipini belirlemek için border, border-collapse, border-color özelliği kullanılmaktadır.

Border Özelliği

Border özelliği tablo kenar kalınlığı, kenar rengi ve kenar çizgi tipini belirlemek için kullanılmaktadır.

Border Özelliği Kullanımı

<style>

table,tr,td{

border:2px dotted blue;

}

</style>                 

Kodu Çalıştır

Border-collapse Özelliği

Tabloda bulunan hücrelerin hepsi çerçeve içerisinde bulunmaktadır. Bu özelliği kaldırmak için border-collapse özelliği kullanılmaktadır.

Border-collapse Özelliği Kullanımı

<style>

table{

border-collapse:collapse;

}

table,tr,td{

border:2px solid black;

}

</style>                    

Kodu Çalıştır

Tablo Genişliği ve Yüksekliği

Eklediğimiz tablolara genişlik ve yükseklik vermek için kullanılmaktadır.

Width ve Height Özelliği

Width özelliği tablonun genişliğini ayarlamak için , height özelliği ise tablonun yüksekliğini ayarlamak için kullanılmaktadır.

Width ve Height Özelliği Kullanımı

<style>

table, th, td {
  border: 2px solid black;
}

table {
  width: 100%;
}

th {
  height:40px;
}

</style>                    

Kodu Çalıştır

Tabloda Metin Hizalama

Tablolarda metin hizalama için text-align ve vertical align özellikleri kullanılmaktadır.

Text-align Özelliği

Metnin konumunu yani sağ, sol veya ortada olmasını ayarlamak için kullanılmaktadır.

Text-align Özelliği Kullanımı

<style>

table, th, td {
  border: 1px solid black;
}

table{

width:500px;
text-align:right;

}


</style>                   

Kodu Çalıştır

Vertical-align Özelliği

Tabloda bulunan metni dikey olarak hizalamak için kullanılır. Vertical align özelliği 4 farklı değer almaktadır. Bunlar:

• top : Metnin üstte olmasını sağlar.
• bottom : Metnin altta olmasını sağlar.
• middle : Metnin ortada olmasını sağlar
• center : Metnin ortada olmasını sağlar.

Vertical-align Özelliği Kullanımı

<style>

table, th, td {
  border: 1px solid black;
}


tr{

height:50px;
vertical-align:bottom;

}


</style>                   

Kodu Çalıştır

Tablo Kenar İçi Boşluk

Tabloda kenar içi boşluk bırakmak için css kenar içi boşluk dersi'nde anlattığımız padding özelliği kullanılmaktadır. 

Padding Özelliği

Padding özelliği tabloda kenar içi boşluk bırakmak için kullanılmaktadır. 

Padding Özelliği Kullanımı

<style>

table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
  padding:25px;
}

</style>                 

Kodu Çalıştır

Tablo Hücre Rengi

Tabloda hücre rengini yani arkaplanına renk eklemek için background-color özelliği kullanılmaktadır.

Background-color Özelliği

Html ögelerinin arkaplanına renk eklemek için background-color özelliği kullanılmaktadır.

Tabloda Background-color Özelliği Kullanımı

<style>

table{
   width:100%;
   text-align:left;

}

table, th, td {
   border-collapse:collapse;
   padding:15px;

}

th{
   background-color:orange;

}

.renk{background-color: #eee}

</style>                  

Kodu Çalıştır

Örnek:

Tabloda üzerine gelindiğinde tabloyu belirgin hale getiren tablo örneği.

<style>

table, th, td {
  border-bottom: 1px solid black;
  border-collapse:collapse;
  padding:15px;
}

tr:hover{
   background-color:#ddd;

}

</style>                    

Kodu Çalıştır

Önceki Ders: Css Bağlantılar

Sonraki Ders: Css Listeler