Bootstrap 4 ile tablolarımıza stil vermek artık çok kolay. Yapmamız gereken tek şey, öncelikle tablomuzu Html ile yazmak. Daha sonra ise nasıl bir tasarım istiyorsak ona uygun bootstrap table class’larını kullanmak. Bu bootstrap table class’larının neler olduğuna geçmeden önce, sadece Html kullanarak şu şekilde bir tablo oluşturalım.
|
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 |
<table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
Tablomuzu oluşturduğumuza göre şimdi bootstrap table class’larını tek tek inceleyelim.
⇒ Bir tabloya diğer class’ları eklemeden önce, en temel gerekli stilleri vermek için <table> etiketinin class’ına table yazıyoruz. Bunu yazdığımızda tablomuza padding değeri vermiş ve yatay çizgileri eklemiş oluruz.
|
1 2 3 4 5 |
<table class="table"> /* İçerik */ </table> |
Tablomuzun görünümü;
⇒ Tabloya padding değeri verip yatay çizgileri ekledik. Tablonun satırlarının farklı renklerde olması için yani zebra görünümü elde etmek için, <table> etiketinin class’ına table-striped yazıyoruz.
|
1 2 3 4 5 |
<table class="table table-striped"> /* İçerik */ </table> |
Tablomuzun görünümü;
⇒ Tabloya kenarlık vermek için, <table> etiketinin class’ına table-bordered yazıyoruz.
|
1 2 3 4 5 |
<table class="table table-striped table-bordered"> /* İçerik */ </table> |
Tablomuzun görünümü;
Not : Tablonun tüm kenarlıklarını kaldırmak için, <table> etiketinin class’ına table-borderless yazıyoruz.
⇒ Tabloda hangi satırın üzerinde olduğumuzu belirgin hale getirmek için hover efektini kullanabiliriz. Bunun için, <table> etiketinin class’ına table-hover yazıyoruz.
|
1 2 3 4 5 |
<table class="table table-striped table-bordered table-hover"> /* İçerik */ </table> |
Tablomuzun görünümü;
⇒ Tablonun padding değerini azaltarak daha küçük bir tablo elde edebiliriz. Bunun için, <table> etiketinin class’ına table-sm yazıyoruz.
|
1 2 3 4 5 |
<table class="table table-striped table-bordered table-sm"> /* İçerik */ </table> |
Tablomuzun görünümü;
⇒ Bootstrap 4’te tablolar ile kullanabileceğimiz bazı renk class’ları vardır. Bu class’ları <table>, <tr> veya <td> etiketlerine vererek ister tablonun ister satırın istersek de kolonun arkaplan rengini değiştirebiliriz. Bu renk class’ları şunlardır:
- table-active
- table-primary
- table-secondary
- table-success
- table-danger
- table-warning
- table-info
- table-light
- table-dark
Örneğin siyah renkli arkaplana sahip bir tablo elde etmek için, <table> etiketinin class’ına table-dark yazıyoruz.
|
1 2 3 4 5 |
<table class="table table-striped table-bordered table-dark"> /* İçerik */ </table> |
Tablomuzun görünümü;
Bu örnekte tablonun tamamının arkaplan rengini değiştirdik. Şimdi de her satıra farklı bir renk class’ı vererek, satırların arkaplan rengini değiştirelim.
⇒ Tablonun başlıklarının bulunduğu satır yani <thead> etiketinin class’ına thead-dark yazarsak siyah bir arkaplan rengi ekler. Eğer <thead> etiketinin class’ına thead-light yazarsak gri bir arkaplan rengi ekler.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table class="table table-bordered"> <thead class="thead-dark"> </thead> <tbody> </tbody> </table> <table class="table table-bordered"> <thead class="thead-light"> </thead> <tbody> </tbody> </table> |
Tablolarımızın görünümü;
Bootstrap 4 ile Responsive Tablo Nasıl Yapılır?
⇒ Responsive bir tablo elde etmek için yapmamız gerekenler:
- Tabloyu içine alacak şekilde bir div oluşturmak.
- Oluşturduğumuz bu div’in class’ına table-responsive yazmak.
Böylece tablo ekrana sığmayacak boyutta olduğunda scroll oluşacak.
|
1 2 3 4 5 6 7 |
<div class="table-responsive"> <table class="table"> /* İçerik */ </table> </div> |
Tablomuzun görünümü;
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}