HTML’de Tablolar (Tablo Yapımı ve Düzenleme)

HTML’de Tablolar

İlkel tasarımlarda tabloları web sayfalarımızın iskeletini çıkartırken kullanıyorduk. Artık mobil uyumlu responsive özelliklere ihtiyaç ve kolay kullanım sebebiyle div kullanımları yoğunlaştı ve email tasarımları dışında tabloları web sayfalarında sadece tablo amacı için kullanıyoruz.

HTML’de Tablo Nasıl Oluşturulur ?

1. <table> etiketleri ile tablomuzu oluşturmaya başlıyoruz.
2.  <tr> ile satırları oluşturuyoruz.
3. <td> ve <th> ile tabla sutunlarını oluşturuyoruz.

Örnek:

<table>

    <!--- Birinci Satırımın Başlangıcı -->
             <tr>
                         <!--- Birinci Satır Birinci Sutun-->
                                 <th>İsim</th>
                        <!--- Birinci Satır İkinci Sutun -->
                                  <th>Yaş</th>
                        <!--- Birinci Satır Üçüncü Sutun -->
                                  <th>Email</th>
             </tr>

    <!--- Birinci Satırımın Bitişi -->

    <!--- İkinci Satırımın Başlangıcı -->
             <tr>
                         <!--- İkinci Satır Birinci Sutun-->
                                 <td>Çağrı Güngör</td>
                        <!--- İkinci Satır İkinci Sutun -->
                                  <td>27</td>
                        <!--- İkinci Satır Üçüncü Sutun -->
                                  <td>iletisim@cagrigungor.com</td>
             </tr>

    <!--- İkinci Satırımın Bitişi -->


    <!--- Üçüncü Satırımın Başlangıcı -->
             <tr>
                         <!--- Üçüncü Satır Birinci Sutun-->
                                 <td>Olena Kashuba</td>
                        <!--- Üçüncü Satır İkinci Sutun -->
                                  <td>26</td>
                        <!--- Üçüncü Satır Üçüncü Sutun -->
                                  <td>olena@cagrigungor.com</td>
             </tr>

    <!--- üçüncü Satırımın Bitişi -->

<table>

Önizleme:

Not: Farkettiğiniz gibi ilk satırda sutun için th kullanırken ikinci ve üçüncü satırda td kullandım. Bunun sebebi th başlık şeklinde kullanılan bir etiket olup üst bölümde genelde o kullanılır. Tabiki kullanmak zorunlu değildir.