Bootstrap - Tablolar

Bootstrap, tablo oluşturmak için temiz bir düzen sağlar. Bootstrap tarafından desteklenen bazı tablo öğeleri şunlardır:

Sr.No.	Etiket ve Açıklama
1	<table> Verileri tablo biçiminde görüntülemek için sarma öğesi
2	<thead> Tablo sütunlarını etiketlemek için tablo başlığı satırları (<tr>) için konteyner öğesi.
3	<tbody> Tablonun gövdesindeki tablo satırları (<tr>) için konteyner öğesi.
4	<tr> Tek bir satırda görünen bir dizi tablo hücresi (<td> veya <th>) için konteyner öğesi.
5	<td> Varsayılan tablo hücresi.
6	<th> Sütun (veya kapsama ve yerleşime bağlı olarak satır) etiketleri için özel tablo hücresi. Bir <thead> içinde kullanılmalıdır
7	<caption> Tablonun ne içerdiğinin açıklaması veya özeti.

Temel Tablo

Sadece biraz hafif dolgu ve yatay bölücüler içeren güzel, basit bir tablo stili istiyorsanız , aşağıdaki örnekte gösterildiği gibi herhangi bir tabloya .table temel sınıfını ekleyin -

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

İsteğe Bağlı Tablo Sınıfları

Temel tablo biçimlendirmesi ve .table sınıfıyla birlikte, biçimlendirmeyi biçimlendirmek için kullanabileceğiniz birkaç ek sınıf vardır. Aşağıdaki bölümler size tüm bu sınıflara bir göz atacaktır.

Çizgili Masa

.Table-çizgili sınıfını ekleyerek , aşağıdaki örnekte görüldüğü gibi <tbody> içindeki satırlarda çizgiler elde edeceksiniz -

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Bordürlü Tablo

.Table-bordered sınıfını ekleyerek , aşağıdaki örnekte görüldüğü gibi, her öğeyi çevreleyen kenarlıklar ve tüm tablonun etrafında yuvarlak köşeler elde edeceksiniz -

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Fareyle Üzerine Gelme Tablosu

Ekleyerek .table-hover aşağıdaki örnekte görüldüğü gibi sınıf, açık gri arka plan, üzerlerinde imleç gezinen ise satır eklenecektir -

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Yoğun Tablo

.Table-yoğunlaştırılmış sınıfı eklenerek , tabloyu yoğunlaştırmak için satır doldurma ikiye bölünür . aşağıdaki örnekte görüldüğü gibi. Daha yoğun bilgi istiyorsanız bu yararlıdır.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Bağlamsal sınıflar

Aşağıdaki tabloda gösterilen Bağlamsal sınıflar, tablo satırlarınızın veya tek tek hücrelerinizin arka plan rengini değiştirmenize izin verir.

Sr.No.	Sınıf ve Açıklama
1	.active Fareyle üzerine gelme rengini belirli bir satıra veya hücreye uygular
2	.success Başarılı veya olumlu bir eylemi gösterir
3	.warning Dikkat edilmesi gerekebilecek bir uyarıyı gösterir
4	.danger Tehlikeli veya potansiyel olarak olumsuz bir eylemi gösterir

Bu sınıflar <tr>, <td> veya <th> için uygulanabilir.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Duyarlı Tablolar

Herhangi sarılmasıyla .table içinde .table duyarlı sınıf, yatay yukarı küçük cihazlara (768px altında) masa kaydırma yapacaktır. 768 pikselden daha geniş herhangi bir şey üzerinde görüntülerken, bu tablolarda herhangi bir fark görmeyeceksiniz.

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>