Türküm, doğruyum, yapışkanım!

HTML Tags (Etiketleri) - 4

4. bölüm tablolar - xhtml ile birlikte gerçek kullanım alanına kavuşan tabloları nasıl oluşturabileceğimize bakalım...

HTML'i ilk öğrenenler ve öğretenler grafik editöründe hazırladığı taslağı slice ile parçalara böler daha sonra html editöründe oluşturduğu tablonun satır ve sütunlarına bu parçaları yerleştirir. Bu yanlış mıdır? Dışarıdan bakıldığında hayır! Çünkü sitemiz gayet düzgün çalışıyor, tam karşımızda...

XHTML bize bunun yanlış olduğunu, bir web sitesinin tablolar üzerine inşa edilmemesi, diğer taşıyıcı elementleri (div, p, ul, ol vs. [bu etiketlerle ileride tanışacağız]) kullanmamız gerektiğini bildirdi. Tüm etiketler kendi görevleri için kullanılmalıdır, bu durum bizim standartlara uygun, herkese hitap edebilen bir iş ortaya çıkarmamıza yardımcı olacaktır. Gazoz kapağını açacak ile değil de pense ile açmak; durumun özeti budur.

Genel özellikler

Tablolar <table> etiketi ile tanımlanır.

<table> Tablolar <tr> etiketi ile satırlara, her bir satır ise <td> etiketi ile veri hücrelerine bölünmüştür. td'lere yani veri hücrelerine, imaj(resim), liste, metin(paragraflar), formlar, yatay şeritler(bkz. <hr>), tablolar vs. eklemek mümkündür.

Evet ilk tablo örneğimizin kodları aşağıdaki gibidir.

<table border="1">
  <tr>
    <td>Burası satır 1, hücre 1</td>
    <td>Burası satır 1, hücre 2</td>
  </tr>
  <tr>
    <td>Burası satır 2, hücre 1</td>
    <td>Burası satır 2, hücre 2</td>
  </tr>
</table>

Örnek kodlarımızda görüldüğü üzere tablomuzu <table> etiketi ile başlatıyoruz. Sayfa üzerinde tablomuzun sınırlarını görebilmek adına border parametresi ekleyip değerine de "1" atıyoruz ("0" değeri tablo sınırlarını görünmez yapacaktır). İlk satırımızı oluşturmak için <tr> etiketini yazdık, ardından 1. hücremizi oluşturmak için <td> etiketini yazıyoruz ve son açılan etiket ilk kapatılır kuralıyla ilk hücremizin <td> etiketini verilerimizi girdikten sonra </td> şeklinde kapatıyoruz. Bu satıra 2. bir hücre ekleyeceğimizden dolayı <tr> etiketini henüz kapatmadık. 2. hücre için de aynı işlemleri tekrarlıyoruz ve ilk satırımızı </tr> etiketi ile sonlandırıyoruz.
2. satırda da yapacağımız işlemler farksız; değişen tek şey hücreler içindeki veriler (resim, text, form vs.). Tüm satır ve sütun işlemlerimizi tamamladıktan sonra tablomuzun sorunsuz görüntülenmesi için </table> etiketi ile kodlarımızı sonlandırıyoruz.

Yukarıdaki kodları html sayfamızın <body> </body> etiketleri arasına koyduğumuzda aşağıdaki gibi bir görüntü elde edeceğiz:

Burası satır 1, hücre 1	Burası satır 1, hücre 2
Burası satır 2, hücre 1	Burası satır 2, hücre 2

Tablolar ve border özelliği

Eğer kodlarınızda border ile ilgili bir belirleme yapmazsanız doğrudan border "0" olarak kabul edilecek ve tablonuzun etrafında herhangi bir sınır çizgisi görünmeyecektir. Bu her ne kadar kullanışlı gözükse de çoğu zaman tablolarımızın etrafında border kullanmak isteriz.

Tablomuzun etrafında bir border kullanmak istiyorsak aşağıdaki şekilde border parametresini kullanmalıyız:

<table border="1">
  <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
  </tr>
</table>

Satır 1, Hücre 1

Satır 1, Hücre 2

Kodlarımızdaki border parametresini sildiğimizde önizlememiz aşağıdaki gibi olacaktır:

Satır 1, Hücre 1

Satır 1, Hücre 2

Tablolarda başlık kullanımı

Tablolardaki başlıkları <th> etiketi ile belirtiriz.

<table border="1">
  <tr>
    <th>Birinci başlık</th>
    <th>İkinci başlık</th>
  </tr>
  <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
  </tr>
  <tr>
    <td>Satır 2, Hücre 1</td>
    <td>Satır 2, Hücre 2</td>
  </tr>
</table>

Önizleme:

Birinci başlık	İkinci başlık
Satır 1, Hücre 1	Satır 1, Hücre 2
Satır 2, Hücre 1	Satır 2, Hücre 2

Tablolarda boş hücre kullanımı

Bazen hücrelerin içini boş bırakmamız gerekebilir, bu durumda;

<table border="1">
  <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
  </tr>
  <tr>
    <td>Satır 2, Hücre 1</td>
    <td></td>
  </tr>
</table>

Satır 1, Hücre 1	Satır 1, Hücre 2
Satır 2, Hücre 1

Yukarıdaki kod örneğinde olduğu gibi boş bıraktığımız hücrenin borderları görünmeyecektir (Fakat Mozilla Firefox borderları gösterir). Browserların farklı yorumlayarak tablomuzu değişik şekilde göstermesi durumunu engellemek için boş bıraktığımız hücredeki <td> </td> etiketi arasına ASCII kodlarda boşluk olarak geçen " " kodunu koymalıyız.
Son olarak kodlarımız şu şekli alır:

<table border="1">
  <tr>
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
  </tr>
  <tr>
    <td>Satır 2, Hücre 1</td>
    <td>&nbsp;</td>
  </tr>
</table>

Önizleme:

Satır 1, Hücre 1	Satır 1, Hücre 2
Satır 2, Hücre 1

Kötü browser yorumlarına karşı nadiren <thead>,<tbody> ve <tfoot> etiketleri de kullanılmaktadır. Bu etiketlere XHTML derslerinde yer vereceğiz.

Tablolar anlaşıldı mı asker!
Sağol!
5. derse kadar rahat!..

Katrasa.com üzerinde bulunan tüm yazılı ve görsel malzemenin telif hakları belirtilen isimlere aittir. İzinsiz kopyalamak, kullanmak, yayınlamak tehlikeli ve yasaktır. Hırsızların kalbi itinayla kırılır, eline verilir.

Eklenmesini istediğiniz içeriğiniz mi var? Makalelerde veya içerikte yazım hatası mı var? Uyarın beni! Yani bir mail atın.

İçerikten rahatsız mı oldun? O zaman sana Bay baay .