Bootstrap ile Responsive Web Tasarımı Eğitimi
İrem Ocaklı tarafından hazırlanmıştır...
☛Temel Tablolar:
✎Bir tablo, satırlar ve sütunlar içindeki tablo hücrelerinden oluşur.
✎thead(baş) etiketine başlıklar ve tbody(gövde) etiketine hücrelere girilecek bilgiler yazılır.
✎Her tablo hücresi <td> </td>etiketleri arasında tanımlanır.Bu etiketler arasındaki her şey tablo hücresinin içeriğidir.
✎ <tr> </tr> etiketleri her satır değiştiğinde yazılır satıra gelecek olan bilgileri içeren kodlar bu etiket içerisine yazılır.
✎ <th> </th> tablo başlıklarıdır.Başlık olduğunu belirtmek için daha koyu yazılır.
✎Bootstrapta genel bir tablo yapısı .table classı ile oluşturulur.
⭐➊<table class="table">
➋<thead>
➌<tr>
➍<th>İsim<th>
➎<th>Soyisim<th>
➏<th>Email<th>
➐</tr>
➑</thead>
➒<tbody>
➓<tr>
➊➊<td>İrem<td>
➊➋<td>Ocaklı<td>
➊➌<td>iremockl26@gmail.com<td>
➊➍</tr>
➊➎<tr>
➊➏<td>Ali<td>
➊➐<td>Yılmaz<td>
➊➑<td>aliiyilmz@gmail.com<td>
➊➒</tr></tbody></table>
| İsim |
Soyisim |
Email |
| İrem |
Ocaklı |
iremockl26@gmail.com |
| Ali |
Yılmaz |
aliiyilmz@gmail.com |
☛.table-bordered sınıfı
✎Tabloya çerçeve eklemek için .table-bordered sınıfı kullanılır.
⭐➊<table class="table table-bordered">
➋<thead>
➌<tr>
➍<th>İsim<th>
➎<th>Soyisim<th>
➏<th>Email<th>
➐</tr>
➑</thead>
➒<tbody>
➓<tr>
➊➊<td>İrem<td>
➊➋<td>Ocaklı<td>
➊➌<td>iremockl26@gmail.com<td>
➊➍</tr>
➊➎<tr>
➊➏<td>Ali<td>
➊➐<td>Yılmaz<td>
➊➑<td>aliiyilmz@gmail.com<td>
➊➒</tr></tbody></table>
| İsim |
Soyisim |
Email |
| İrem |
Ocaklı |
iremockl26@gmail.com |
| Ali |
Yılmaz |
aliiyilmz@gmail.com |
☛.table-striped sınıfı
✎Tabloyu zebra desenli yapmak için .table-striped sınıfı kullanılır.
⭐➊<table class="table table-striped">
➋<thead>
➌<tr>
➍<th>İsim<th>
➎<th>Soyisim<th>
➏</tr>
➐</thead>
➑<tbody>
➒<tr>
➓<td>İrem<td>
➊➊<td>Ocaklı<td>
➊➋</tr>
➊➌<tr>
➊➍<td>Ali<td>
➊➎<td>Yılmaz<td>
➊➏<tr>
➊➐<td>Gizem<td>
➊➑<td>Türker<td>
➊➒</tr>
| İsim |
Soyisim |
| İrem |
Ocaklı |
| Ali |
Yılmaz |
| Gizem |
Türker |
☛.table-hover sınıfı
✎.table-hover sınıfı tablo satırlarına bir fareyle üzerine gelme efekti (gri arka plan rengi) ekler böylelikle okumayı kolaylaştırır.
⭐➊<table class="table table-hover">
➋<thead>
➌<tr>
➍<th>İsim<th>
➎<th>Soyisim<th>
➏</tr>
➐</thead>
➑<tbody>
➒<tr>
➓<td>İrem<td>
➊➊<td>Ocaklı<td>
➊➋</tr>
➊➌<tr>
➊➍<td>Ali<td>
➊➎<td>Yılmaz<td>
➊➏<tr>
➊➐<td>Gizem<td>
➊➑<td>Türker<td>
➊➒</tr>
| İsim |
Soyisim |
| İrem |
Ocaklı |
| Ali |
Yılmaz |
| Gizem |
Türker |
☛.table-dark sınıfı
✎Sınıf .table-dark, tabloya siyah bir arka plan ekler.
⭐➊<table class="table table-dark">
➋<thead>
➌<tr>
➍<th>İsim<th>
➎<th>Soyisim<th>
➏</tr>
➐</thead>
➑<tbody>
➒<tr>
➓<td>İrem<td>
➊➊<td>Ocaklı<td>
➊➋</tr>
➊➌<tr>
➊➍<td>Ali<td>
➊➎<td>Yılmaz<td>
➊➏<tr>
➊➐<td>Gizem<td>
➊➑<td>Türker<td>
➊➒</tr>
| İsim |
Soyisim |
| İrem |
Ocaklı |
| Ali |
Yılmaz |
| Gizem |
Türker |
✍Not:Bu sınıflar aynı anda kullanılabilir.
⭐➊<table class="table table-hover table-striped">
➋<thead>
➌<tr>
➍<th>İsim<th>
➎<th>Soyisim<th>
➏</tr>
➐</thead>
➑<tbody>
➒<tr>
➓<td>İrem<td>
➊➊<td>Ocaklı<td>
➊➋</tr>
➊➌<tr>
➊➍<td>Ali<td>
➊➎<td>Yılmaz<td>
➊➏<tr>
➊➐<td>Gizem<td>
➊➑<td>Türker<td>
➊➒</tr>
| İsim |
Soyisim |
| İrem |
Ocaklı |
| Ali |
Yılmaz |
| Gizem |
Türker |
☛.table-borderless sınıfı
✎.table-borderless, tablodaki sınırları kaldırır.
⭐➊<table class="table table-borderless">
➋<thead>
➌<tr>
➍<th>İsim<th>
➎<th>Soyisim<th>
➏<th>Email<th>
➐</tr>
➑</thead>
➒<tbody>
➓<tr>
➊➊<td>İrem<td>
➊➋<td>Ocaklı<td>
➊➌<td>iremockl26@gmail.com<td>
➊➍</tr>
➊➎<tr>
➊➏<td>Ali<td>
➊➐<td>Yılmaz<td>
➊➑<td>aliiyilmz@gmail.com<td>
➊➒</tr></tbody></table>
| İsim |
Soyisim |
Email |
| İrem |
Ocaklı |
iremockl26@gmail.com |
| Ali |
Yılmaz |
aliiyilmz@gmail.com |
✍Not:tr,th veya td etiketlerine renk verebiliriz.
➊<table class="table table-bordered">
➋<thead>
➌<tr>
⭐➍<th class=table-danger">İsim<th>
➎<th>Soyisim<th>
➏<th>Email<th>
➐</tr>
➑</thead>
➒<tbody>
⭐➓<tr class="table-info">
➊➊<td>İrem<td>
➊➋<td>Ocaklı<td>
➊➌<td>iremockl26@gmail.com<td>
➊➍</tr>
➊➎<tr>
➊➏<td>Ali<td>
⭐➊➐<td class="table-success">Yılmaz<td>
➊➑<td>aliiyilmz@gmail.com<td>
➊➒</tr></tbody></table>
| İsim |
Soyisim |
Email |
| İrem |
Ocaklı |
iremockl26@gmail.com |
| Ali |
Yılmaz |
aliiyilmz@gmail.com |