Bootstrap Tablo Oluşturma

Tablo Çeşitleri

-Basit tablo:

Kod:

<table class="table">
  ...
</table>


Görünüm:






-Arka alanı çizgili tablo:
Kod:
<table class="table table-striped">
  ...
</table>


Görünüm:





-Çerçevelenmiş Tablo:



Kod:
<table class="table table-bordered">
  ...
</table>




Görünüm:







-Satır üzerine gelince arkaplan rengi değişen tablo:





Kod:

<table class="table table-hover">
  ...
</table>


Görünüm:




-Olaya göre arkaplan rengi olan tablolar:



Sınıf Özellikleri:
.active : Yazılan satırı vurgular.
.success: Başarılı veya pozitif satırları gösterir.
.info: Nötr bilgilendiren bir değişiklik veya eylemi belirtir.
.warning: Dikkat gerekir uyarısında gösterilebilir.
.danger: Tehlikeli veya olumsuz uyurısında gösterilebilir.

Kod:


<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>








Görünüm:





-Boyuta göre ayarlanan tablo:

Kod:


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


Görünüm: