0 gün Seviye 1 Avar Teknolojileri

Tablolar

Ders 20/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda satırları, başlıkları ve birleştirilmiş hücreleri olan tablolar yazabileceksiniz.

Tablonun parçaları

  • table Tablonun tamamı.
  • tr Bir satır (table row).
  • th Başlık hücresi (table header).
  • td Veri hücresi (table data).
  • caption Tablonun başlığı. table etiketinin hemen ardından yazılır.

Tablolar satır satır yazılır. Sütun etiketi yoktur.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tablo</title>
  <style>
    table, th, td { border: 1px solid black; }
  </style>
</head>
<body>
  <table>
    <caption>Sınav notları</caption>
    <tr>
      <th>Ad</th>
      <th>Not</th>
    </tr>
    <tr>
      <td>Ali</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Ayşe</td>
      <td>92</td>
    </tr>
  </table>
</body>
</html>
head içindeki style nedir?

HTML tabloları varsayılan olarak çizgisizdir. Hücreleri görebilmeniz için örneklere küçük bir CSS satırı ekledik. CSS’e Köprü dersinde bunun ne anlama geldiğini öğreneceksiniz.

Bölümler ve scope

Büyük tabloları thead, tbody ve tfoot ile üç bölüme ayırabilirsiniz.

scope niteliği, başlığın hangi yönü kapsadığını söyler: col sütunu, row satırı. Ekran okuyucular hücreleri okurken bu bilgiyi kullanır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bölümler</title>
  <style>
    table, th, td { border: 1px solid black; }
  </style>
</head>
<body>
  <table>
    <caption>Kantin fiyatları</caption>
    <thead>
      <tr>
        <th scope="col">Ürün</th>
        <th scope="col">Fiyat</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Tost</th>
        <td>40 TL</td>
      </tr>
      <tr>
        <th scope="row">Ayran</th>
        <td>15 TL</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Toplam</th>
        <td>55 TL</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Hücre birleştirme

  • colspan Hücreyi yan yana birkaç sütuna yayar.
  • rowspan Hücreyi alt alta birkaç satıra yayar.
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Birleştirme</title>
  <style>
    table, th, td { border: 1px solid black; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th colspan="2">Hafta sonu</th>
    </tr>
    <tr>
      <td>Cumartesi</td>
      <td>Pazar</td>
    </tr>
    <tr>
      <td rowspan="2">Dinlenme</td>
      <td>Kitap</td>
    </tr>
    <tr>
      <td>Yürüyüş</td>
    </tr>
  </table>
</body>
</html>

Hücre Genişliği ve Aralıkları

  • cellpadding Hücre içindeki yazının kenarlardan uzaklığı
  • cellspacing Hücrelerin birbirine olan uzaklığı. 0 yazılırsa hücreler arasında boşluk kalmaz.
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Birleştirme</title>
  <style>
    table, th, td { border: 1px solid black; }
  </style>
</head>
<body>
  <table cellpadding="5" cellspacing="5">
    <tr>
      <th colspan="2">Hafta sonu</th>
    </tr>
    <tr>
      <td>Cumartesi</td>
      <td>Pazar</td>
    </tr>
    <tr>
      <td rowspan="2">Dinlenme</td>
      <td>Kitap</td>
    </tr>
    <tr>
      <td>Yürüyüş</td>
    </tr>
  </table>
</body>
</html>

Birleştirilen hücre başka hücrelerin yerini kapladığı için o satırlarda daha az td yazılır. Son satırda yalnızca bir td olmasının nedeni budur.

Sık yapılan hatalar

Sayfa düzeni için tablo kullanmak. Tablolar yalnızca tablo şeklindeki veriler içindir. Sayfa yerleşimi CSS ile yapılır.

Satırlarda farklı sayıda hücre yazmak. Birleştirmeleri de sayarak her satırın aynı sütun sayısına ulaştığını kontrol edin.

th kullanmamak. Başlık hücrelerini td ile yazarsanız tablo daha zor anlaşılır.

Soru 1

Tabloda yeni bir satır hangi etiketle başlar?

  • tr :: Doğru.
  • td :: td hücredir.
  • th :: th başlık hücresidir.
Soru 2

Bir hücreyi yan yana iki sütuna yaymak için ne yazılır?

  • rowspan="2" :: rowspan alt alta iki satıra yayar.
  • colspan="2" :: Doğru.
  • span="2" :: Hücrelerde bu amaçla kullanılan nitelik colspan ve rowspan nitelikleridir.
Ders programı

Hedefteki tabloyu yazın. Yalnızca body içine yazılacak kodu yazın. Sütun başlıkları scope="col", satır başlıkları scope="row" taşısın. Beden Eğitimi iki sütunu kaplasın. Hedef önizlemede çizgiler görünmez çünkü CSS eklemedik.

<table>
  <caption>Ders Programı</caption>
  <tr>
    <th scope="col">Saat</th>
    <th scope="col">Pazartesi</th>
    <th scope="col">Salı</th>
  </tr>
  <tr>
    <th scope="row">09.00</th>
    <td>Matematik</td>
    <td>Türkçe</td>
  </tr>
  <tr>
    <th scope="row">10.00</th>
    <td colspan="2">Beden Eğitimi</td>
  </tr>
</table>

Bu derste öğrendikleriniz

  • Tablolar table, tr, th ve td ile satır satır yazılır.
  • scope başlıkların kapsamını, caption tablonun başlığını belirtir.
  • colspan ve rowspan hücreleri birleştirir.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.