HTML for Kids · Ders

Tablolar: Verileri Düzenleme

Bilgileri görüntülemek için tablolar oluşturmayı öğrenin

Tablolar: Verileri Düzenleme, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 4 dersten oluşur.

Tablolar: Verileri Düzenleme

Sonraki derse hoş geldiniz! Bugün HTML'de nasıl tablo oluşturacağınızı öğreneceğiz. Tablolar, bilgileri satırlar ve sütunlar hâlinde düzenlemek için harikadır.

Tablolar Nedir?

Tablolar, bilgileri yapılandırılmış bir biçimde görüntülemenin bir yoludur. Her tablo satır ve sütunlardan oluşur.

Bir tablo şu şekilde görünür:

Name      Age      City


Alice     12       New York


Bob       15       London

Bu tabloyu HTML kullanarak oluşturalım!

Basit Bir Tablo Oluşturma

HTML'de tablolar <table> etiketi kullanılarak oluşturulur. Satırlar <tr> etiketiyle, hücreler ise <td> etiketiyle oluşturulur.

Örnek:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Tablo Başlığı Ekleme

<th> etiketini kullanarak tablonuza başlık ekleyebilirsiniz. Başlıklar tablonuzun daha anlaşılır olmasını sağlar.

Örnek:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Tablonuza Kenarlık Ekleme

Tablolar varsayılan olarak kenarlıklara sahip değildir. border özniteliğini veya CSS'yi kullanarak kenarlık ekleyebilirsiniz.

Örnek:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Sütunları ve Satırları Birleştirme

Bazen bir hücrenin birden fazla sütuna veya satıra yayılması gerekebilir. Bunu yapmak için colspan veya rowspan özniteliğini kullanın.

Örnek:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Tablonuza Stil Verme

CSS kullanarak tablonuzun daha iyi görünmesini sağlayabilirsiniz. Örneğin renkleri değiştirebilir, iç boşluk ekleyebilir veya metni hizalayabilirsiniz.

Örnek:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Kendiniz Deneyin

En sevdiğiniz filmleri listeleyen bir tablo oluşturalım. İşte bir örnek:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

Harika İş!

Tebrikler! Tablo oluşturmayı, başlık eklemeyi ve hatta tablolara stil vermeyi öğrendiniz. Tablolar, verileri düzenlemek ve görüntülemek için mükemmel bir yoldur. Sonraki derste kullanıcı girdilerini toplamak için formları öğreneceğiz. Sayfalarınızı etkileşimli hâle getirmeye hazır olun!

Sıkça Sorulan Sorular

“Tablolar: Verileri Düzenleme” dersi ücretsiz mi?

Evet — “Tablolar: Verileri Düzenleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 4 dersten oluşur.

“Tablolar: Verileri Düzenleme” dersinde ne öğreneceğim?

Bilgileri görüntülemek için tablolar oluşturmayı öğrenin HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Tablolar: Verileri Düzenleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML for Kids Sayfasına Dön