1135

Komple Uygulamalı Web Geliştirme Eğitimi | 2019

Html Tablolar

Html 5 ile tablo, satır ve sütun nasıl oluşturulur ?


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ü :

Kurs Ders Sayısı Öğrenci Sayısı
Komple Uygulamalı Web Geliştirme Eğitimi 325 3000
Komple Uygulamalı Programlama Eğitimi : Yeni Başlayanlar 126 500

 

<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ü ;

 

Kurs Ders Sayısı Öğrenci Sayısı
Komple Uygulamalı Web Geliştirme Eğitimi 325 3000
Komple Uygulamalı Programlama Eğitimi : Yeni Başlayanlar 126 500

 

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ü :

 

Ad İletişim
Sadık Turan sadikturan.com sadikturan@gmail.com

 

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ü : 

 

Ad: Sadık Turan
İletişim: sadikturan.com
sadikturan@gmail.com
Paylaş