WTK207U-WEB TABANLI KODLAMA
Ünite 4: Tablo Yapılarının Oluşturulması
Giriş
Tablolar genellikle anlaşılırlığı desteklemek için verilerin satır ve sütün şeklinde gruplandırılarak sunulmasını sağlayan iki boyutlu yapılardır. Html’de tablo oluşturmak için belli başlı komutlar bulunmaktadır.
Her tabloda dört temel bileşen bulunmaktadır. Bunlar: Satır, sütun, hücre ve veridir. Satır (İng. row) tabloda soldan sağa yan yana geldiğinde bir birey, grup, nesne, lokasyon, şirket vb. anlamlı bir bütüne ait verileri içerir ve çeşitli özellikleri ile bu anlamlı bütünü (İng. entity) tanımlar. Sütun (İng. Column) ise bir satırdan diğer satıra değişebilecek tek bir özelliğe ilişkin verileri içerir. Her bir dikdörtgen kutucuk bir tablo hücresidir (İng. cell). Her hücrede ise veriler (İng. Data) bulunur
Tabloların Tanımlanması
Kitabınızın 82. sayfasındaki Şekil 4.2’de temel tablo komutlarının kullanımına bir örnek verilmiştir. Söz konusu tabloda kullanılan etiketler maddeler halinde şöyle açıklanabilir.
• <table style=”width:100%”> // 12. Satırda, web sayfasını enine (solda-sağa) tamamını kaplayacak (yüzde yüzünü) şekilde bir tablo oluşturuluyor. Burada “width:” işlevi ile genişlik bilgisi 100% olarak gönderiliyor. • <tr> …</tr> // Bu etiket table rows ifadesinin kısaltmasıdır ve tabloda bir satır oluşturur. 13. Satırda kullanılan <tr> etiketi ile tablonun ilk satırı açılıyor. • <td>Adı</td> // table data <td> etiketi daha önce <tr> ile açılan satırda bir hücre oluştur ve <td> ile </td> arasındaki veriyi ilgili hücreye yazar. • </tr> // 17. satırdaki etiket ile tablonun ilk satırı kapatılıyor. • <tr> // 18. satırdaki etiket ile tablonun ikinci satırı oluşturuluyor. • <td>Mikail</td> //19. satırdaki ifade ile ikinci satırın birinci hücresine “Mikail” verisi yazılıyor. • <td>Ceksin</td> // 20. satırdaki ifade ile ikinci satırın ikinci hücresine “Ceksin” verisi yazılıyor. • <td>82</td> // 21. satırdaki ifade ile ikinci satırın ikinci hücresine “82” verisi yazılıyor. • </tr> // 22. satırdaki etiket ile ikinci satır kapatılıyor. • </table> // 23. satırdaki ifade ile tablo kapatılıyor.
Tablolarda genellikle tablonun ilk satırı tablo başlığı olarak adlandırılır ve ilgili sütundaki verinin türü ve içeriği hakkında bilgi verir. Örneğin, “Vize Notu” ilk satırın son hücresinde yer almaktadır ve o sütunda sunulacak olan verinin her bir öğrenci için vize puanı olacağını belirtmektedir. Bu anlamda ilk satırdaki veri ilgili sütun için “sütun etiketi“ olarak nitelendirilebilir. İlgili sütundaki veriyi betimleme özelliği olduğundan dolayı tabloların ilk satırları diğer satırlarına göre farklı
yazılırlar. Bu durumu ifade etmek için html’de table headings <th> </th> etiketi kullanılmaktadır.
Şekil 4.2’deki örnekte tanımlanan tablonun ilk satırını tablo başlığı hâline getirmek için kitabınızın 83. Sayfasında bulunan Şekil 4.4’teki değişiklikleri gerçekleştirilmiştir. Bu değişikliklerden sonra kodlama çalıştırıldığında elde edilen ekran görüntüsü için lütfen kitabınızın 83. Sayfasındaki Şekil 4.5’i inceleyiniz.
Tabloların Stil Kullanılarak Biçimlendirilmesi
Tabloya başlık eklediğimizde otomatik olarak bir biçimlendirme ile başlığı ortalı ve koyu yapmaktadır. Bunun yanı sıra diğer hücrelerdeki veriler ise sola hizalanmıştır. Tablolarda daha önce öğrendiğiniz metin biçimlendirme etiketleriyle bu ve benzeri değişikleri yapabilirsiniz. Ancak tablo metinlerinin hizalamasının yapılmasının yanı sıra tabloların kendilerine özgü özellikleri olan tablo kenarlıkları ve kalınlığı, rengi, hücre yüksekliği gibi özelliklerin ayarlanması gerekir.
Web sayfalarında çoğunlukla birden çok tablo kullanılmaktadır. Bu nedenle bir web sayfasındaki tabloların standart bir biçimlendirmeye sahip olmasını gerekli kılan birkaç temel nedenden bahsedilebilir. Bunlar: Sayfanın yorumlanmasını tarayıcının inisiyatifine bırakmamak, kolay yönetilebilirlik ve algılamada kolaylık olarak bilinen tasarım ilkesi olarak sıralanabilir. Bildiğiniz üzere eğer aksi belirtilmezse tarayıcılar kendi ayarlanmış değerlerine göre web sayfalarının biçimlerini yorumlarlar/gösterirler. Web sayfasında bizim biçimlendirme kullandığımız yerler ile kullanmadığımız veya göz ardı ettiğimiz bölümler farklı biçimlerde görüntülenecektir. Oysa bütüncül algılama eğiliminde olan insan zihni için (Schunk, 2011) bu olumsuz bir durumdur ve bu durum zihnin algılamak için ekstra çaba harcanmasına neden olacaktır ve zihinde karmaşa hissi uyandıracaktır.
Benzer şekilde Gestalt kuramının benzerlik ilkesine göre insan benzer görüntüleri aynı algılar (Schunk, 2011) bu nedenle daha az bir çaba ile algılama-anlama süreci tamamlanır. Her tabloda farklı biçimlendirme seçenekleri kullanıldığında bu ilke ihlal edilmiş olacaktır, birey ilgili görüntünün tablo olduğunu algılamak için ekstra zihinsel çaba göstermek durumunda kalacaktır. Bunun yanı sıra bir tabloda biçimsel bir değişiklik yaptığınızda örneğin tablo kenarlık kalınlığını değiştirdiğinizde, ilgili satırlara giderek tek tek değişiklik yaparak bütün tablolara değişikliğin yansımasını sağlayabileceksiniz. Bütün bu olumsuzlukları ortadan kaldırmak için stil tanımlamalarını kullanarak bir tablo biçimlendirmesi elde ettiğinizde, bu ve benzeri olumsuzlukları ortadan kaldırmış olacaksınız.
Tablo Kenarlıklarının Oluşturulması
Kitabınızda 87. sayfada bulunan Şekil 4.7’de verilen örnek kodlamada 7. satırda başlayan <style> etiketi ile açılan ve 11. satırda </style> etiketi ile kapanan bölümde bundan sonra oluşturacağımız tabloların stillerin nasıl olacağını tanımlıyoruz. 8. satırda başlayan ve 10. satırda } işareti ile
biten tanımlama ile tablonun (table), tablo başlığının (th), ve hücrelerin etrafına kenarlık çizilmesi talimatı veriliyor.
Tablolarda Veri Yerleşimi
Tablolarda verilerin hücrelerin içine nasıl yerleşeceği ile ilgili üç temel özellikten bahsedebiliriz bunlardan birincisi hücre kenarlığı çizgileri arasındaki boşluk “border- spacing” ile, ikincisi hücre kenarlığı ile veri arasında bırakılacak olan boşluk “padding” ile, üçüncüsü verinin hizalanması (sola, sağa, ortalı) “text-align” ile belirtilir. Bu üç işlevi daha iyi anlamak için kitabınızın 87. sayfasında bulunan Şekil 4.11’de verilen örnek kodlamayı inceleyebilirsiniz.
Tablo Formatlarının Düzenlenmesi
Tablolar için stil tanımlaması yapılmasının temel nedeni tüm web sayfası boyunca aynı formatta tablo kullanarak bütünlüğü sağlamaktır. Ancak bazı durumlarda iki veya daha farklı formatta tablo kullanılması gerekebilir. Bu tür durumlar için “id attribute” özelliği sayesinde tablolara kimlik numarası verilerek istenilen tablolara farklı özelliklerin eklenmesi sağlanır. Normalde bir tablo için stil tanımlaması satırı açmak için “table {“ şeklinde başlayıp tanımlamalar gerçekleştiriliyordu, istediğimiz zaman çağırarak kullanabileceğimiz bir tablo özelliği eklemek istediğimizde “table” belirtiminden sonra “#” işareti ve bir etiket, örneğin “t01” belirtmemiz gerekmektedir. Konuyla ilgili olarak kitabınızda 89. sayfadaki Şekil 4.13’te verilen örneği inceleyebilirsiniz.
Tabloları birbirinden farklı şekilde biçimlendirirken çoğu zaman tablonun arka plan rengini değiştirmekten daha fazlasını yapmak isteriz. Örneğin, tablo başlıklarının vurgulamasının farklı olması ya da tablodaki tek veya çift numaralı satır renklerinin farklı olması bunlar arasında düşünülebilir. Bu amaçla hazırlanan kitabınızın 91. sayfasındaki Şekil 4.15’teki örnek kodlamayı inceleyebilirsiniz.
• table, th, td { // 8. satırda tablo, tablo başlığı ve hücreler için tanımlama açılıyor. • border: 1px solid black; // 9. satırda kenarlık tanımlanıyor. • border-collapse: collapse;// t10. satırda tablo tek kenarlığa düşürülüyor. • }// 11. satırda tanımlama kapatılıyor. • th, td { // 12. satırda tablo başlığı ve hücreler için tanımlama açılıyor. • padding-left:5px; // 13. satırda verilerin soldan 5 pixel boşluk bırakılarak yazılması sağlanıyor. • text-align:left; // 14. satırda verilerin sola hizalanmış olarak yazılması sağlanıyor. • } // 15. Satırda tanımlama kapatılıyor. • th { height:50px; // 16. satırda tablo başlığı için tanılama açılıyor ve tablo başlığı satırının yüksekliği 50 pixel olarak ayarlanıyor. • } // 17. satırda tanımlama kapatılıyor. • table#t01 { // 18. satırda “t01” ek özelliği için tanımla açılıyor.
• width: 100%; // 19. satırda tablo genişliğinin web sayfasının tamamını kaplaması sağlanıyor. • }// 20. satırda tanımlama kapatılıyor. • table#t01 th { // 21. satırda tablo başlığı için “t01” ek özelliği açılıyor. • background-color: black; // 22. satırda tablo başlığının arka plan rengi siyah olarak ayarlanıyor. • color:white; // 23. satırda yazı rengi beyaz olarak ayarlanıyor. • } // 24. satırda tanımlama kapatılıyor. • table#t01 tr:nth-child(odd) { // 25. satırda tablo satırı için “t01” ek özelliği açılıyor ve “odd” ifadesi ile tablonun tek numaralı (1. Satır, 3. Satır, 5. Satır, vb.) satırları için ek özellik tanımlanacağı belirtiliyor. • background-color: #9ACD32; // 26. satırda kodu verilen (sarı-yeşil) renk tek numaralı satırlar için arka plan rengi olarak ayarlanıyor. • } // 27. satırda tanımlama kapatılıyor. • table#t01 tr:nth-child(even) { // 28. satırda çift numaralı satırlarff için “t01” ek özelliği tanımlanıyor. • background-color: #F5DEB3; // 29. Satırda çift numaralı satırlar için arka plan rengi buğday rengi (İng. Wheat) olarak ayarlanıyor. • } // 30. satırda tanımlama kapatılıyor. • <body> bölümündeki her iki tabloya da ikişer satır daha eklenerek çalıştırıldığında Şekil 4.16’daki ekran görüntüsü elde edilir.
Tabloların Bölünmesi
Tabloları biçimlendirirken gereksinim duyulan başlıca konulardan birisi de tablo satır ve sütunlarının bölünmesidir. Bu amaçla iki önemli özellik kullanılmaktadır bunlar: colspan ve rowspan’dir. “colspan” sütunların bölünmesi için kullanılırken “rowspan” satırların bölünmesi için kullanılmaktadır. colspan’ın işlevini kavramak için kitabınızın 94. sayfasındaki Şekil 4.18’de verilen örnek kodlamayı inceleyelim. Şekil 4.18’de <body> …</body> bölümünde tablo yapısı oluşturulurken bir sütunun ikiye bölünmesi işlemi gerçekleştirilmiştir. İlgili bölüm aşağıda açıklanmıştır.
• <table style=”width:100%”> // 18. satırda web sayfasının tamamını enine kaplayacak tablo tanımlanıyor. • <caption>Tablo 1. Kişisel Bilgiler</caption> // 19. satırda tablo başlığı tanımlanıyor. • <tr> // 20. satırda tabloya satır ekleniyor. • <th>Adı Soyadı</th> // 21. satırda tablonun birinci satırı tablo başlığı olarak tanımlanıyor ve ilk hücreye “Adı Soyadı” verisi giriliyor. • <th colspan=”2”>Telefon Numarası</th> // 22. satırda ilk satır ikinci hücreye “Telefon Numarası
verisi giriliyor ve Telefon numarası ile başlayan sütun iki sütuna bölünüyor. • </tr> // 23. satırda tablonun ilk satırı kapatılıyor. • <tr> // 24. satırda tablonun ikinci satırı açılıyor. • <td>Danyal Kırek</td> 25. satırda tablonun ikinci satır ilk hücresine “Danyal Kırek” verisi giriliyor. • <td>888 00 001</td> // 26. satırda tablonun ikinci satır ikinci hücresine “888 00 001” verisi giriliyor. • <td>777 00 002</td> // 27. satırda tablonun ikinci satır üçüncü hücresine “777 00 002” verisi giriliyor. • </tr> // 28. satırda tablonun ikinci satırı kapatılıyor. • </table> // 29. satırda tablo kapatılıyor
Tablolarda rowspan işlevini kullanarak satırların nasıl bölündüğünü kavramak için ise kitabınızın 95. sayfasındaki Şekil 4.20’de verilen örnek kodlamayı inceleyelim. Şekil 4.20’de <body>…</body> bölümünde tablo yapısı oluşturulurken bir satırın ikiye bölünmesi işlemi gerçekleştirilmiştir. Aşağıda ilgili bölüm açıklanmıştır.
• <table style=”width:100%”> // 19. satırda web sayfasının tamamını enine kaplayacak tablo tanımlanıyor. • <caption>Tablo 1. Kişisel Bilgiler</caption> // 20. satırda tablo başlığı tanımlanıyor. • <tr> // 21. satırda tabloya satır ekleniyor. • <th>Adı Soyadı</th> // 22. satırda tablonun ilk satır ilk hücresi tablo başlığı olarak tanımlanıyor ve içine “Adı Soyadı” verisi giriliyor. • <td>Danyal Kırek</td> // 23. satırda tablonun ilk satırı ikinci hücresine “Danyal Kırek” verisi giriliyor. • </tr> // 24. satırda tablonun ilk satırı kapatılıyor. • <tr> // 25. satırda tablonun ikinci satırı açılıyor. • <th rowspan=”2”>Telefon Numarası</th> // 26. satırda tablonun ikinci satırı ilk hücresi tablo başlığı olarak tanımlanıyor ve bir sonraki hücrenin iki satıra bölünmesini sağlıyor • <td>888 00 001</td> // 27. satırda ikinci satır ikinci hücrede bölünen ilk hücre “888 00 001” verisi giriliyor. • </tr> // 28. satırda tablo satırı kapatılıyor. • <tr> // 29. satırda tablo satırı açılıyor. • <td>777 00 002</td> // 30. satırda tablonun 3. satırının ilk hücresi olan daha önceden bölünen ikinci hücreye “777 00 002” verisi giriliyor. • </tr> // 31. satırda tablo satırı kapatılıyor. • </table> // 32. satırda tablo kapatılıyor.