Bootstrap 4 Tablolar

.table .table-dark .table-light

HTML'de oluşturulan tablolara Bootstrap4 kullanarak çok kısa bir sürede, çok şık görünümler kazandırılabilir, ayrıca tablo çok daha işlevsel hale getirilebilir.
Bootstrap 4 tablolar anlatımına geçmeden önce HTML tablo etiketleri ile ilgili birkaç ayrıntıdan kısaca bahsetmek istiyorum.
tablo başlıklarının bulunduğu satır için thead
tablo bilgilerinin bulunduğu ana bölüm için tbody ve
tablo alt kısmı içintfoot etiketleri kullanılabilir.
Bu etiketler tablo bölümlere daha kolay ulaşmak ve arama motorlarına tablo hakkında bilgi vermek gibi sebeplerle kullanılırlar.
Artık Bootstrap4 tablolar anlatımına geçebiliriz.
Bootstrap4'te tablolara biçim vermek için table etiketine öncelikle .table özelliği verilir.
Örnek: <table class="table"> <tr> <td>Ali Fuat Başgil</td> <td>Operasyon</td> </tr> </table> Böylelikle tablomuz %100 genişliğinde olacak, uygun padding ve margin değerlerini alacak ve her satırın üstünde bir çizgi olacak şekilde ayarlanır. thead - tbody etiketleri kullanıldı ise başlık ile alt arasında olan çizgi daha kalın olacaktır.

Personel No Ad Soyad Birim
102 Raif Orbay İnsan Kaynakları
204 Ali Fuat Başgil Operasyon
311 Fatma Kara Loijistik
Aynı tabloya .table değerinden sonra .table-dark değeri de eklenerek tabloya koyu renk özelliği verilebilir.
Örnek: <table class="table table-dark"> Yalnızca başlık bölümüne açık veya koyu renk vermek için, thead etiketine .thead-light veya .thead-dark özellikleri verilmesi yeterlidir.Böylelikle tüm tablo değil sadece başlık kısımları verdiğimiz özellikten etkilenecektir.

.table-bordered .table-striped .table-hover

Bootstrap4'te tablolara kenarlık vermek için => .table-bordered
tabloları şerit halinde görüntülemek için => .table-striped
satır üzerine gelindiğinde renk değişimi için => .table-hover
özellikleri table etiketine verilmelidir.Bu özellikler table-dark ve table-light özellikleri ile birlikte verilebilir ve görünüm olarak farklı sonuçlar elde edilir.

.table-sm .table-responsive

Bootstrap4'te .table-sm özelliği ile tablolardaki padding değerleri azaltılarak daha küçük tablolar oluşturulabilir.
HTML tablolarındaki en büyük sorunlardan biri de tablo boyutlarının çözünürlük küçüldüğünde aynı kalması ve sayfanın hiç bir zaman mobil uyumlu olmaması idi. Bootstrap4 bu sorunu yalnızca .table-responsive değeri vererek aşmamızı sağlıyor.
caption etiketi tablo bilgisi veren kısa yazı olarak tanımlanır. caption da bootstrap4'te biçimlendirme özelliği alan etiketlerdendir.

table colors

Bootstrap4'ün sahip olduğu renkler(primary, info, success,warning, danger vs.) tablolara da uygulanabilir. Bu renkler istenirse tüm tabloya istenirse, yalnızca bir sütun veya tek bir hücreye uygulanabilir. Tablolara renkleri uygulamak için tek yapılması gereken bg-primary yerine table-primary özelliği vermektir. Örnek: <table class="table-danger"></table>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com