Bootstrap Tables Örnekleri

Bootstrap tablo örneklerini görebilmek için aşağıdaki kodları bootstrap standart kodları ile ekleyip çalıştırın.

<div class="container">

<h3 style="color:blue">standar tablo</h3>
<table class="table">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">çizgili tablo</h3>
<table class="table table-striped">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">hücreli tablo</h3>
<table class="table table-bordered">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">hover, üzerindeyken satırlar renklenen tablo</h3>
<table class="table table-hover">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
 <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>


<h3 style="color:blue">renkli tablo ve renklerin bootstrap ta kullanım amaçları</h3>

<table class="table">
<tr>
  <td class="active">active tablo hücresi...</td>
  <td class="success">success tablo hücresi...</td>
  <td class="warning">warning tablo hücresi...</td>
  <td class="danger">danger tablo hücresi...</td>
  <td class="info">info tablo hücresi...</td>
  </tr>
  <tr>
  <td class="info">info tablo hücresi...</td>
  <td class="danger">danger tablo hücresi...</td>
  <td class="warning">warnin tablo hücresi...</td>
  <td class="success">success tablo hücresi...</td>
  <td class="active">active tablo hücresi...</td>
 </tr>
</table>

<h5 style="color:blue"> yukarıdaki renklerin bootstrapta kullanım alanları </br>
.active = belirli bir satır veya hücreye vurgulu renk uygular </br>
.success = başarılı ya da pozitif eylemi gösterir </br>
.info = nötr bilgilendirici değişiklik veya eylemi gösterir </br>
.warning = dikkat gerekebilir bir uyarı gösterir </br>
.danger = tehlikeli veya potansiyel olumsuz bir etki gösterir </br>
</h5>
</br>

<h3 style="color:blue">table-responsive tablonun altına scrooll ekler</h3>
<div class="table-responsive">
<table class="table">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
 </table>
 <div>
 </br>
 </br>


</div>

bootstrap bootstrap tables tables