Html Tablolar - Html Dersleri

[VexraDev]

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</th>
     <th>Öğrenci</th>
  </tr>
  <tr>
     <td>Html Dersleri VexraDev</td>
     <td>325</td>
     <td>3000</td>
  </tr>
  <tr>
    <td>Html Dersleri VexraDev : Yeni Başlayanlar</td>
    <td>126</td>
    <td>500</td>
  </tr>
</table>

<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</th>
     <th>Öğrenci</th>
  </tr>
  <tr>
     <td>Html Dersleri VexraDev</td>
     <td>325</td>
     <td>3000</td>
  </tr>
  <tr>
    <td>Html Dersleri VexraDev : Yeni Başlayanlar</td>
    <td>126</td>
    <td>500</td>
  </tr>
</table>

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>VexraDev</td>
     <td>turkmmo.com</td>
     <td>turkmmo@gmail.com</td>
  </tr>
</table>

Satır Birleştirme (rowspan) :

<table style="width:100%" border="1">
  <tr>
    <th>Ad:</th>
    <td>VexraDev</td>
  </tr>
  <tr>
    <th rowspan="2">İletişim:</th>
    <td>turkmmo.com</td>
  </tr>
  <tr>
    <td>turkmmo@gmail.com</td>
  </tr>
</table>