HTML Tablolar (Tables)

Son güncelleme: 09.06.2011 11:45
  • HTML ile tablolar oluşturabilirsiniz.

    Örnekler
    Tablolar

    Tablo Kenarlıkları



    Tablolar

    Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı "table data"dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.


    <table border="1">
    <tr>
    <td>satır 1, hücre 1</td>
    <td>satır 1, hücre 2</td>
    </tr>
    <tr>
    <td>satır 2, hücre 1</td>
    <td>satır 2, hücre 2</td>
    </tr>
    </table>

    Çıktısı aşağıdaki gibi olacaktır:
    noimage




    Tablolar ve Kenarlık (border) Parametresi

    Eğer bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.


    Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:

    <table border="1">
    <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
    </tr>
    </table>


    Tablolarda Başlıklar

    Başlıklar <th> etiketi ile belirtilir.

    <table border="1">
    <tr>
    <th>Başlık</th>
    <th>Başka Başlık</th>
    </tr>
    <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
    </tr>
    <tr>
    <td>Satır 2, Hücre 1</td>
    <td>Satır 2, Hücre 2</td>
    </tr>
    </table>

    Çıktısı:
    noimage



    Bir Tabloda Boş Hücreler

    Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler.

    <table border="1">
    <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
    </tr>
    <tr>
    <td>Satır 2, Hücre 1</td>
    <td></td>
    </tr>
    </table>

    Çıktısı:
    noimage


    Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).

    Bundan kurtulmak için, (  ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.

    <table border="1">
    <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
    </tr>
    <tr>
    <td>Satır 2, Hücre 1</td>
    <td> </td>
    </tr>
    </table>

    Çıktısı:
    noimage




    Tablo Etiketleri
    noimage
#09.06.2011 11:45 0 0 0