HTML ile oluşturduğumuz tabloları, HTML ile belli bir yere kadar özelleştirebilmekteyiz. Bildiğiniz gibi özelleştirme dendiği zaman akla CSS gelmektedir. Tam bu noktada ise devreye; CSS tablo özellikleri giriyor. HTML ile özelleştirme yerine CSS ile özelleştirebilme ve zenginleştirme imkanı oldukça fazladır. Tablolarımızın görünümünü zenginleştirirken en büyük yardımcımız CSS kodları olacaktır.
Tablo oluşturma ve tablo özellikleri hakkında bilgi sahibi değilseniz, ” HTML Tablo Oluşturma “ konumuza göz atabilirsiniz.
Örnekler yardımıyla tablolarımızı nasıl CSS ile özelleştireceğimizi birlikte inceleyelim.
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Elimizde bu şekilde bir tablo bulunsun. Bu tablonun adım adım özelleştirmelerini yapalım. İlk olarak tablonun çerçevesini ayarlamakla başlayalım.
İçindekiler
Tabloya çerçeve ekleme
Tablomuza yeşil renkte, 5px kalınlığında bir çerçeve eklemek istersek; border
parametresini kullanmamız gerekecek.
1 2 3 4 5 | <style> table { border: 5px solid green; } </style> |
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Hücre içi çerçeve ekleme
Tablomuzun çerçevesini ayarladıktan sonra, hücre içi çerçeve ayarlamasını yapalım. Hücre içi çerçeve ayarlaması yaparken, border-collapse
özelliğini kullanmamız; bize görünüm açısından fayda sağlaycaktır. border-collapse parametresi ile tablo kenarlıklarının belli bir sınır dahilinde birleşmesini ayarlamaktayız.
1 2 3 4 5 6 7 8 9 10 11 12 | <style> table { border: 5px solid green; border-collapse: collapse; } table th { border: 2px solid green; /* Tablo başlığı hücrelerine kenarlık eklemesi yaptık */ } table td { border: 2px solid green; /* Tablo içeriği hücrelerine kenarlık eklemesi yaptık */ } </style> |
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Tablonun arka plan rengini değiştirme
Şimdi de tablo içeriğimizin arka plan renk ayarlamalarını; hücre içi renklendirmelerine bakalım. CSS ile arka plan renklendirmesi yaparken; background-color
parametresi kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> table { border: 5px solid green; border-collapse: collapse; } table th { border: 2px solid green; background-color: cadetblue; /* Tablo başlığının arka plan rengini belirledik */ } table td { border: 2px solid green; background-color: coral; /* Tablo içeriğinin arka plan rengini belirledik */ } </style> |
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Tablo yazılarının görünümünü değiştirme
CSS metin özelliklerinde ve font özelliklerinde kullandığımız özellikleri, tablo özelleştirmelerinde kullanabiliriz. Örneğin yazıların boyutunu, kalınlığı gibi çeşitli özelleştirmeleri yapabiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style> table { border: 5px solid green; border-collapse: collapse; text-align: center; /* Metin hizalamasını ortaladık */ font-weight: bold; /* Font kalınlığı ayarlaması yaptık */ } table th { border: 2px solid green; color: brown; /* Tablo başlığının metin rengini ayarladık */ text-shadow: -1px -1px 3px darkmagenta; /* Tablo başlığı metinine gölge ekledik */ font-size: x-large; /* Yazı boyutunu x-large olarak ayarladık */ } table td { border: 2px solid green; color:darkblue; /* Tablo içeriğinin metin rengini ayarladık */ font-family: Comic Sans MS; /* Tablo içeriğinin yazı tipi ailesini belirledik */ } </style> |
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Tablo boyutu ayarlama
Tablonun genel yükseklik ve alçaklık değerlerini de değiştirebiliriz. height
ve width
etiketlerini kullanarak yapmaktayız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> table { border: 5px solid green; border-collapse: collapse; height: 150px; /* Tablonun genel yükseliğini ayarladık */ width: 200px; /* Tablonun genel genişliğini ayarladık */ } table th { border: 2px solid green; } table td { border: 2px solid green; } </style> |
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Hücre içi boşluk ayarlama
Tablomuz içerisinde hücre içi boşlukların ayarlanmasında padding
parametresini kullanmaktayız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> table { border: 5px solid green; border-collapse: collapse; } table th { border: 2px solid green; padding: 20px; /* Tablo başlık hücrelerinin boşluğunu ayarladık */ } table td { border: 2px solid green; padding: 3px; /* Tablo içerik hücrelerinin boşluğunu ayarladık */ } </style> |
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Tabloya hover ekleme
Tabloyu CSS ile özelleştirme yaparken belki de en çok beğenebileceğiniz özelliklerden birisi, hover
özelliği olabilir. Tablo satırlarının üzerine geldiğiniz zaman satırın renklenmesini sağlayan bu özellik ile tablonuzu zenginleştirebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> table { border: 5px solid green; border-collapse: collapse; } table th { border: 2px solid green; } table td { border: 2px solid green; } tr:hover { background-color: olive; } </style> |
İsim | Vize | Final |
---|---|---|
Mustafa | 55 | 70 |
Mert | 65 | 15 |
Genel özet ve tüm özelleştirmelerin kullanımı
Öğrendiğimiz bu bilgiler doğrultusunda; bütün özellikleri kullanarak bir tablo oluşturalım.
ÜLKELER | TOPLAM VAKA | TOPLAM İYİLEŞEN | TOPLAM VEFAT |
---|---|---|---|
ABD | 31.175.882 | 23.674.406 | 565.331 |
Brezilya | 12.753.258 | 11.169.937 | 321.886 |
Hindistan | 12.299.987 | 11.522.224 | 163.421 |
Fransa | 4.644.423 | 294.638 | 95.640 |
Rusya | 4.554.264 | 4.176.419 | 99.233 |
İngiltere | 4.350.266 | 3.860.174 | 126.764 |
İtalya | 3.607.083 | 2.933.757 | 109.847 |
Türkiye | 3.357.988 | 3.035.043 | 31.713 |
İspanya | 3.291.394 | 3.042.352 | 75.541 |
Almanya | 2.840.489 | 2.535.000 | 77.139 |
İlk olarak caption, tablo başlığına göz atalım;
1 2 3 4 5 6 7 8 9 | caption { border:2px solid black; padding: 5px; background-color:#d8ac72; font-family: Arial; font-weight: 750; font-size: large; text-shadow: 0px 0px 3px #fad8ab; } |
Tablonun genel CSS özelleştirmelerine bakacak olursak;
1 2 3 4 5 | table { border-collapse: collapse; border-spacing: 5px 5px; background-color:antiquewhite; } |
Tablo içerisinde ki başlık hücreleri özelleştirmeleri ise;
1 2 3 4 5 6 | table th { border: 2px solid black; background-color:#fad8ab; text-align: center; font-family: Arial; } |
Tablo içi hücrelerin özelleştirmeleri;
1 2 3 4 5 | table td { border: 2px solid black; font-family: Arial; text-align: justify; } |
Tablonun hover kodu;
1 | table tr:hover { background-color:#ddbc90; } |
Tablonun HTML kodu;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <table> <tr> <caption>1 Nisan 2021 COVID-19 Tablosu</caption> </tr> <tr> <th>ÜLKELER</th> <th>TOPLAM VAKA</th> <th>TOPLAM İYİLEŞEN</th> <th>TOPLAM VEFAT</th> </tr> <tr> <td>ABD</td> <td>31.175.882</td> <td>23.674.406</td> <td>565.331</td> </tr> <tr> <td>Brezilya</td> <td>12.753.258</td> <td>11.169.937 </td> <td>321.886</td> </tr> <tr> <td>Hindistan</td> <td>12.299.987</td> <td>11.522.224</td> <td>163.421</td> </tr> <tr> <td>Fransa</td> <td>4.644.423</td> <td>294.638</td> <td>95.640</td> </tr> <tr> <td>Rusya</td> <td>4.554.264</td> <td>4.176.419</td> <td>99.233</td> </tr> <tr> <td>İngiltere</td> <td>4.350.266</td> <td>3.860.174</td> <td>126.764</td> </tr> <tr> <td>İtalya</td> <td>3.607.083</td> <td>2.933.757</td> <td>109.847</td> </tr> <tr> <td>Türkiye</td> <td>3.357.988</td> <td>3.035.043</td> <td>31.713</td> </tr> <tr> <td>İspanya</td> <td>3.291.394</td> <td>3.042.352</td> <td>75.541</td> </tr> <tr> <td>Almanya</td> <td>2.840.489</td> <td>2.535.000</td> <td>77.139</td> </tr> </table> |
güzel