HTML Tablo Yapıları

Web sayfalarında zaman zaman tablolara rastlarız. Bunlar tıpkı excel uygulamasında olduğu gibi hücrelerden, kolonlardan, satırlardan ve başlıklardan oluşabilir. Tıpkı aşağıda vermiş olduğum örnek gibi.

Ad Soyad
David Gilmour
Roger Waters

Bunun gibi bir tablo oluşturmak için, temelde bilmeniz gereken 3 bilgi var.

  • Tablolar <table> etiketi ile açılır ve aynı şekilde </table> etiketi ile kapanır.
  • Satırlar <tr> etiketi ile açılır ve aynı şekilde </tr> etiketi ile kapanır.
  • Bir satır içerisine ekleyeceğiniz hücreler <td> etiketi ile açılır ve </td> ile kapanır.

Bu durumda yukarıda örneği verilmiş tablonunkoduna inersek şu şekilde bir görüntü bizi karşılar

<table>
  <tr>
    <td>Ad</td>
    <td>Soyad</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Gilmour</td>
  </tr>
  <tr>
    <td>Roger</td>
    <td>Waters</td>
  </tr>
</table>

 

HTML bize bir avantaj daha sunmuştur. Bu örnekte kullanılan başlıkları küçük bir hareket ile başlık formatında ekranda göstermemiz de mümkündür. Anlaşılması için aynı tablonun başlıklarını biçimlendirerek buraya tekrar yazdıralım.

Ad Soyad
David Gilmour
Roger Waters

Tabloda görüleceği üzere başlıklar daha vurgulanmış hale gelmiştir. Bunun için başlık satırındaki <td> etiketlerini <th> ile değiştirdik. Kodunu da tekrar aşağıda paylaşıyorum.

<table>
  <tr>
    <th>Ad</th>
    <th>Soyad</th>
  </tr>
  <tr>
    <td>David</td>
    <td>Gilmour</td>
  </tr>
  <tr>
    <td>Roger</td>
    <td>Waters</td>
  </tr>
</table>

Tablo yapılarına ait bir “attribute” olarak karşımıza border özelliği çıkar. Border özelliği tablonun sınırlarının ne kadar belirgin olacağını vurgulamak için kullanılır. Aşağıda örnek kod ve çıktıyı paylaşıyorum. Border değerimiz bu örnekte 3 olup farklı değerlerin nasıl etki edeceğine dair deneme yapmayı size bırakıyorum.

Kod:

<table border="3">
  <tr>
    <td>Takım</td>
    <td>Ülke</td>
  </tr>
  <tr>
    <td>Scuderia Ferrari</td>
    <td>İtalya</td>
  </tr>
</table>

 

Çıktı:

Takım Ülke
Scuderia Ferrari İtalya

 

Tablolar her satırda eşit sayıda kolona sahip olmak zorunda değildir. Bunun sağlanabilmesi için <td> etiketinin “colspan” özelliği kullanılır. Kullanımına dair bir örneğini aşağıda kod ve çıktı olarak paylaşıyorum.

Kod:

<table>
  <tr>
    <td>Marka</td>
    <td>Model</td>
  </tr>
  <tr>
    <td colspan="2">Audi - A8L</td>
  </tr>
</table>

 

Çıktı:

Marka Model
Audi A8L

Görüldüğü üzere ilk <tr> içerisinde 2 adet <td> olmasına rağmen, ikinci satırda 1 adet <td> var ve colspan özelliği ile kullanılmış.

Aynı durum satırlar için de geçerlidir. Yani bir <td> birden fazla satırı da kapsayabilir. Bu defa özelliğimiz “rowspan” olarak isimlendirilmektedir. Örnek kullanım aşağıda sunulmuştur.

Kod:

<table>
 <tr>
  <th>Ay</th>
  <th>Fiyat</th>
  <th>Ortalama Fiyat</th>
 </tr>
 <tr>
  <td>Ocak</td>
  <td>100TL</td>
  <td rowspan="2">150TL</td>
 </tr>
 <tr>
  <td>Şubat</td>
  <td>200TL</td>
 </tr>
</table>

 

Çıktı:

Ay Fiyat Ortalama Fiyat
Ocak 100TL 150TL
Şubat 200TL

Tablolarda bu özellikler dışında bir de <caption> etiketi ile sağlanabilen başlıklandırma özelliği vardır. Tablolar konusunda son olarak bunun da örneğini verelim ve yazımızı bitirelim.

Kod:

 <table>
  <caption>Gelirler Tablosu</caption>
  <tr>
    <th>Kalem</th>
    <th>Gelir</th>
  </tr>
  <tr>
    <td>Kira</td>
    <td>5000TL</td>
  </tr>
  <tr>
    <td>Reklam</td>
    <td>2000TL</td>
  </tr>
</table>

Çıktı:

Gelirler Tablosu
Kalem Gelir
Kira 5000TL
Reklam 2000TL

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir