HTML Dersleri 6 Tablolar

TABLOLAR

Bu dersimizde “tablolar” konusuna giriş yapacağız. Temel etiketlerini öğrendikten sonra çok basit örnekler ile tabloları kavrayacağız. Tablolar, Microsoft Excel programdakine benzer bir şekilde hücrelerden oluşan ögelerdir. HTML dilinde tablolar sadece bilgilerin sunumu için değil, aynı zamanda web tasarımında da kullanılır. Çünkü HTML dilinde bir web sayfasının istediğiniz bir koordinatına istediğiniz bir ögeyi yerleştirmek genellikle zor ve zahmetlidir. Bu durumda imdadımıza tablolar yetişir. Sayfanın tamamını kaplayacak şekilde ve kenarları görünmez bir tablo oluşturarak bu tabloda istediğiniz bir hücreye resim, yazı vb. ögelerinizi istediğiniz pozisyonda konumlandırabilirsiniz.

Tablolar <table> etiketi kullanılarak oluşturulur. <table> elemanının içinde tablo satırları <tr> etiketi ile oluşturulur. Her bir <tr> satırı içinde de <td> etiketi ile hücreler oluşturulur. “tr” ifadesi İngilizce’ de “table row” (tablo satırı) ve “td” ifadesi ise “table data” (tablo verisi) kelimelerinin kısaltmasıdır.

border” parametresi ise tablonun kenarlık kalınlığını belirlemeyi sağlar.

ÖRNEK :

Örnek çalıştırıldığında şöyle bir çıktı oluşur.

Görüldüğü gibi tablo oluşturmak oldukça kolay.

TABLOLARDA BAŞLIKLAR

Başlıklar <th> etiketi ile belirtilir. Tablolarda <th> (table-header) tablo başlığı etiketi ile sütun başlığı oluşturduğumuzda, ilgili hücredeki metin kalın ve ortalanmış şekilde görüntülenir. <th> etiketini kullanmak zorunlu değildir. Kullanıldığında tablonun okunabilirliği artar.

Aşağıdaki örneği inceleyelim…

Çıktısına bakalım…

3×3’lük bir tablo oluşturduk ve bunların ilk satırına hücre başlıkları verdik.

TABLOLARDA KENAR BOŞLUKLARI TANIMLAMAK

Tabloda hücreler arası boşluklar iki farklı terim ile ifade edilir. Bunlar cellpadding  ve cellspacing nitelikleridir. Cellspacing hücrenin iç çerçevesi ile tablonun dış çerçevesi arasındaki mesafeyi ifade eder. Cellpadding ise hücre içindeki metin ile hücrenin iç duvarı arasındaki mesafeyi ifade eder.

Bu ifadeler aşağıdaki görselde ifade edilmiştir.

ÖRNEK :

Çıktısı şu şekildedir:

TABLOLARDA SATIR VE SÜTUNLARI BİRLEŞTİRMEK

Microsoft Excel programında olduğu gibi HTML tablolarında da hücreleri birleştirebiliriz. Eğer aynı satırdaki iki veya daha fazla sayıdaki komşu hücreyi birleştirmek isterseniz colspan, farklı satırlarda fakat aynı sütunda bulunan hücreleri birleştirmek isterseniz rowspan niteliğini kullanabilirsiniz.

Bu ifadeler aşağıdaki görselde ifade edilmiştir.

Colspan ve rowspan niteliklerine parametre olarak verdiğimiz adet kadar hücre birleştirilmiş olur. Hücre birleştirme sonrasında <tr> ve <td> etiketlerinin sayısına dikkat etmek gereklidir. Örneğin aynı satırdaki 3 komşu hücre colspan=”3” ifadesi ile birleştirilmiş ise o satırda artık Bir adet <td>…</td> ifadesi (td colspan=”3”>…</td>) şeklinde bulunmalıdır.

Aşağıdaki örnekte bunu daha detaylı görebilirsiniz:

Şimdi de çıktımıza bakalım.

Örneğimizde rowspan niteliği ile aynı sütun fakat farklı satırlarda bulunan satır 1 hücre 1 ile satır 2 hücre 1 birleştirilmiştir. Colspan  niteliği ile aynı satırdaki  3 hücre diğer bir ifadeyle satır 3 hücre 1, hücre 2 ve hücre 3 birleştirilmiştir.

TABLOLARDA KONU BAŞLIKLARI, BAŞLIK GRUPLANDIRMA VE BİÇİMLENDİRME

<thead> tablomuzdaki konu başlıklarının yer aldığı <th> etiketlerini kapsar. <tbody> tablodaki asıl içeriği belirtir. <tfoot> tablonun içeriklerinin hesaplanıp özetlendiği son satırını oluşturur. <col>, column yani sütun kelimesinin kısaltmasıdır. Tablodaki sütunlara stil vermek için kullanılır. Birden fazla sütuna stil vermek içinse <colgroup> etiketini kullanmalıyız. <caption> etiketi ile tablonun açıklamasını ya da tanımlamasını yazabiliriz.

Aşağıdaki örnekte tüm bu açıklamaları daha detaylı görebilirsiniz.

Bu tablonun ekran görüntüsü ise şu şekilde olacaktır:

TABLOLARDA ARKAPLAN RENKLERİ

Tablolara arkaplan rengi uygulamak için bgcolor niteliği kullanılır. Bu nitelik;

  1. Tek bir <td>…</td> hücresine veya,
  2. Bir satırın tamamına yani <tr>…</tr> ifadelerine veya,
  3. Tablonun tamamına yani <table>…</table> etiketlerine,

tanımlanabilir. Tablonun kenarlık rengini değiştirmek için ise bordercolor niteliği kullanılabilir.

ÖRNEK:

Çıktımıza bakalım:

TABLOLARDA GENİŞLİK VE YÜKSEKLİK

Tablolarda uzunluk ve yükseklik belirlemek için width  ve height  nitelikleri kullanılır. Bu nitelikler hem tablo, hem satır, hem de hücreler için tanımlanabilir. Eğer sadece bir hücrenin boyutları değiştirilecekse <td> etiketine, eğer sadece satır boyutları değiştirilecekse <tr> etiketine, eğer tablonun tamamında geçerli olacaksa <table> etiketine uzunluk ve genişlik tanımlanabilir.  Bu değerler tamsayı olabileceği gibi %10 gibi oransal değerler de olabilir.

ÖRNEK:

Çıktımıza bakalım:

Buraya kadar öğrendiğimiz table etiketlerini bir arada aşağıdaki tabloda görebilirsiniz.

ELEMENT AÇIKLAMA
<table> Tablo
<th> Tablo Başlığı
<tr> Satır
<td> Hücre
<caption> Manşet
<colgroup> Hücre Grubu
<col> Sütun Genişliği
<thead> Başlık Grubu
<tbody> Tablo İçeriği
<tfoot> Tablonun Sonuç Bölümü

 

Bu dersimizde tablolar konusuna değindim. Umarım faydalı bir eğitim olmuştur. Bir sonraki dersimizde artık genelde kullanılmamasına rağmen Çerçeveler (frames) konusunu işleyeceğiz. Eskiden web sayfaları bu şekilde çerçeveler oluşturularak yapılıyordu. Çerçeveler artık kullanılmıyor ama yine de bilmemizde fayda var diye düşünüyorum. Bir sonraki dersimizde görüşmek üzere…

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

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