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

Sıradaki ders: Tablo görsel yapısı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler