HTML Tablolar

Bu konu, HTML'de kullanabileceğiniz tablo etiketlerini ve örneklerini içermektedir.

HTML Şubat 5, 2021 0 860 Okuma Listesine Ekle

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:

Sınıf	Öğrenci Sayısı	Öğretmen Sayısı
12-A Sayısal Sınıfı	65	12
12-A Sözel ve Dil Sınıfı	120	25

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>[email protected]</td>
  </tr>
</table>

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

Ad	İletişim
Onur KUL	onurkul.com.tr	[email protected]

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>[email protected]</td>
  </tr>
</table>

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