Yükleniyor...

HTML Tablo Kenarlıkları

Çıplak bir tablo okunabilir; kenarlıklar ızgarayı bir bakışta netleştirir. Önceki ders yapıyı table, tr, th ve td ile kilitlemişti. Bu oturum görünümü ekler: modern HTML’de kenarlıkları CSS ile çizersiniz, yalnızca <table> üzerindeki eski sunumsal border özniteliğiyle değil. Yapı HTML’de kalır; çizgiler, boşluk ve renk stil kurallarına aittir. Kenarlıkları ızgara için gözlük gibi düşünün — verinin anlamını değiştirmeden gözlerin hücreleri izlemesine yardım ederler.

Eski öznitelik yerine neden CSS

Tarayıcılar bir zamanlar <table border="1"> ifadesini hızlı bir öğretim hilesi olarak kabul ederdi. Bu öznitelik ciddi modern sayfalar için eskidir ve renk, kalınlık veya hangi kenarların görüneceği üzerinde neredeyse hiç denetim vermez. CSS genişlik, stil ve rengi ayrı ayrı ayarlamanıza, bir kuralı birçok hücre arasında paylaşmanıza ve kenarlıkları padding ile border-collapse ile birleştirmenize izin verir. Kenarlıkları CSS üzerinden öğrenmek, sonra başlıkları, listeleri ve düzeni nasıl stilleyeceğinizle de örtüşür; böylece alıştırma sayfaları gerçek projelerle tutarlı kalır.

Doğrudan yanıt

table, th ve td öğelerini CSS border özelliğiyle stillendirin. Bitşik hücre kenarlıklarının kalın çift kenar yerine tek temiz ızgara çizgisinde birleşmesi için tabloda border-collapse: collapse kullanın. Kuralları küçük demolar için style özniteliğine koyun veya — yeniden kullanım için daha iyisi — bir class ile <style> bloğuna ya da stil sayfasına. tr/th/td işaretlemesini anlamsal tutun; yalnızca görünüm CSS’e geçer. Bir öğretici hâlâ yalnızca border="1" ile başlıyorsa, bunu müze notu sayın ve fikri CSS’e çevirin.

CSS kenarlıklar ile eski işaretleme

📊 Presenting table lines today

Approach Beginner verdict Why
th/td üzerinde CSS border (+ collapse) Tercih edin Esnek, yeniden kullanılabilir, modern
Yalnızca <table border="1"> Yeni iş için kaçının Eski sunumsal HTML
Sıfır padding’li kenarlıklar Padding ile düzeltin Çizgilere yapışık metin okunması zor
Collapse’siz ayrı kenarlıklar İsteğe bağlı deney Collapse’ın neden daha temiz göründüğünü gösterir

Hücrelerde kenarlık (inline alıştırma)

Küçük bir tabloda deneme yaparken inline stiller uygundur. Önce collapse, sonra her başlık ve veri hücresine ince solid kenarlık ve biraz padding verin.

Borders on cells

html
HTML Code 
<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px solid #333; padding: 6px;">City</th>
<th style="border: 1px solid #333; padding: 6px;">Code</th>
</tr>
<tr>
<td style="border: 1px solid #333; padding: 6px;">Tehran</td>
<td style="border: 1px solid #333; padding: 6px;">021</td>
</tr>
</table>

Inline örneği okumak

  • table üzerindeki border-collapse: collapse komşu kenarlıkları tek ızgarada birleştirir
  • Her th/td basit koyu çizgi için border: 1px solid #333 koyar
  • padding: 6px metnin kenarlığa değmesini engeller
  • Inline stiller her hücrede tekrarlanır — öğrenmek için yararlı, büyük tablolarda gürültülü
  • HTML yapısı Tables dersine göre değişmedi; yalnızca sunum eklendi

style bloğuyla ortak görünüm

Birkaç hücrenin eşleşmesi gerektiğinde, aynı inline dizeyi her yere kopyalamak yerine bir class kuralı daha iyidir. Belge başındaki küçük bir <style> bloğu, dış stil sayfalarına net bir köprüdür.

Shared look with a style block

html
HTML Code 
<head>
<style>
table.grid { border-collapse: collapse; }
table.grid th, table.grid td { border: 1px solid #444; padding: 8px; }
</style>
</head>
<body>
<table class="grid">
<tr><th>Item</th><th>Qty</th></tr>
<tr><td>Pens</td><td>12</td></tr>
</table>
</body>

Ortak stil örneğini okumak

  • table.grid kuralları sınırlar; sayfadaki her tablo aynı görünmek zorunda kalmaz
  • Tek kural .grid içindeki hem th hem td öğelerini stillendirir
  • Padding veya rengi bir yerde değiştirmek tüm ızgarayı günceller
  • Hâlâ normal tr/th/td satırları yazarsınız — CSS bu öğelerin yerini almaz
  • Sonraki CSS kursları seçicileri derinleştirir; burada amaç temiz, tekrarlanabilir bir kenarlık tarifi

Collapse, boşluk ve okunabilirlik

border-collapse: collapse olmadan birçok tarayıcı çift çizgi veya kabarık ızgara gibi görünen ayrı kenarlıklar gösterir. Collapse, veri tabloları için alışılmış başlangıç seçimidir çünkü tutarlı bir elektronik tablo benzeri yüzey gibi okunur. Hücre içi padding, çizginin kendisi kadar önemlidir: sıfır padding metni kenarlığa yapıştırır ve taramayı yorucu kılar. 6px–8px ile başlayın ve alıştırma sayfanızda gözle ayarlayın. Renk isteğe bağlıdır — öğrenmek için nötr gri veya koyu kömür yeter; bağıran renkler karşılaştırdığınız sayılardan dikkati dağıtır.

Yapı kalır; görünüm taşınır

CSS var diye th başlıklarını silmeyin. Tablo ilişkilerini gerçek tablo işaretlemesi olmadan yalnızca renkli kutulara koymayın. Kenarlıklar, Tables oturumunda kurduğunuz iskeletin üzerindeki süs ve netliktir. Veri tablo değilse listelere dönün — daha güzel çizgiler yanlış öğe seçimini düzeltmez. Aynı şekilde, kenarlıklar birden güzel göründü diye iç içe layout tablolarını yeniden canlandırmayın; sayfa bölgeleri hâlâ yapıya ve sonraki CSS düzenine aittir.

Editörünüzde alıştırma

  1. Tables oturumundan gerçek th/td hücreli küçük bir alıştırma tablosunu yeniden kullanın (veya yeniden oluşturun).
  2. CSS ile kenarlık ekleyin — her özelliği görmek için önce her hücrede inline stiller deneyin.
  3. Çift çizgi ile tek çizgili ızgarayı karşılaştırmak için border-collapse açıp kapatın.
  4. Metnin her hücrede rahat oturması için padding ekleyin; 4px sonra 8px deneyin.
  5. İkinci örnekteki gibi bir class artı kısa <style> bloğuna yeniden düzenleyin.
  6. Stil sonrası başlıkların hâlâ th, veri hücrelerinin hâlâ td olduğunu doğrulayın.
  7. İsteğe bağlı: HTML anlamını değiştirmeden etiketleri vurgulamak için yalnızca .grid th öğesini biraz daha güçlü kenarlık veya arka planla stillendirin.

Kolay hatalar

  • Ciddi siteler için yalnızca border="1" gibi eski sunumsal özniteliklere dayanmak
  • Collapse’siz kenarlık bırakıp çizgilerin neden kalın veya çift göründüğünü merak etmek
  • Metnin kenarlığa değmesi için sıfır padding
  • CSS ile stillendirip anlamsal th etiketlerini kaldırmak
  • İlgisiz tabloları yanlışlıkla yeniden stillendiren genel td { border: ... } uygulamak
  • Kenarlık CSS’ini sayfa düzenini yeniden iç içe tablolarla kurma gerekçesi saymak

Özet

  • th ve td üzerinde CSS border (ve table üzerinde collapse) tercih edin
  • border-collapse: collapse ızgarayı tek çizgilere temizler
  • Padding hücre içinde okunabilirliği artırır
  • Yapı HTML’de kalır; görünüm CSS’te
  • Yeni iş için eski border özniteliğine güvenmeyin
  • Tablo büyüdükçe yinelenen inline kenarlıkları bir class’a taşıyın

🧠 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

❓
5
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