Project Zeta – HTML 11 – Table Etiketi & Kullanımı

Merhaba;

HTML Eğitimlerimizedevam ediyoruz. Bu yazımda <table></table> etiketinden bahsedeceğim.

Table HTML üzerinde toplu halde verilerinizi tablolar halinde bir veri kümesi şeklinde göstermek için kullanabileceğiniz bir etikettir.

WebMatrix’i açalım ve aşağıdaki kodlamayı yapalım.

Temel Kullanım

Nasıl göründüğüne bir bakalım sonrada etiketleri inceleyelim.

Bir tablo yaratabilmek için öncelikle <table> </table> etiketleri belirtilmelidir.

Tablo boyutunu belirtmek için width ve height özelliklerine değerler verilebilir. Eğer hiç bir değer girilmez ise otomatik boyutlandırma yapacaktır.

100% ifadesi tarayıcı boyutu o an için ne kadarsa tamamını kapsasın anlamındadır. 50% yaparak deneyebilirsiniz. Tarayıcının ekran boyunun yarısında tablonuzun oluştuğunu görürsünüz.

Tablolar bildiğiniz gibi satır ve sütunlardan oluşur. Her tablonun her bir satır değeri yani rows <tr></tr> etiketleri ile oluşur. Arasına girilen <th> başlık <td> veri değerleri ile de sütunları oluşturulur.

Her kolona girilecek değerin bir Header başlık değerine göre girileceğini varsayabiliriz. Böyle olmayadabilir bir kural değildir.

Tablo ana başlıkları yani bizim burada girdiğimiz Ad Soyad Yaş alanları <th></th> etiketleri ile belirtilir. Her alan için bir th etiketi kullanılır. <th> etiketi ile belirttiğimizde daha kalın ve vurgulu gözükecektir.

Daha sonrada her veri girilecek satır için <td> </td> etiketleri kullanılır. Aklımıza şöyle bir soru gelebilir. 3 tane th etiketi ile header oluşturup 4 tane td değeri girsek ne olur? Bakalım.

Boş bir Header alanını otomatik olarak oluşturdu gördüğümüz gibi.

<td> etiketleri tablonun veri blogu olduğu için içine sadece metinsel ifade değil diğer tüm HTML öğlerini alabilir. Bir resim link vs hepsini bir değer olarak girebiliriz.

Tabloya Kenarlık Ekleme

Bu haliyle istediğimiz bir tablo yapısında görünmediğini düşünebiliriz. Bu tablonun sınırlarını belirlemek isteyebiliriz. Bunun için style özelliğinin border değerlerini girmemiz gerekecekti.

Sadece Table etiketine uyguladığımız için sadece tablonun sınırlarını çizmiş oldu. Bunu şimdi tüm etiketlere uygulayalım.

<tr> etiketlerine uygulamayınız herhangi bir etki yapmayacaktır.

Daraltılmış Sınırlar Oluşturma

Bu haliyle çok göze hoş gelen bir tarafı olmadı gibi. Profesyonel durmuyor. Çünkü her hücre diğer hücrelerden belirli piksel değerleri ile ayrılmış durumda. Bu durumdan kurtulmak için  style değeri  border-collapse : collapse yapmamız gerekecek.

İşte şimdi biraz daha göze hoş gelebilecek duruma geldi.

Hücre Dolgusu Ekleme (Padding)

Padding değeri hücrelere girilen değerlere içten boşluk vermek için kullanılır. Tabi Padding değeri sadece tabloda hücreler için kullanılan bir özellik değil. Tüm HTML içinde kullanılabilir.

Padding değerleri Style özelliğine aittir.

padding-top: 5px;

paddig-right: 5px;

padding-bottom: 5px;

padding-left: 5px;

yada

padding auto;

şeklinde ifade edilebilir.

Bununla birlikte tüm padding değeleri tek satırda girilebilir.

padding: 5px 10px 5px 10px;

Burada şunu aklınızda bulundurmanızda fayda var. Padding değerleri top(üst) noktadan başlar ve saat yönünde devam eder. 

Tek kullanımda 

padding: 5px; yazar iseniz bu tüm alanların 5px doldurulacağı anlamına gelir.

Şimdi deneyelim.

Padding değerlerini artırıp azaltarak tam olarak yaptığı etkiyi test edebilirsiniz.

İçerik Konumlandırma

Varsayılan olarak tablo başlıkları kalın ve ortalanmıştır. Tablo başlıkları dahil tüm hücre değerlerini istediğimiz gibi konumlandırabiliriz. style özelliğinin text-align değerini değiştirerek bunu yapabiliriz.

Başlıkları sağa yaslayalım. İçeriği de ortalayalım.

Birden Fazla Sütuna Sahip Kolonlar Oluşturma

Örneğin bir kişinin telefon numarası bilgisini alacaksınız hem evi hem cep telefonu numarasını ayrı ayrı başlıklar altında belirtmeden almak istiyorsunuz bunu nasıl yapacağız. Yani tek kolona iki hücre veya daha fazla sütun nasıl oluşturulur.

Bunu yapabilmek için colspan özelliğini kullancağız. Hangi başlık değerinin kaç hücreye ait olacağını belirtmek için 

<th colspan=2> </th> bu ifadeyi kullanacağız. 2 değeri yerine hücre sayısı kaç taneyse bunu yazıyoruz.

Birden Fazla Kolona Sahip Sütunlar Oluşturma

Yukarıda verdiğimiz örnekte başlık kolonlarını sol tarafta gösterseydik ve veriler sağ tarafa doğru giriliyor olsaydı. Bu sefer tek sütunun birden fazla kolonu oluşmuş olacaktı. 

Burada farklı bir durumu daha öğrenmiş olacağız. Başlık değerleri sadece en başta değil veriler girilirken her kolondan öncede girilebilir. <th> etiketinin kalın ve ortalı değer oluşturmaktan başka <td> etiketinden ayıran bir özelliği yoktur.

Başlıkta belirttiğimiz durumu gerçekleştirebilmek içinde rows özelliğini kullanacağız. 

Hangi hücrenin yanında kaç hücre değeri olacaksa o hücrenin etiketi içersine rows=x; diye değerini vereceğiz.

Tabloya Başlık Ekleme 

Bazen raporlama örneklerinde tabloların ne ile ilgili olduğunu anlatabilmek için başlık koymaya ihtiyaç duyabiliriz.

Bunu yapabilmek için <caption></caption> etiketini kullanacağız.

Caption değerini hemen <table> etiketinin altına yazmalıyız.

Tabloları Biçimlendirme

Tabloda hücreleri istediğimiz gibi biçimlendirebiliriz. Örneğin her hücre değerini farklı renge boyayabiliriz. İçerikteki yazıların rengini değiştirebiliriz.

<table> etiketine dair neredeyse tüm özellikleri öğrenmiş olduk. 

Yorumlarınızı eksik etmeyiniz. Bir sonraki yazımda görüşmek üzere.


muratbilginer