Responsive tablolar
Tabloları küçük ekranlarda kaydırılabilir yapmayı öğrenirsin.
Küçük ekranlara uyum
Geniş tablolar küçük ekranlara sığmaz; sütunlar taşar ve sayfa yana doğru büyür. En sık çözüm tabloyu bir sarma kap içine alıp kaba overflow-x: auto eklemektir.
HTML tarafında yapman gereken yalnızca şudur: <div> içine <table> koymak. CSS tarafını ayrı bir derste göreceksin; burada yalnızca HTML iskeletini kuruyoruz. Yine de <colgroup> ile sütun genişliklerini önceden vermek de küçük ekranlara yardımcı olur.
colgroup ile sütun dağılımı
Küçük ekranlarda tablonun düzenini önceden belirlemek, taşmayı azaltır. <colgroup> ve <col> ile her sütunun göreli genişliğini HTML'den verebilirsin.
Örneğin dört sütunlu bir tabloda ilk sütuna <col>, diğer üçüne tek bir <col span="3"> koyarsan, tarayıcı sütunları baştan böler. Bu yaklaşım CSS olmadan dağılımı yaklaşık olarak verir; tam responsive için yine sarma kap gerekir.
Uygulama Sarma kap içinde responsive tablo kur
Bir tabloyu küçük ekranlara uyumlu hale getir. Tabloyu bir <div class="table-wrap"> içine al. Div'in içinde <table>, dolu bir <caption>, bir <colgroup> (içinde en az iki <col>), <thead> (içinde <th scope="col">) ve <tbody> (içinde <td>) bulunsun.
Örnek çözümü göster
<div class="table-wrap">
<table>
<caption>Aylık Satış</caption>
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col">Ay</th>
<th scope="col">Ürün</th>
<th scope="col">Adet</th>
<th scope="col">Ciro</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ocak</td>
<td>Kulaklık</td>
<td>320</td>
<td>₺3,200</td>
</tr>
<tr>
<td>Şubat</td>
<td>Klavye</td>
<td>410</td>
<td>₺4,100</td>
</tr>
</tbody>
</table>
</div>Kendini test et
-
Küçük ekranlarda tablo taşmasını en sık çözen yaklaşım hangisidir?
- Tabloyu gizlemek
- Tabloyu yeniden çizmek
- Sarma kap içine alıp overflow ile kaydırmak
- Sütun sayısını ikiye indirmek
Cevabı göster
Sarma kap içine alıp overflow ile kaydırmak — Doğru. Tabloyu bir div içine alıp overflow-x: auto eklemek en sık kullanılan çözümdür.
-
Tabloyu sarma kap içine al
<div class="table-wrap"> ____ <caption>Aylık Satış</caption> <!-- thead ve tbody --> </table> </div>Cevabı göster
<div class="table-wrap"> <table> <caption>Aylık Satış</caption> <!-- thead ve tbody --> </table> </div> -
Tekniği rolüyle eşleştir
- Sarma kap
- Küçük ekranda kaydırma
- colgroup
- Sütun genişliği köprüsü
- col span
- Birden çok sütunu kapsar
- caption
- Tabloya başlık verir