Html Tablo Oluşturma

nhtctn nhtctn

Html de tablo kullanımı div yapısı çıktıktan sonra eskiye göre düşüş göstermiştir. Veri çekme gibi olaylarda hala kullanılmaktadır.

Şimdi tablo etiketlerine göz atalım.

<table></table> Tablo tanımlamak için kullanılır.

<thead></thead>Tablo başlık bloğu.

<tbody></tbody>Tablo içerik bloğu.

<th></th> Sütün başlığı için kullanılır.

<tr></tr> Satır oluşturmak için kullanılır.

<td></td> Sütün oluşturmak için kullanılır.

colspan:Sütün hücrelerini birleştirmek için kullanılır.

rowspan :Satır hücrelerini birleştirmek için kullanılır.

border : Tablo kenarlarına çizgi kalınlığı 1 olarak atadım.Varsayılan 0 olarak gelir.Kalınlığı artırabilirsiniz.

Şimdi tablo oluşturalım.

 <table border="1">

        <thead>
            <th>isim</th>
            <th>Soyisim</th>
            <th>Telefon</th>
         </thead>
         <tbody>
        <tr>
            <td>Ahmet</td>
            <td>Demir</td>
            <td>05551234545</td>
        </tr>
        <tr>
            <td>Elif</td>
            <td>Deniz</td>
            <td>05551122112</td>
        </tr>
     </tbody>
    </table>

Colspan(Kolon birleştirme) ile 3 adet sütün birleştirerek tek sütün gibi göstermek. Rowspan(satır birleştirme) da aynı mantıkla yapılabilir.

<table border="1">

        <thead>
            <th>isim</th>
            <th>Soyisim</th>
            <th>Telefon</th>
         </thead>
        <tbody>
        <tr>
            <td>Ahmet</td>
            <td>Demir</td>
            <td>05551234545</td>
        </tr>
        <tr>
            <td>Elif</td>
            <td>Deniz</td>
            <td>05551122112</td>
        </tr>

        <tr>
        <td colspan="3">Bugün kayıt olan üyeler</td>      
        </tr>
      </tbody>
    </table>

Çıktı Aşağıda olduğu gibidir.

Yorum yazın

BENZER YAZILAR