HTML Web

HTML5 Tablo (Table)

HTML’de tablolar 2002 yılına kadar sıkça kullanılan bir tasarım ögesi idi.  Fakat 2002 yılından sonra tablosuz web tasarım mantığı devreye girerek, mümkün olduğu kadar tablo kullanılmamaya ve bunun yanında CSS (Cascading Style Sheets-Bundan yazılarda hiç bahsetmedim. Fakat kısaca bir tanım gerekirse; bir nevi web tasarımının fonksiyon yapısıdır. Kolaylık ve daha farklı özelliklerle tasarım yapabilmemizi sağlar) ile pratik yöntemler işlenmeye başlandı, tavsiye edildi ve desteklendi. Aslından bu yöntem bir yandan da <div></div> mantığının yerleştirilmesidir.

Fakat her ne kadar tablosuz tasarım mantığı yerleşse de tablolar hala tercih edilmekte, yer yer kullanılması gerekmektedir.

1- TABLO KULLANIMI VE ÖZELLİKLERİ

 

tablolar-liste

 

 

Yukarıdaki resimde HTML5 ile tablo oluşturmak için ihtiyaç duyulan özellikler gösterilmiştir. Şimdi yapacağımız örnekler ile bunların kullanımını ifade etmeye çalışacağım.

 

1.1.Tablo oluşturma, satır, sütun ve tablo başlığı kullanımı (Temel seviye tablo)

Tabloyu oluşturmak, satır(row) tanımını yapmak, sütun (column) tanımını yapmak ve tablonun satır-sütun başlıklarını ana esasta belirlemek için iç içe ve ve sırayla olmak üzere kodlama yapmak durumundayız. Daha genel bir ifade ile bu şekilde tasarlanan bir tablo, temel tablo yapısını gösterir.

Satır için; <tr></tr>, sütun için; <td></td> ve başlık için; <th></th> etiketlerini kullanmak durumundayız.

 

Örnek.1:

 

Kod görüntüsü:

 

tablolar-temel-tasarım

 

 

1.2.İleri seviye tablo tasarımı ve kullanımı

Temel tablo tasarımının aksine daha kapsamlı ifadeler ve tablo öğelerini gruplayıcı özelliklere sahip kullanımı vardır. Yani tablonun başlığı(caption), üst kısmı (thead), gövdesi (tbody) ve alt kısmı(tfoot) olmak üzere düzenleme etiketleri vardır.

Örnek.2:

 

 

Kod görüntüsü:

 

tablolar-colgroup

 

 

1.3. Satır içi ve sütun içi tablo düzenlemeleri

 

Tabloda satır(lar) ve sütun(lar) içerisinde birleştirme,  ayırma, şekillendirme vb. işlemleri uygulayabilmek için kullanılabilen özellikler vardır.

Sütun için; <colspan></colspan>, satır için; <rowspan></rowspan> etiketleri kullanılır.

 

Örnek.3: 

 

 

Kod görüntüsü:

 

2016-02-07 19-18-04 Tablolar Tables - Opera

 

 

Temel ve geçerli düzeyde HTML5 için tablo tasarım mantığı böyle işlemektedir. Daha gelişmiş ve güzel tasarım oluşturmak geliştiriciye kalmıştır.

Bunun yanında tasarımların çeşitlendirilmesi hususu önemlidir. Umuyorum ki yazılarımız bir faydalı oluyordur.
Bir sonraki derste görüşmek üzere, selamet ile !


HTML 5 Müfredatı

  1. HTML5 Nedir ?
  2. HTM5 – Temel Etiketler ve Özel Karakterler
  3. Metin Biçimlendirme(Text Formatting)
  4. Bağlantı (Link) Yapısı
  5. Tablo (Table) Kullanımı
  6. Liste(Lists) Kullanımı
  7. Form Nesneleri ve Kullanımı ~ 1
  8. Form Nesneleri ve Kullanımı ~ 2
  9. Audio Kullanımı
  10. Video Kullanımı
Rize/Ardeşen doğumlu.
Karadeniz Teknik Üniversitesi, İstatistik ve Bilgisayar Bilimleri mezunu.

.NET teknolojileri alanında ihtisas yapma amacında.
İstatistik ve nevi ilimleri sevmekte, fırsat bulduğunda üzerine çalışmayı amaçlamakta.

Özel bir şirkette web ve yazılım geliştirici olarak çalışmaktadır.