Bootstrap'ta tablo oluşturmak için table, thead, tr, th, tbody ve td etiketleri kullanılmaktadır. Örnek basit bir tablo oluşturalım. Eğer tablolar konusunda hiç bilginiz yok ise html tablolar dersimize bakabilirsiniz.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Yukarıdaki 3 satır 2 sütun tablonun kodu:
<table class="table">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap tablo etiketi için kullanılan sınıflar:
Bootstrap .table sınıfı en temel tablo oluşturmak için kullanılan sınıftır. .table sınıfı olmadan bootstrap tablo oluşturamazsınız.
<table class="table">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
<th>Başlık 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
<td>Hücre 3</td>
</tr>
<tr>
<td>Hücre 4</td>
<td>Hücre 5</td>
<td>Hücre 6</td>
</tr>
</tbody>
</table>
Bootstrap table sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan tablodur.
Başlık 1 | Başlık 2 | Başlık 3 |
---|---|---|
Hücre 1 | Hücre 2 | Hücre 3 |
Hücre 4 | Hücre 5 | Hücre 6 |
Bootstrap table-striped sınıfı çizgili tablo denilen bir beyaz bir gri olarak görünen tablo eklemek için kullanılır.
<table class="table table-striped">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
<tr>
<td>Hücre 5</td>
<td>Hücre 6</td>
</tr>
</tbody>
</table>
Bootstrap table-striped sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-striped yani çizgili tablo örneğidir.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Hücre 5 | Hücre 6 |
Bootstrap table-hover sınıfı tabloya eklendiğinde gelinen hücrenin bulunduğu satırı belirgin hale getirmek için kullanılır.
<table class="table table-hover">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
<tr>
<td>Hücre 5</td>
<td>Hücre 6</td>
</tr>
<tr>
<td>Hücre 7</td>
<td>Hücre 8</td>
</tr>
</tbody>
</table>
Bootstrap table-hover sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-hover yani üstüne gelindiğinde belirgin hale getiren tablo örneğidir.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Hücre 5 | Hücre 6 |
Hücre 7 | Hücre 8 |
Bootstrap table-dark sınıfı tabloya eklendiğinde tabloyu siyah yani kara yapmak için kullanılır.
<table class="table table-dark">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
<tr>
<td>Hücre 5</td>
<td>Hücre 6</td>
</tr>
</tbody>
</table>
Bootstrap table-dark sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-dark tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Hücre 5 | Hücre 6 |
Bootstrap table-bordered sınıfı tablonun tüm kenarlarına sınır eklemek için kullanılır. Yani tablonun her tarafı çerçeve ile kaplı olur.
<table class="table table-bordered">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-bordered sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-bordered sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-active sınıfı tabloya eklendiğinde tablonun arkaplanını gri renk yapmak için kullanılır.
<table class="table table-active">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-active sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-active sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-primary sınıfı tabloya eklendiğinde tablonun arkaplanını mavi renk yapmak için kullanılır.
<table class="table table-primary">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-primary sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-primary sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-secondary sınıfı tabloya eklendiğinde tablonun arkaplanını koyu gri renk yapmak için kullanılır.
<table class="table table-secondary">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-secondary sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-secondary sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-success sınıfı tabloya eklendiğinde tablonun arkaplanını yeşil renk yapmak için kullanılır.
<table class="table table-success">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-success sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-success sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-danger sınıfı tabloya eklendiğinde tablonun arkaplanını kırmızı renk yapmak için kullanılır.
<table class="table table-danger">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-danger sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-danger sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-warning sınıfı tabloya eklendiğinde tablonun arkaplanını sarı renk yapmak için kullanılır.
<table class="table table-warning">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-warning sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-warning sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-info sınıfı tabloya eklendiğinde tablonun arkaplanını turkuaz renk yapmak için kullanılır.
<table class="table table-info">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-info sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-info sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-light sınıfı tabloya eklendiğinde tablonun arkaplanını beyaz renk yapmak için kullanılır.
<table class="table table-light">
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap table-light sınıfı çıktısı:
Yukarıdaki kod ile oluşturulan bootstrap table-light sınıfı tablosunun çıktısıdır.
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap table-dark sınıfı tabloya eklendiğinde tablonun başlık kısmını siyah yapmak için kullanılır.
<table class="table">
<thead class="thead-dark">
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap thead-dark sınıfı çıktısı:
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Bootstrap thead-light sınıfı tabloya eklendiğinde tablonun başlık kısmını açık gri yapmak için kullanılır.
<table class="table">
<thead class="thead-light">
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
<tr>
<td>Hücre 3</td>
<td>Hücre 4</td>
</tr>
</tbody>
</table>
Bootstrap thead-light sınıfı çıktısı:
Başlık 1 | Başlık 2 |
---|---|
Hücre 1 | Hücre 2 |
Hücre 3 | Hücre 4 |
Önceki Ders: Bootstrap Renkler | Sonraki Ders: Bootstrap Resimler |