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İ
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tablolar / Tables</title> </head> <body> <hr /> <h2><em>" table,tr,td,th "</em> Örnek</h2> <table width="400" border="1"> <tr> <th>Başlık-1</th> <th>Başlık-2</th> <th>Başlık-3</th> </tr> <tr> <td>Satır-1,Sütun-1</td> <td>Satır-1,Sütun-2</td> <td>Satır-1,Sütun-3</td> </tr> <tr> <td>Satır-2,Sütun-1</td> <td>Satır-2,Sütun-2</td> <td>Satır-2,Sütun-3</td> </tr> <tr> <td>Satır-3,Sütun-1</td> <td>Satır-3,Sütun-2</td> <td>Satır-3,Sütun-3</td> </tr> </table> <br /> <hr /> </body> </html> |
Kod görüntüsü:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tablolar / Tables</title> </head> <body> <hr /> <h2><em>" caption, col, colgroup, thead, tbody, tfoot "</em> Örnek</h2> <table border="1" cellpadding="5"> <caption>İl Plaka Kodları</caption> <thead> <tr> <th>İl</th> <th>Plaka Kodu</th> </tr> </thead> <tbody> <tr> <td>Rize</td> <td>53</td> </tr> <tr> <td>Trabzon</td> <td>61</td> </tr> </tbody> <tfoot> <tr> <td>Türkiye</td> <td>81 İl</td> </tr> </tfoot> </table> <hr /> </body> </html> |
Kod görüntüsü:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tablolar / Tables</title> </head> <body> <hr /> <h2><em>" colspan, rowspan "</em> Örnek</h2> <table border="1" cellpadding="5" > <tr> <th rowspan="2">kod5 | eğitim, kodlama, paylaşım</th> <th colspan="3">kod5.org</th> </tr> <tr> <td>Avni Babaoğlu</td> <td>Rize - Ardeşen</td> <td>Trabzonspor</td> </tr> </table> <hr /> </body> </html> |
Kod görüntüsü:
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 !
