Temel Tablo

Bootstrap tablolar ile verilerimizi düzenli ve tasarımsal olarak güzel bir sıraya sokabiliriz. Bunun için table yi kullanacağız farklı tablolar tasarlayarak bunları nasıl responsive hale getireceğimizi öğreneceğiz. Hem masaüstü cihazımızda hemde mobil cihazımızda düzgün bir şekilde gösterilen tablolar tasarlamayı öğreneceğiz.

Temel bootstrap tablolarında hafif bir iç boşluk ve sadece hayat ayraçlar mevcuttur.

.table classı temel sitili tabloya uygular.

<h4>Dersler</h4>
                    <table class="table table-striped table-hover table-condensed">
                        <!--
                        hover: hangi satıra gelirsen o satırı seçer
                        striped:tablonun her satırını farklı renk yapar
                        condensed: satın aralığını azaltır
                        bordered: kenaralık ekler
                        -->
                        <thead>
                            <tr>
                                <th>Ders Kodu</th>
                                <th>Ders Adı</th>
                                <th>Kredi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                            <td>111111</td>
                            <td>İnetnet Programcılıgı</td>
                            <td>5</td>
                            </tr>
                             <tr>
                            <td>111111</td>
                            <td>Görsel Programlama</td>
                            <td>5</td>
                            </tr>
                             <tr>
                            <td>111111</td>
                            <td>Nesne Tabanlı Programlama</td>
                            <td>5</td>
                            </tr>
                             <tr>
                            <td>111111</td>
                            <td>Ağ Sistemleri</td>
                            <td>5</td>
                            </tr>

                        </tbody>

                    </table>

Çizgili Satırlar /  Zebra sitil

.table-striped sınıfı tabloya zebra çizgileri ekler.

Kenarlık Çizgilerine Sahip Tablolar

.table-bordered sınıfı tabloların ve hücrelerin tüm kenarlarına kenarlık ekler.

Hover Rows

.table-hover sınıfı tablo satırları üzerine işaretçi geldiğinde o satıra hover sitili uygular.

Yoğunlaştırılmış Tablo

.table-condensed classı uygulandığı tablonun cell padding ölçülerini yarıya indirerek daha kompakt hale getirir.

Tabloların İçeriksel Renk Classları ile Kullanımı

İçeriksel renk classları <tr> etiketlerine veya <td> etiketlerine uygulanabilir.

Responsive Tablolar

.table-responsive classı tabloya responsive özelliği kazandırır.

<div class="table-responsive">
<table class="table">

Aşağıdaki yer alan şekillerde responsive tablonun genişlik 768px altına indiğinde nasıl göründüğü yer almaktadır.