Tablo Özellikleri Tablo oluştururken kullandığımız <table>, <tr>, <td> ve <th> etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan.

... konulu sunumlar: "Tablo Özellikleri Tablo oluştururken kullandığımız <table>, <tr>, <td> ve <th> etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan."— Sunum transkripti:

1 Tablo Özellikleri Tablo oluştururken kullandığımız <table>, <tr>, <td> ve <th> etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan çok daha şık ve okunaklı tabloları elde edebiliriz. Tablomuzu oluştururken şu özelliklere stil uygulayabiliriz: Tablo Kenar Çizgileri Tablo Genişliği ve Yüksekliği Tabloda Metin Hizalama Tablo Kenar Çizgisi İçi Mesafesi Tablo Hücre Rengi

2 Tablo Kenar Çizgileri Daha önce gördüğümüz “border” özelliğini, tablomuzu oluşturan <table>, <td> ve <th> etiketlerine uygulayarak, kenar çizgilerinin biçimini, genişliğini ve rengini ayarlayabiliriz. Örnek: table td { border: 1px solid #CCC; }

3 Tablo Genişliği ve Yüksekliği
Tablo genişliği için “width” ve tablo yüksekliği için “height” özelliklerini kullanıyoruz. Örnek: Tablo genişliğimiz görülen alanın %100‟ü ve hücre yüksekliklerimiz 40 piksel olsun. table{ width:100%;} td {height:40px;}

4 Tabloda Metin Hizalama
Tabloda hücre içindeki ögeler yatay veya dikey olarak hizalanabilir. Hücre söz konusu ise <td> etiketi söz konusudur. Yatay hizalama yaparken metin hizalama özelliklerinden olan text-align özelliği kullanılır. Değer olarak ; left (sola daya), right (sağa daya), center (ortala) verilir. Örnek: td{ text-align:right; } Dikey hizalama yaparken yine metin hizalama özelliklerinden olan vertical-align özelliği kullanılır. Değer olarak top (üst) , bottom (alt) middle (orta) verilir. Örnek: td { height:100px; vertical-align:bottom; }

5 Tablo Kenar Çizgisi İçi Mesafesi
Kenar içi boşluğunun “padding” özelliği ile yapıldığını biliyoruz. Öyleyse tabloda da td etiketi üzerinde " padding " özelliğini kullanarak her hücrenin kenar çizgisi ile içerik arasındaki mesafeyi (boşluğu) kontrol edebiliriz. Örnek: td { padding:10px; }

6 Tablo Hücre Rengi Tablonun kenar çizgisi renginin “border-color” ve tablodaki metnin renginin “color” özelliği kullanılarak ayarlandığını biliyoruz. Tablodaki hücrelere zemin (background) rengi verme işini de <td> etiketine “background-color” özelliğini uygulayarak gerçekleştireceğiz. Örnek: Tablomuzdaki metin renginin #CCC , arka plân renginin #9F3 olması için, td { background-color:#9F3; color:CCC; }

7 Uygulama Örneği Ön izlemesi aşağıdaki şekilde olan tablonun içerik ve tasarım kısmını oluşturalım. Stil uygulanmış bir tablo

8 CSS Modül Sayfa 51