Html Tablolar

Html Tablo Tanımlama

• Her satır <tr> ile ifade edilir.
• Satır içindeki her kolon <td> ile ifade edilir.
• Başlık kolonu <th> ile ifade edilir.

<table style="width:100%">
  <tr>
     <th>Kurs</th>
     <th>Ders Sayısı</th> 
     <th>Öğrenci Sayısı</th>
  </tr>
  <tr>
     <td>Komple Uygulamalı Web Geliştirme Eğitimi</td>
     <td>325</td> 
     <td>3000</td>
  </tr>
  <tr>
    <td>Komple Uygulamalı Programlama Eğitimi : Yeni Başlayanlar</td>
    <td>126</td> 
    <td>500</td>
  </tr>
</table>

Ekran Görüntüsü :

<table style="width:100%"> yazdığımızdan dolayı tablo satırı kapladı aksi halde tablo genişliği içerik kadar olurdu.

Tablo Kenarlığı :

<table style="width:100%" border="1"> şeklinde border eklersek tablonun kenarlıkları ortaya çıkar.

<table style="width:100%" border="1">
  <tr>
     <th>Kurs</th>
     <th>Ders Sayısı</th> 
     <th>Öğrenci Sayısı</th>
  </tr>
  <tr>
     <td>Komple Uygulamalı Web Geliştirme Eğitimi</td>
     <td>325</td> 
     <td>3000</td>
  </tr>
  <tr>
    <td>Komple Uygulamalı Programlama Eğitimi : Yeni Başlayanlar</td>
    <td>126</td> 
    <td>500</td>
  </tr>
</table>

Ekran Görüntüsü ;

Kolon birleştirme (colspan) :

Her satırda eşit sayıda kolon bulunmalıdır. Ancak bazı zamanlar bazı kolonları birleştirmek isteyebiliriz.

Aşağıdaki örnekte 1.satırda  (1+2)  toplam 3 kolon bulunmaktadır.

2.satırda seatırda ise 3 kolon bulunmaktadır.

<table style="width:100%" border="1">
  <tr>
     <th>Ad</th>
     <th colspan="2">İletişim</th>
  </tr>
  <tr>
     <td>Sadık Turan</td>
     <td>sadikturan.com</td>
     <td>sadikturan@gmail.com</td>
  </tr>
</table>

Ekran Görüntüsü :

Satır Birleştirme (rowspan) : 

<table style="width:100%" border="1">
  <tr>
    <th>Ad:</th>
    <td>Sadık Turan</td>
  </tr>
  <tr>
    <th rowspan="2">İletişim:</th>
    <td>sadikturan.com</td>
  </tr>
  <tr>
    <td>sadikturan@gmail.com</td>
  </tr>
</table>

Ekran Görüntüsü :