HTML Tablolar

HTML Tablo Nasıl Oluşturulur?

Bu konumuzda HTML'de tablo oluşturmayı öğreneceğiz.

Öncelikle bir tablo etiketi tanımlaması yaparken <table> etiketini kullanırız. 

Tablomuza her satır eklemek istediğimizde <tr> etiketini kullanırız.

Her satırın içine başlık (kolon) eklemek istediğimizde ise <td> etiketini kullanırız.

Satırın içindeki ana başlığımızın (kolonumuzun) altına yeni başlıklar (kolonlar) eklemek için ise <th> etiketini kullanırız. 

*Tüm bu etiketlere ek olarak, örneklerimizin daha düzenli görünmesi ve genel olarak tablolarda sürekli kullandığımız birkaç etiketi de sizlere anlatmak istiyorum.

width: Bu özelliği kullanırsak tablolarımız komple satırı kaplayacaktır. Eğer bu etiketi kullanmazsak, tablo içerisine yazdığımız metinlerin uzunluğu kadar tablo genişliği oluşacaktır. 

border: Bu özellik sayesinde tablolarımıza kenarlık ekleyebilir ve daha düzenli bir görüntü elde edebiliriz. 

Öğrendiğimiz bu yeni etiketleri ufak bir örnek ile pekiştirelim:

<table style="width:100%" border="1">
<tr>
     <th>Sınıf</th>
     <th>Öğrenci Sayısı</th> 
     <th>Öğretmen Sayısı</th>
  </tr>
  <tr>
     <td>12-A Sayısal Sınıfı</td>
     <td>65</td> 
     <td>12</td>
  </tr>
  <tr>
    <td>12-A Sözel ve Dil Sınıfı</td>
    <td>120</td> 
    <td>25</td>
  </tr>
</table>

Örneğimizin çıktısı şu şekilde olacaktır:

Colspan Kullanımı

Peki oluşturduğumuz tabloda birden fazla kolonu birleştirmek istersek ne yapacağız? işte o zaman kolon birleştirme etiketi yani "colspan" etiketini kullanacağız.

<table style="width:100%" border="1">
 <tr>
     <th>Ad</th>
     <th colspan="2">İletişim</th>
  </tr>
  <tr>
     <td>Onur KUL</td>
     <td>onurkul.com.tr</td>
     <td>iletisim@onurkul.com.tr</td>
  </tr>
</table>

Örneğimizin çıktısı şu şekilde olacaktır:

Rowspan Kullanımı

Bu özellik ile satırları birleştirebiliriz. Hadi gelin ufak bir örnek ile bu kullanımı pekiştirelim.

<table style="width:100%" border="1">
  <tr>
    <th>Ad:</th>
    <td>Onur KUL</td>
  </tr>
  <tr>
    <th rowspan="2">İletişim:</th>
    <td>onurkul.com.tr</td>
  </tr>
  <tr>
    <td>iletisim@onurkul.com.tr</td>
  </tr>
</table>

Örneğimizin çıktısı şu şekilde olacaktır:

Tüm bu örnekleri detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.