Çalıştırılabilir HTML Dokümanları: HTML table

Q: HTML'de tablo nasıl oluşturulur?

Onu ile sar, her satır için bir yaz ve hücreleri içine koy: başlık hücreleri için , veri hücreleri için . Bazı hücreler birkaç sütuna yayılmadığı sürece her satırda aynı sayıda hücre olmalı.

Q: th ile td arasındaki fark nedir?

bir sütunu ya da satırı etiketleyen başlık hücresidir, ise veri hücresidir. Tarayıcılar hücresini kalın ve ortalanmış gösterir, ekran okuyucular da sayılar anlam kazansın diye her veri hücresinden önce ilgili başlığı okur.

Q: Bir HTML tablosunu nasıl responsive yaparım?

Tabloyu overflow-x: auto olan bir kapsayıcıya koy. Dar bir ekranda tablo, bütün sayfayı genişletmek yerine kapsayıcının içinde yana kayar.

HTML'de tablo nasıl oluşturulur

Bir tablo, satırlardan (<tr>) oluşan bir <table> elementidir ve her satır hücrelerden oluşur: başlık hücreleri için <th>, veri hücreleri için <td>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

Tablonun kendine ait kenarlığı yoktur; hücreleri görebilesin diye tek bir CSS kuralı onları ekler. Sütunlar hücrelerden gelir: her satırın ilk hücresi birinci sütun, ikincisi ikinci sütun olur ve böyle devam eder. Her satırda aynı sayıda hücre olmalı. Bir <td> sil, o satır erken biter ve bir boşluk bırakır.

<th> hücreleri varsayılan olarak kalın ve ortalanmıştır. Bu yalnızca görünüştür; önemli olan onların etiket olmasıdır, bir sonraki bölüm de bununla ilgili.

Tablo elementleri

Element	Ne olduğu
`<table>`	Tablo
`<caption>`	Tablonun başlığı, `<table>` elementinin ilk çocuğu
`<thead>`	Başlık satırları grubu
`<tbody>`	Gövde satırları grubu (bir tabloda birkaç tane olabilir)
`<tfoot>`	Toplamlar gibi alt satırlar grubu
`<tr>`	Bir satır
`<th>`	Bir başlık hücresi
`<td>`	Bir veri hücresi
`<colgroup>`, `<col>`	Bütün bir sütuna stil vermek için sütunlar (genişlikler, arka plan)

Kenarlıklar HTML tablo kenarlığı sayfasında, birkaç sütuna ya da satıra yayılan hücreler de colspan ve rowspan sayfasında anlatılıyor.

Başlık hücreleri, scope ve caption

Hem üstte hem yanda başlıkları olan bir tablonun, her başlığın hangi yönü gösterdiğini belirtmesi gerekir. scope="col" altındaki sütunu, scope="row" yanındaki satırı etiketler. <caption> tabloya görünür bir başlık verir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Bu işaretlemeyle 14:00 hücresine gelen bir ekran okuyucu "Saturday, Closes, 14:00" diye duyurabilir, böylece sayı hiçbir zaman tek başına okunmaz. Tek bir başlık satırı olan basit bir tabloda tarayıcılar başlıkları genellikle scope olmadan da çıkarır, ama onu yazmanın bir maliyeti yoktur ve tahmin işini ortadan kaldırır.

Caption aynı zamanda bir ekran okuyucunun tabloya ulaştığında duyurduğu şeydir. Onu, tabloya bağlı olmayan ve tablonun üstüne konan bir başlığa tercih et.

thead, tbody ve tfoot

Üç grup satırları başlık, gövde ve alt kısım olarak ayırır. Toplamların yeri alt kısımdır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

İki ayrıntı sayıları okunur yapar: text-align: end ondalık noktaları hizalar (her fiyatın iki ondalığı var), font-variant-numeric: tabular-nums de her rakama aynı genişliği verir.

İlk örnekteki gibi <tr> elementini doğrudan <table> içine yazarsan, tarayıcı satırların çevresine yine de bir <tbody> ekler. table > tr gibi bir CSS seçicisinin hiçbir şeyle eşleşmemesinin nedeni budur: sayfada satırlar tbody içindedir. table tr kullan ya da <tbody> etiketini kendin yaz.

Tabloya stil vermek: çizgiler, hover ve genişlik

:nth-child satırları dönüşümlü olarak renklendirir, :hover işaretçinin altındaki satırı vurgular, width: 100% da tabloyu kapsayıcısı boyunca uzatır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start başlık metnini altındaki verilerle hizalar; aksi hâlde th ortalanmıştır. left yerine start kullanmak, sağdan sola yazılan dillerde hizalamayı doğru tutar.

Kayan responsive tablolar

Bir tablo içeriğinin genişliğinden daha fazla küçülemez. Telefonda geniş bir tablo bütün sayfayı yana iter. Onun yerine onu kayan bir kapsayıcıyla sar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Kapsayıcı burada telefon ekranı gibi davransın diye 300 pikselle sınırlandı; onu yana kaydır. tabindex="0" klavye kullananların kapsayıcıya odaklanıp onu ok tuşlarıyla kaydırmasını sağlar, aria-label ile birlikte role="region" de o durağa bir ad verir.

Tablolar veri içindir

İçerik gerçekten satırlar ve sütunlardan oluşuyorsa tablo kullan: fiyatlar, programlar, karşılaştırmalar, sonuçlar. Sayfada şeyleri yan yana yerleştirmek için tablo kullanma. Yerleşim tabloları, hiçbir anlam taşımayan satırları ve sütunları duyuran ekran okuyucuların kafasını karıştırır ve küçük ekranlara uyum sağlayamaz. Yerleşimi CSS flexbox ve grid yapar.

Sık yapılan hatalar

Farklı sayıda hücresi olan satırlar. Kısa satırlar erken biter ve sütunlar hizasını kaybeder.
Başlıklar için kalın metinli <td> kullanmak. Başlıklar gerçek etiket olsun diye <th> kullan.
Artık kullanılmayan özellikler: border, cellpadding, cellspacing, bgcolor ve align. Onların yerine CSS kullan.
İçeriği herhangi bir hücrenin dışında, doğrudan <tr> ya da <table> içine koymak. Tarayıcılar onu tablonun dışına, genellikle üstüne taşır.
<caption> yerine tablonun üstünde bir başlık.
CSS'te table > tr. Tarayıcı bir <tbody> ekledi; table tr ya da tbody tr yaz.

Sıkça Sorulan Sorular

HTML'de tablo nasıl oluşturulur?

Onu <table> ile sar, her satır için bir <tr> yaz ve hücreleri içine koy: başlık hücreleri için <th>, veri hücreleri için <td>. Bazı hücreler birkaç sütuna yayılmadığı sürece her satırda aynı sayıda hücre olmalı.

th ile td arasındaki fark nedir?

<th> bir sütunu ya da satırı etiketleyen başlık hücresidir, <td> ise veri hücresidir. Tarayıcılar <th> hücresini kalın ve ortalanmış gösterir, ekran okuyucular da sayılar anlam kazansın diye her veri hücresinden önce ilgili başlığı okur.

thead, tbody ve tfoot ne işe yarar?

Satırları tablonun başlığı, gövdesi ve alt kısmı (toplamlar) olarak gruplarlar. Yapıyı yardımcı teknolojiler için netleştirir, CSS'e hedefleyecek bir şey verir ve uzun bir tablo yazdırıldığında tarayıcılar <thead> satırını her sayfada tekrarlayabilir.

HTML tablomda neden kenarlık yok?

Tabloların varsayılan olarak kenarlığı yoktur. Onları CSS ile ekle: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. Eski border="1" özelliği artık kullanılmıyor.

Bir HTML tablosunu nasıl responsive yaparım?

Tabloyu overflow-x: auto olan bir kapsayıcıya koy. Dar bir ekranda tablo, bütün sayfayı genişletmek yerine kapsayıcının içinde yana kayar.

İlgili kavramlar