- Konu sahibi
- #1
Veri tablosunu küçük ekranda okunabilir tutmanın en güvenilir yolu, anlamlı başlıklar ve doğru hücre ilişkileri kullanan semantik bir
Masaüstünde geniş bir tablo bütün sütunları aynı anda gösterebilir. Telefon ekranında ise her sütunu daraltmak metinlerin kırılmasına, sayıların karışmasına ve başlıkların hangi veriye ait olduğunun belirsizleşmesine yol açar. Kapsayıcıya
Tablonun yapısı da en az CSS kadar önemlidir. Sütun başlıklarını
Aşağıdaki dosyayı doğrudan bir
Tablo dar ekrana sığıyorsa kullanıcı bütün veriyi kaydırmadan görür. Sığmıyorsa kapsayıcı içinde yatay kaydırma oluşması beklenen davranıştır; bu, tablonun bozulduğu anlamına gelmez. Ancak kullanıcı hangi yönde kaydırabileceğini fark etmiyorsa kapsayıcının kenar boşluğunu, başlığını veya yardımcı açıklamasını iyileştirin.
Tablo hiç kaymıyor ve içerik kesiliyorsa
Aynı çözümü her tabloya uygulamak yerine sütunların önemini değerlendirin.
İlk olarak tabloyu semantik ve eksiksiz kurun, sonra dar ekranda test edin. Sadece görünüş için sütunları
Tablonun üstüne kısa bir yardımcı metin ekleyebilir, kapsayıcıya yeterli kenar boşluğu bırakabilir veya sağda devam eden içeriğin küçük bir kısmını görünür tutabilirsiniz. Bu açıklama yalnızca kaydırma gerektiğinde gösterilecek şekilde de düzenlenebilir.
Açıklama metninin satır içinde kırılmasına izin verin; uzun URL veya kod gibi bölünmemesi gereken değerleri ayrı biçimlendirin. Kullanıcı için asıl değer önemliyse hücreye tamamı görülebilen ayrıntı görünümü eklemek, tabloyu aşırı genişletmekten daha uygundur.
table öğesini yatay kaydırılabilen bir kapsayıcıya almaktır. Tabloyu ekrana zorla sığdırmak yerine, önemli sütunları öne alın; ikincil sütunları küçültmek, gizlemek veya ayrı bir ayrıntı görünümüne taşımak daha iyi sonuç verir.Nasıl çalışır?
Masaüstünde geniş bir tablo bütün sütunları aynı anda gösterebilir. Telefon ekranında ise her sütunu daraltmak metinlerin kırılmasına, sayıların karışmasına ve başlıkların hangi veriye ait olduğunun belirsizleşmesine yol açar. Kapsayıcıya
overflow-x: auto vermek, tabloyu okunabilir bir asgari genişlikte bırakır ve yalnızca gerektiğinde yatay kaydırma oluşturur.Tablonun yapısı da en az CSS kadar önemlidir. Sütun başlıklarını
<th scope="col">, satır başlıklarını ise <th scope="row"> ile belirtin. Tabloya caption eklemek, kullanıcının verinin neyi karşılaştırdığını anlamasını kolaylaştırır. Hücreleri yalnızca görsel olarak hizalamak için boşluk karakterleri kullanmayın.Çalışan en küçük örnek
Aşağıdaki dosyayı doğrudan bir
.html dosyasına kaydedip tarayıcıda açabilirsiniz. Pencereyi daralttığınızda tablo kapsayıcısının içinde yatay kaydırma görünür; başlıklar ve sayılar okunabilir kalır.
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Okunabilir stok tablosu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.table-scroll {
min-width: 0;
max-width: 100%;
border-radius: 4px;
overflow-x: auto;
}
.table-scroll table {
border-collapse: collapse;
min-width: 34rem;
width: 100%;
}
.table-scroll caption {
font-weight: 700;
margin-bottom: .5rem;
text-align: left;
}
.table-scroll th, .table-scroll td {
border: 1px solid #b8bec8;
padding: .65rem .75rem;
text-align: left;
vertical-align: top;
}
.table-scroll th {
background: #f0f2f5;
}
.table-scroll td:nth-child(2),
.table-scroll td:nth-child(3) {
white-space: nowrap;
}
.table-scroll:focus-visible {
outline: 2px solid #174a8b;
outline-offset: 2px;
}
</style>
</head>
<body>
<p id="stock-hint">Dar ekranda tabloyu yatay kaydırın. Klavyeyle alana odaklanıp ok tuşlarını kullanabilirsiniz.</p>
<div class="table-scroll" tabindex="0" role="region" aria-labelledby="stock-caption" aria-describedby="stock-hint">
<table>
<caption id="stock-caption">Ürün stok durumu</caption>
<thead>
<tr>
<th scope="col">Ürün</th>
<th scope="col">Stok</th>
<th scope="col">Durum</th>
<th scope="col">Son güncelleme</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Klavye</th>
<td>24</td>
<td>Mevcut</td>
<td>Bugün 09:30</td>
</tr>
<tr>
<th scope="row">Monitör</th>
<td>3</td>
<td>Sınırlı</td>
<td>Bugün 08:10</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Sonucu nasıl yorumlamalı?
Tablo dar ekrana sığıyorsa kullanıcı bütün veriyi kaydırmadan görür. Sığmıyorsa kapsayıcı içinde yatay kaydırma oluşması beklenen davranıştır; bu, tablonun bozulduğu anlamına gelmez. Ancak kullanıcı hangi yönde kaydırabileceğini fark etmiyorsa kapsayıcının kenar boşluğunu, başlığını veya yardımcı açıklamasını iyileştirin.
Tablo hiç kaymıyor ve içerik kesiliyorsa
overflow-x: auto kuralının doğrudan kapsayıcıda olduğundan emin olun. Sayfa genişliği de kayıyorsa genellikle taşan tablo kapsayıcı dışında kalmıştır veya bir üst öğede sabit genişlik vardır. Bu durumda tarayıcının geliştirici araçlarında tabloyu ve üst öğelerini inceleyin. Flex veya grid içindeki üst öğenin asgari genişliği de küçülmeyi engelleyebilir; ilgili öğede min-width: 0 veya uygun bir minmax(0, 1fr) sütun tanımı gerekebilir. Örnekteki odaklanabilir ve adlandırılmış kaydırma bölgesini klavyeyle de deneyin; görünür odak işaretini kaldırmayın.Hangi yaklaşımı seçmeli?
Aynı çözümü her tabloya uygulamak yerine sütunların önemini değerlendirin.
| Tablo durumu | Uygun yaklaşım | Dikkat edilecek nokta |
|---|---|---|
| Az sütun, kısa değerler | Normal akışta yüzde yüz genişlik | Metin ve hücre boşlukları daralmamalı |
| Çok sütun, karşılaştırma gerekli | Yatay kaydırılabilen kapsayıcı | Kapsayıcı dışında taşma bırakılmamalı |
| Çok sütun, yalnız birkaç bilgi önemli | Önemli sütunları gösterip ayrıntıyı ayrı görünüme taşıma | Gizlenen veri başka bir yoldan erişilebilir olmalı |
İlk olarak tabloyu semantik ve eksiksiz kurun, sonra dar ekranda test edin. Sadece görünüş için sütunları
display: none ile kaldırmak, kullanıcı için gerekli bilgiyi erişilemez yapabilir. Gerçekten ikincil olan alanları kaldıracaksanız aynı bilgiyi satır ayrıntısı, açılır bölüm veya ayrı bir kayıt sayfasında sunun.Sık yapılan hatalar
- Tabloyu küçük ekrana sığdırmak için yazı boyutunu aşırı küçültmek: Okunabilirlik azalır; yatay kaydırma genellikle daha doğru çözümdür.
- Başlık satırını kaldırmak: Kullanıcı değerlerin anlamını kaybeder.
theadvethyapısını koruyun. - Her sütuna
white-space: nowrapvermek: Uzun açıklamalar gereksiz yere genişlik oluşturur. Bu kuralı yalnızca tarih, kod veya kısa durum gibi bölünmemesi gereken değerlere uygulayın. - Mobilde tabloyu kartlara dönüştürürken hücre ilişkisini kaybetmek: Kart görünümü kullanacaksanız her değerin etiketini de göstermeli ve tablo anlamını korumalısınız.
Kaynaklar
Sık sorulan sorular
Yatay kaydırma kullanıcıya nasıl fark ettirilir?
Tablonun üstüne kısa bir yardımcı metin ekleyebilir, kapsayıcıya yeterli kenar boşluğu bırakabilir veya sağda devam eden içeriğin küçük bir kısmını görünür tutabilirsiniz. Bu açıklama yalnızca kaydırma gerektiğinde gösterilecek şekilde de düzenlenebilir.
Uzun metinli hücrelerde ne yapılmalı?
Açıklama metninin satır içinde kırılmasına izin verin; uzun URL veya kod gibi bölünmemesi gereken değerleri ayrı biçimlendirin. Kullanıcı için asıl değer önemliyse hücreye tamamı görülebilen ayrıntı görünümü eklemek, tabloyu aşırı genişletmekten daha uygundur.
