HAKKOD
Filistin'e insani yardım sağlanmasına yardım edin

Birden Fazla Satırdan Oluşan Tablo Oluşturmak

HTML Dersleri > Birden Fazla Satırdan Oluşan Tablo Oluşturmak

Bir önceki dersimizde temel bir tablo oluşturmayı öğrenmiş olduk. Bu dersimizde tablomuza yeni bir satır eklemeyi öğreneceğiz ve birkaç örnek yaparak konuyu pekiştireceğiz.

Tablo oluşturmak için <table> etiketini kullanıyoruz. Ardından tablomuza satır eklemek için <tr> etiketini kullanıyoruz ve son olarak satırı parçalara ayırmak için <td> etiketini kullanıyoruz.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Namaz Vakitleri</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>İmsak</td>
        <td>Güneş</td>
        <td>Öğle</td>
        <td>İkindi</td>
        <td>Akşam</td>
        <td>Yatsı</td>
      </tr>
      <tr>
        <td>03:52</td>
        <td>05:39</td>
        <td>13:05</td>
        <td>17:01</td>
        <td>20:22</td>
        <td>22:01</td>
      </tr>
    </table>
  </body>
</html>

Gördüğünüz gibi ilk baştaki <tr> etiketimiz ile ilk satırımızı oluşturduk ve ikinci <tr> etiketimizlede ikinci satırımızı oluşturmuş olduk. Ardından satırlarımızı bölümlere ayırmak için <td> etiketini kullandık. Ne kadar çok <td> etiketi kullanırsanız satırı o kadar bölüme ayırmış olursunuz.

Şimdi de vakitlerin isimlerini sol tarafa alalım ve vakitleri sağ tarafta gösterelim.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Namaz Vakitleri</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>İmsak</td>
        <td>03:52</td>
      </tr>
      <tr>
        <td>Güneş</td>
        <td>05:39</td>
      </tr>
      <tr>
        <td>Öğle</td>
        <td>13:05</td>
      </tr>
      <tr>
        <td>İkindi</td>
        <td>17:01</td>
      </tr>
      <tr>
        <td>Akşam</td>
        <td>20:22</td>
      </tr>
      <tr>
        <td>Yatsı</td>
        <td>22:01</td>
      </tr>
    </table>
  </body>
</html>

Gördüğünüz gibi iki sütundan oluşan bir tablo yaptık. Bunun sebebi tüm <tr> etiketlerinde 2 adet <td> etiketi kullanmamızdır.