Tablo iskeleti

<table>, <tr>, <td> etiketleriyle basit bir tablo kurmayı öğrenirsin.

Tablo nedir?

HTML tablosu, verileri satır ve sütunlarda düzenli gösteren yapıdır. Spor sonuçları, fiyat listeleri ya da aylık takvim buna örnektir. Temel üç etiketle kurulur: <table> tabloyu açar, <tr> bir satırı (table row), <td> ise bir hücreyi (table data) temsil eder.

Basit bir iki satırlı tablo şöyle başlar: <table><tr><td>Kahve</td><td>20 TL</td></tr></table>. Hücreler soldan sağa, satırlar yukarıdan aşağıya okunur.

Fiyat listesi örneği

İki satır ve iki sütunlu basit bir fiyat listesi şöyle yazılır:

<table>
  <tr>
    <td>Kahve</td>
    <td>20 TL</td>
  </tr>
  <tr>
    <td>Çay</td>
    <td>15 TL</td>
  </tr>
</table>

Her satır bir <tr>; içine sütun sayısı kadar <td> yazılır. Girintileme okunabilirliği artırır ama tarayıcı için zorunlu değildir.

Uygulama İki satırlı bir tablo yaz

Body içine bir <table> ekle. İçinde en az bir <tr> satırı olsun; her satırda iki <td> hücresi bulunsun. Örneğin bir fiyat listesi: Kahve / 20 TL ve Çay / 15 TL.

Örnek çözümü göster

<body>
  <table>
    <tr>
      <td>Kahve</td>
      <td>20 TL</td>
    </tr>
    <tr>
      <td>Çay</td>
      <td>15 TL</td>
    </tr>
  </table>
</body>

Kendini test et

Tabloda bir satırı hangi etiket açar?
- <table>
- <td>
- <tr>
- <row>
Cevabı göster

<tr> — Doğru. <tr> (table row) bir satırı temsil eder.

Hücreyi kapat

<table>
  <tr>
    <td>Kahve</td>
    <td>Çay____
  </tr>
</table>

Cevabı göster

<table>
  <tr>
    <td>Kahve</td>
    <td>Çay</td>
  </tr>
</table>

Etiketi rolüyle eşleştir

<table>

Tablo kabı
<tr>

Satır
<td>

Hücre
<ul>

Sırasız liste kabı

Sıradaki ders: Başlık hücreleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler