Çalıştırılabilir HTML Dokümanları: Tablo kenarlığı

Q: HTML'de bir tabloya kenarlık nasıl eklenir?

Tabloya ve hücrelerine CSS uygula: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Hücrelerdeki kenarlık ızgarayı çizer, border-collapse: collapse de komşu kenarlıkları tek çizgide birleştirir.

Q: Bir tablonun köşelerini nasıl yuvarlarım?

border-radius, border-collapse: collapse olan bir tabloda etki etmez. border-spacing: 0 ile border-collapse: separate kullan, yarıçapı tabloya ver ve arka planları köşelerden taşmasın diye köşe hücrelerine de uygun bir yarıçap ver (border-start-start-radius ve benzerleri).

Q: Bir tablodan kenarlığı nasıl kaldırırım?

Bir şey eklemedikçe tabloların kenarlığı yoktur. etiketinden border özelliğini kaldır ya da kenarlık ekleyen bir stil dosyasını geçersiz kılmak için table, th, td üzerine border: none ayarla.

Bir tabloya kenarlık nasıl eklenir

Tabloların varsayılan olarak kenarlığı yoktur. Onları CSS ile ekle: her hücredeki bir border ızgarayı çizer, tablodaki border-collapse: collapse de her komşu kenarlık çiftini tek bir çizgide birleştirir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

border kısaltması herhangi bir sırayla bir genişlik, bir stil ve bir renk alır: 1px solid #6b7280. Onu yalnızca table üzerine değil, th, td üzerine koy: tablodaki bir kenarlık yalnızca dış çerçeveyi çizer.

border-collapse: separate ve collapse

border-collapse hücrelerin kenarlık paylaşıp paylaşmayacağına karar verir.

Değer	Sonuç
`separate` (varsayılan)	Her hücrenin kendi kenarlığı vardır; hücreler arasındaki boşluğu `border-spacing` belirler
`collapse`	Komşu hücreler tek bir kenarlığı paylaşır; `border-spacing` yok sayılır

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

Separate tabloda iki katmanı da görebilirsin: mavi tablo çerçevesi ve her hücrenin çevresinde, aralarında border-spacing kadar boşluk olan ayrı bir kehribar kutu. 6px değerini 0 yap, hücreler birbirine değer ama çizgiler hâlâ çifttir. Onları yalnızca collapse birleştirir.

Birleştirilmiş iki kenarlık karşılaştığında ve farklı olduklarında, daha geniş olan kazanır. Aynı genişlikte stil karar verir (double, solid karşısında kazanır; solid de dashed ve dotted karşısında kazanır), eşitlikte ise hücrenin kenarlığı satırınkini, satırınki de tablonunkini yener. Birleştirilmiş tablonun dış kenarının mavi değil kehribar olmasının nedeni budur: orada hem hücrelerin hem de tablonun 2px solid kenarlıkları var ve hücreler kazanır.

Yalnızca yatay çizgiler ya da yalnızca iç çizgiler

Çoğu modern tablo her çizgiyi çizmez. İki yaygın kalıp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

İkinci tablo, her kenar hücresinin dış tarafındaki kenarlığı kaldırır. border-inline-start ve border-inline-end satırın başı ve sonu demektir, böylece aynı CSS ilk hücrenin diğer tarafta olduğu sağdan sola yazılan dillerde de doğru kalır.

Yuvarlak tablo köşeleri

border-radius, border-collapse: collapse olan bir tabloda hiçbir şey yapmaz. Yuvarlak tablolar boşluksuz separate modelini kullanır ve hücrelere yalnızca alt ve son kenarlık vererek her çizgiyi bir kez çizer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

Başlığın iki köşe hücresi, gri arka plan eğriyi takip etsin diye kendi yarıçaplarını alır. O olmadan kare köşeleri yuvarlak kenarlığın dışına taşar. Yarıçap 9px'tir, yani tablonun 10px değerinden 1px kenarlığı çıkarılmış hâli, böylece iki eğri hizalanır.

Parçaya göre kenarlık rengi ve kalınlığı

Kenarlıklar tablonun parçasına göre farklı olabilir. thead, tfoot ve tek tek satırlar üzerindeki seçiciler başlığın altına ya da toplamların üstüne daha kalın bir çizgi koyar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

3px çizgiler, yukarıdaki birleştirme kurallarına göre, karşılaştıkları yerde 1px gri çizgilere üstün gelir. Tablo yapısının geri kalanı için (thead, tfoot, th) HTML table sayfasına bak.

border özelliği

Eski eğitimler <table> etiketinin üzerinde özellikler kullanır:

<table border="1" cellspacing="0" cellpadding="6">

Tarayıcılar border="1" değerine hâlâ uyar: separate modelinde tabloya ve her hücreye bir kenarlık çizer, bu da çift çizgili görünümü verir. Üç özellik de HTML5'te artık kullanılmıyor. CSS karşılıkları hücrelerde border, tabloda border-spacing (ya da border-collapse: collapse) ve hücrelerde padding şeklindedir.

Sık yapılan hatalar

Kenarlığın yalnızca table üzerinde olması. İçinde çizgi olmayan bir çerçeve elde edersin. Kenarlığı th, td üzerine ekle.
border-collapse: collapse değerini unutmak, sonra çift çizgiler görmek.
border-collapse: collapse ile border-radius. Yarıçap yok sayılır.
border-collapse: collapse ile border-spacing. Boşluk yalnızca separate modelinde çalışır.
Separate modelinde <tr> üzerine kenarlık. Tablo birleştirilmemişse satırlar kenarlık çizmez; onun yerine hücrelere stil ver.
Yeni kodda border="1" kullanmak. Hâlâ çalışır, ama renk ayarlayamaz ve artık kullanılmıyor.

Sıkça Sorulan Sorular

HTML'de bir tabloya kenarlık nasıl eklenir?

Tabloya ve hücrelerine CSS uygula: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. Hücrelerdeki kenarlık ızgarayı çizer, border-collapse: collapse de komşu kenarlıkları tek çizgide birleştirir.

Tablomda neden çift kenarlık var?

Varsayılan olarak her hücre kendi kenarlığını, hücreler arasında bir boşlukla çizer (border-collapse: separate), bu yüzden komşu hücreler iki çizgi gösterir. Onları teke indirmek için <table> elementine border-collapse: collapse ver.

Tablonun border özelliği hâlâ geçerli mi?

<table border="1"> her tarayıcıda hâlâ kenarlık çizer, ama HTML5'te artık kullanılmıyor ve renk ya da stil üzerinde sana hiçbir kontrol vermez. Onun yerine CSS border özelliğini kullan.

Bir tablonun köşelerini nasıl yuvarlarım?

border-radius, border-collapse: collapse olan bir tabloda etki etmez. border-spacing: 0 ile border-collapse: separate kullan, yarıçapı tabloya ver ve arka planları köşelerden taşmasın diye köşe hücrelerine de uygun bir yarıçap ver (border-start-start-radius ve benzerleri).

Bir tablodan kenarlığı nasıl kaldırırım?

Bir şey eklemedikçe tabloların kenarlığı yoktur. <table> etiketinden border özelliğini kaldır ya da kenarlık ekleyen bir stil dosyasını geçersiz kılmak için table, th, td üzerine border: none ayarla.

İlgili kavramlar