Yükleniyor...

HTML Tablo Boyutları

Tablolar içerik sütununa yayılabilir veya fiyat kartı gibi kompakt kalabilir. Izgara çizgilerini öğreten kenarlık dersinden sonra bu ders kutuyu boyutlandırır: CSS (width, max-width, padding, isteğe bağlı sütun genişlikleri) ile tablo hem veriye hem ekrana uysun. Görünüm CSS’te kalır; table / tr / th / td hâlâ anlamı taşır. Kenarlıklar ızgarayı görünür yaptıysa boyut onu rahat hale getirir.

Bir tablo için «boyut» ne demektir

Boyut tek bir sayı değildir. Tüm tablonun ebeveynine göre bir genişliği vardır. Hücrelerin metnin nefes alması için padding’e ihtiyacı vardır. Sütunlar alanı eşit paylaşabilir veya daha geniş bir etiket sütununu tercih edebilir. Telefonlarda 1200px’te ısrar eden bir tablo, yalnızca iki kısa sütun olsa bile rahatsız yatay kaydırma zorlar. Esnek tarifler — sıkça width: 100% ve makul bir max-width — basit ızgaraları okunaklı tutar; CSS’in dürüst th/td yapısının yerini aldığını iddia etmez.

Doğrudan yanıt

table üzerinde width ayarlayın (örneğin 100%) ve isteğe bağlı olarak max-width ile sınırlayın (örneğin 480px veya 640px). Bir sütunun daha fazla yer alması gerektiğinde th/td üzerinde sütun genişliği ipucu verin. Telefonlarda taşan dev sabit piksel genişlikler yerine yüzde ve max-width tercih edin. Boyut ve çizgilerin birlikte çalışması için kenarlık dersindeki border-collapse ve padding’i koruyun. Kuralları bir class ile kapsayın ki bir demo sayfadaki her tabloyu yeniden boyutlandırmasın.

Sütun ipucuyla esnek genişlik

Yaygın bir yeni başlayan kalıbı: tablo bir maksimuma kadar ebeveyni doldurur, kenarlıklar collapsed kalır ve ilk sütun etiketler için daha büyük pay alır.

Flexible table width

html
HTML Code 
<style>
table.prices { width: 100%; max-width: 480px; border-collapse: collapse; }
table.prices th, table.prices td { padding: 8px; border: 1px solid #555; }
table.prices th:first-child, table.prices td:first-child { width: 60%; }
</style>
<table class="prices">
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>0</td></tr>
<tr><td>Pro</td><td>9</td></tr>
</table>

Esnek örneği okumak

  • width: 100% tablonun kullanılabilir içerik genişliğini kullanmasına izin verir
  • max-width: 480px geniş monitörlerde dev bir şerit olmasını engeller
  • border-collapse: collapse boyut ile kenarlıkların çatışmasını önler
  • padding: 8px her hücreye okunaklı iç boşluk verir
  • :first-child { width: 60%; } plan adı sütununun fiyat sütunundan daha geniş olması gerektiğini ipucu verir
  • Class kapsamı (.prices) sayfadaki her tablonun yanlışlıkla yeniden boyutlanmasını önler

Kompakt max-width tablosu

Bazen asla full-bleed uzamayan küçük bir karşılaştırma kartı istersiniz. Daha düşük bir max-width (ve o tavanın içinde hâlâ width: 100%) ızgarayı masaüstü ve mobilde düzenli tutar.

Compact max-width table

html
HTML Code 
<style>
table.compact {
width: 100%;
max-width: 320px;
border-collapse: collapse;
}
table.compact th, table.compact td {
padding: 6px 10px;
border: 1px solid #444;
text-align: left;
}
</style>
<table class="compact">
<tr><th>Item</th><th>Stock</th></tr>
<tr><td>USB cable</td><td>14</td></tr>
<tr><td>Notebook</td><td>3</td></tr>
</table>

Kompakt örneği okumak

  • Aynı esnek fikir, kart benzeri iz için daha sıkı max-width
  • Yatay padding (6px 10px) konfor için dikeyden farklı olabilir
  • text-align: left isteğe bağlı sunumdur — sayı ve sözcükler küçük bir ızgarayı paylaşınca yararlıdır
  • Hâlâ layout-tablo iç içe geçirme yok; yalnızca gerçek bir veri tablosunu boyutlandırıyorsunuz
  • Tarayıcıyı küçültün: tablo içerik sınırlarına kadar sütunla küçülmeli, varsayılan olarak dev bir kaydırma çubuğu dayatmamalı

Sabit pikseller karşısında esnek alışkanlıklar

width: 1200px gibi sabit genişlikler büyük monitörde iyi, telefonda acı verici görünebilir. Yazdırma veya yoğun bir kontrol paneli için minimum gerekiyorsa akışkan width artı max-width ile başlayın veya sonra duyarlı bir strateji planlayın. Bu kursun yeni başlayan tabloları için esnek boyut varsayılan iyi alışkanlıktır. Sütun width yüzdeleri ipucudur — içerik aşırı uzun veya kırılamazsa tarayıcı ayarlayabilir, bu yüzden öğrenirken hücre metnini makul kısa tutun. Bir sütun küçülmeyi reddederse, max-width’i suçlamadan önce uzun URL’leri veya boşluksuz sözcükleri kontrol edin.

Padding, sütunlar ve collapse birlikte

Boyut işi kenarlık dersinin yanında oturur. Padding olmadan yoğun hücreler mükemmel dış genişlikte bile sıkışık hissedilir. Collapse olmadan genişlik denemeleri daha kalın veya düzensiz görünebilir çünkü ayrı kenarlıklar ekstra yer yer. İsteğe bağlı sütun ipuçları (:first-child hücrelerinde veya belirli th üzerinde width) etiketlerin değerlerden daha fazla yer istediğinde tarayıcıya yol gösterir. Boyut CSS’ini th başlıklarını bırakmak veya sayfayı iç içe layout tablolarıyla yeniden kurmak için bahane etmeyin — o çatışma Tables oturumunda zaten çözülmüştü.

Editörünüzde pratik

  1. Alıştırma tablonuza width: 100% ve bir max-width verin (480px deneyin).
  2. th/td’ye padding ekleyin (hâlâ varsa kenarlık stillerini yeniden kullanın).
  3. Tarayıcıyı yeniden boyutlandırın — basit iki sütunlu bir tablonun sonsuz yatay kaydırma dayatmadığını doğrulayın.
  4. İsteğe bağlı olarak :first-child veya class ile ilk sütunu genişletin.
  5. Daha sıkı bir max-width (ör. 320px) ile tabloyu çoğaltın ve izi karşılaştırın.
  6. Geçici olarak width: 1200px ayarlayın, mobil acıyı not edin, sonra kaldırın.
  7. Genişlikler ayarlıyken border-collapse’i açıp kapatın ve dış boyut hissinin değişimini izleyin.
  8. Tablonun altına seçtiğiniz max-width’i ve nedenini belirten bir cümle yazın.

Kolay hatalar

  • Küçük ekranları kıran sabit width: 1200px tablolar
  • Padding yok — yoğun, okunması zor hücreler
  • border-collapse olmadan kenarlık ve genişliklerin çatışması
  • Sayfadaki her demoyu yeniden boyutlandıran global table { width: ... }
  • Sütun width ipuçlarının aşırı uzun kırılamaz dizeleri geçersiz kılmasını beklemek
  • Tablo boyutunu yeniden tam sayfa layout sütunları uydurmak için kullanmak
  • max-width’i unutup yalnızca width: 100% ile üç hücrelik küçük bir tabloyu ultrawide’a yaymak

Özet

  • Tabloları CSS width ve max-width ile boyutlandırın
  • Okunaklı hücreler için padding kullanın
  • Küçük ekranlarda esnek düzenleri tercih edin
  • Sütun genişliği ipuçları isteğe bağlıdır ve mümkünse class ile kapsamlanır
  • Boyut ve çizgilerin işbirliği için kenarlıkları collapsed tutun
  • Yapı HTML’de kalır; boyutlar CSS’te
  • Sonraki başlık odaklı dersler zaten viewport’a rahat uyan bir ızgara üzerine kurulur

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
6
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Html Ders