HTML’de Tablolar ve Tablo Özellikleri

HTML’de Tablolar

HTML’de neden tablo oluştururuz?

• Bir şeyleri düzene sokmak için
• Kategoriler oluşturmak için
• Versiyon, ay, yıl, gelir, gider, toplam vb. konuları açıklamak için

Ve bunun gibi birçok şey için web tasarımlarımızda tablolar oluştururuz.

Tablo oluşturabilmek için 4 temel etiketimiz var: <table> etiketi başta olmak üzere <tr>, <th> ve <td> etiketleri.

Şimdi bu etiketler ne işe yarar bunları açıklayalım:

• <table> – Bu etiket, içerisindeki kodların tablo oluşturmak için kullanılacağını tarayıcıya bildirir.
• <tr> – Bu etiket tablonun satırlarını oluşturmak için kullanılır.
• <th> – Bu etiket tablolarda belirtmek istediğimiz başlıklar için kullanılır.
• <td> – Bu etiketimiz ise tablonun hücrelerini belirler.

Hemen bir örnek verelim, sonrasında da CSS kodları ile nasıl stil verebileceğimize bir göz atalım:

<table style="width:170px">
  <tr>
    <th>İsim</th>
    <th>Soyisim</th>
    <th>Yaş</th>
  </tr>
  <tr>
    <td>Mustafa Kemal</td>
    <td>Atatürk</td>
    <td>∞</td>
  </tr>
  <tr>
    <td>Faruk</td>
    <td>Nart</td>
    <td>17</td>
  </tr>
</table>

CSS ile Tabloya Kenarlık Verme

CSS ile kenarlık vermeyi geçen dersimizde zaten işlemiştik; şimdi hem daha iyi kavrayabilmeniz için hem de tabloya stil verme mantığını anlamanız için tekrar bir üzerinden geçelim:

table, th, td {
    border: 1px solid black;
}

border özelliğini görünce zaten hemen mantığı anlamışsınızdır. Kodun anlamı: tablo, başlık ve hücrelere 1 px kalınlıkta, siyah renkte ve düz (solid) bir çerçeve ver.

CSS border-collapse özelliği

Varsayılan olarak her hücrenin kendi kenarlığı olduğu için tabloda çift çizgiler görünür. border-collapse: collapse bu kenarlıkları birleştirip tek çizgi hâline getirir.
Hemen kullanımına bakalım:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Tabloda Padding Kullanımı

Web tasarımda tablolarda hücre içeriği ile kenarlık arasında boşluk bırakmak için padding kullanırız.
Hemen bir örnek verelim:

th, td {
    padding: 15px;
}

Tablolarda Yazıya Konum Verme

HTML tablolarda tablo başlıkları varsayılan olarak kalın ve ortalanmış biçimde gelir.
Ama biz bu başlığı sağa veya sola yaslamak istersek text-align özelliğini kullanırız.

Kullanımı:

th {
    text-align: left;
}

Tablolarda border-spacing Kullanımı

Bu özellik hücreler arasındaki boşluğu belirtir.

Kullanımı:

table {
    border-spacing: 5px;
}

Hücreyi Birden Fazla Sütuna Yaymak: colspan

Web tasarım işi ile uğraşmak istiyorsanız colspan özelliğini mutlaka bilmeniz lazım.
Biz şimdilik tablolarda kullanımını göreceğiz, ilerleyen zamanlarda daha detaylı işlerde de kullanacağız.

Bir hücrenin yan yana birden fazla sütunu kaplamasını istediğimizde colspan özelliğini kullanırız. Aşağıdaki örnekte “Telefon” başlığı iki sütunu kaplar.

Kullanımı:

<table style="width:100%">
  <tr>
    <th>İsim</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Eforweb</td>
    <td>+90 555 000 00 01</td>
    <td>+90 555 000 00 02</td>
  </tr>
</table>

Başlıkları Alt Alta Sıralama: rowspan

Bir hücrenin alt alta birden fazla satırı kaplamasını istediğimizde rowspan özelliğini kullanırız.

Kullanımı:

<table style="width:100%">
  <tr>
    <th>İsim:</th>
    <td>Eforweb</td>
  </tr>
  <tr>
    <th rowspan="2">Telefon:</th>
    <td>+90 555 000 00 01</td>
  </tr>
  <tr>
    <td>+90 555 000 00 02</td>
  </tr>
</table>

Tabloya Başlık Verme

Tablomuzun içerisindeki sütun başlıkları hariç bir de tüm tabloyu temsil eden bir başlık vermek istiyoruz.
Bunu <caption> etiketi ile yapabiliriz.

Örnek:

<table style="width:100%">
  <caption>Aylık Tasarruf</caption>
  <tr>
    <th>Ay</th>
    <th>Tasarruf</th>
  </tr>
  <tr>
    <td>Ocak</td>
    <td>₺100</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>₺50</td>
  </tr>
</table>

Tablolara Özel Stil Verme

Son olarak tablolarımıza özel stil vermeyi anlatmak istiyorum.
Önceden göstermiş olduğum sınıf verme yöntemini tablolarda da kullanarak tablolarımıza özel stiller verebiliriz.

Örnek:

<table class="tasarruf">
  <caption>Aylık Tasarruf</caption>
  <tr>
    <th>Ay</th>
    <th>Tasarruf</th>
  </tr>
  <tr>
    <td>Ocak</td>
    <td>₺100</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>₺50</td>
  </tr>
</table>

Öncelikle tablomuza görmüş olduğunuz gibi bir sınıf tanımladık. Ardından harici stil belgemize gelip verdiğimiz sınıf adını yazıyor, içerisine vermek istediğimiz stilleri ekliyoruz ve tablomuzu biçimlendirmiş oluyoruz:

table.tasarruf {
    width: 100%;
    background-color: #f1f1c1;
}

Bu dersimizde <table>, <tr>, <th>, <td> ve <caption> etiketlerinin; border, border-collapse, text-align, border-spacing, colspan, rowspan özelliklerinin kullanımını ve tablolara özel stil vermeyi öğrendik.
Bir sonraki derste görüşmek üzere.