İnternet sitemizi oluşturacağımız zaman yer yer bazı yerlerde tablo kullanmak, ziyaretçilere göstereceğimiz kısmı tablolar ile anlatmak en uygunu olacaktır. Bunun için ise HTML5 tablo etiketlerine ihtiyaç duymaktayız. Sadece basit bir tablo oluşturmak yerine göze hoş gelen internet siteniz ile uyumlu görünürde oluşturmak yaptığınız işin göze daha güzel gelmesine hitap edecektir.
HTML5 tablo oluşturma işlemini gerçekleştirmek için ise zaten hali hazırda bildiğimiz <table> etiketinden yararlanmaktayız. Aşağıda yer alan HTML tablo uygulamaları sayesinde HTML kodları ile oluşturduğunuz internet sitenizde istediğiniz şekilde bir tablo oluşturabilecek, tablonun içini ve dış görünümünü istediğiniz şekilde düzenleyebileceksiniz.
HTML5 Tablo Nasıl Oluşturulur ?
İş tamamıyla tablo oluşturup kaydedip kapatmakla bitmiyor. Biz bir internet sitesi yapacak isek her bir etiketin her bir özelliğini bilerek en doğru ve ne güzel bir çalışmayı yapmamız gerekmektedir. Baştan sağma kodlar, yarım yamalak işler yapmamalıyız. Bunun için ise normal tablo oluşturma kodlarından başlayıp aşağıda kendinizi geliştireceğiniz, tabloya dair yeni bilgiler öğreneceğiniz etiketler ile karşılaşacaksınız. HTML hazır tablo kodlarına bakar iken lütfen sizlerde kendiniz Notepad++ uygulamasını açarak deneyip kendinizi pekiştirin.
[accordion] [accordion_content title=”HTML Tablo Etiketleri” icon=”” active=”active”]Bir HTML sayfasında tablo oluşturabilmek için ise bir <table> etiketine ihtiyacımız vardır. Table etiketi tablonun başını ve sonunu belirtir. Table etiketi içine yazılacak her <tr> etiketi ise tabloya bir satır ekler. <tr> etiketinin içine yazılacak olan her <td> etiketi ise tabloya bir sütün ekleme işlemini gerçekleştirmektedir. Temel olarak tablo oluşturmak için ise :
<table> <tr><th>Sıra Numarası</th> <th>İsmi</th></tr> <tr><td>01</td> <td>Gökmen</td></tr> </table>
şeklinde oluşturulur. Yukarıda kullanmış olduğumuz <th> etiketi ise tablonun başlığı anlamında bizleri karşılamaktadır. Yazmış olduğumuz “Sıra Numarası” ve “İsmi” kısımları sütünün başlığını oluşturup diğer yazılara göre daha kalın bir şekilde karşımıza gelip başlık olduklarını belli edeceklerdir.[/accordion_content][accordion_content title=”HTML CSS Tablo Stilleri” icon=”” active=”active”]Tablonun daha güzel görünüme kavuşmasını istiyor isek bir bakıma yaptığımızda tabloya öznitelikler ekleyebiliriz. En basitinden oluşturmuş olduğumuz tablonun ekranda istediğimiz değerde yada tam ekranı kaplamasını istiyor isek ekleyeceğimiz öznitelik :
<table style="width:100%">
etiketi ile sağlanacaktır. Fakat biz sadece tablonun boyutunu ayarlamak yerine <head> kısmı içine açacağımız <style> etiketi sayesinde bir çok farklı öznitelik ekleyebilmek mümkün.
<style>
table th,td { border: 1px solid black; padding: 20px; border-spacing: 10px; }
td { text-align: center }
</style>gibi zaten önce ki derslerden de aşina olduğunuz CSS etiketlerini kullanabilirsiniz. Burada sanırım değinmediğimiz bir tek border-spacing özelliği var onunda anlamı tabloya border etiketi sayesinde eklemiş olduğumuz çerçevenin bir birine uzaklığını belirlemektedir. Bu ve bunun gibi bir çok öznitelik etiketleri dersler ilerledikçe anlayacak artık kafanızda şekillendirebileceğiniz tabloyu bilgisayar ortamına aktarabileceksiniz.[/accordion_content][accordion_content title=”HTML Satır Birleştirme” icon=”” active=”active”]Oluşturduğumuz tablolar bazen farklı şekillerde değişik şekillere hatta ve hatta bir başlık birden fazla yere sahip olup o başlık altına birden fazla kısım yazılabilir. Aşağıda yer alan rowspan etiketi sayesinde istediğiniz kadar satır birleştirme işlemini gerçekleştirebilirsiniz. Rowspan etiketinin kullanımını pekiştirmek için ise aşağıda yer alan kodları kendiniz deneyerek daha iyi pekiştirebilirsiniz.
<table> <tr><th>İsmi</th><td>Gökmen</td></tr> <tr><th rowspan="2">Sosyal Medya</th><td>Instagram</td></tr> <tr><td>Facebook</td></tr> <table>
Yukarıda yer alan rowspan etiketi sayesinde üst üste iki satır birleştirme işlemini gerçekleştirmiş bulunuyoruz. İkinci satırda kullanmış olduğumuz rowspan etiketi üçüncü satırı direkt olarak kendine birleştirdiği için ise tablomuz toplamda 2 sütundan oluştuğu için dördüncü satırda bir tane <td> etiketi kullanmaya hakkımız oluyor. Dördünü satırın ilk etiketi otomatik olarak Sosyal Medya yazısı ile dolu olduğundan dolayı <td> etiketi içine yazdığımız bir şey otomatik olarak dördüncü satırda ikinci sütunda yerini almaktadır.[/accordion_content][accordion_content title=”HTML Sütun Birleştirme” icon=”” active=”active”]Nasıl satırları alt alta birleştirme işlemini gerçekleştiriyor isek yan yan sütunları birleştirme işlemini de gerçekleştirebiliriz. Oluşturacağınız tabloda eğer bir sütunun altına gelecek yazılar birden fazla yer kaplayacağını düşünüyor iseniz colspan etiketini kullanarak sütun birleştirme işlemini gerçekleştirebilirsiniz. Yinede colspan etiketini pekiştirmek adına aşağıda yer alan kodları kendi bilgisayarınız üzerinde alıp biraz kurcalayıp farklı farklı yerlere koyup denemeniz gerekmektedir.
<table> <tr><th colspan="2">Adınız ve Soyadınız</th><th>Numaranız</th></tr> <tr><td>Gökmen</td><td>Efsun</td><td>01</td></tr> </table>
Yukarıda ilk satırda <th> etiketine eklediğimiz colspan etiketi sayesinde iki sütünü birleştirmiş bulunuyoruz. İlk satıra ikinci bir başlık ekledikten sonrasında ise toplamda bizim artık ikinci satıra yazmamız için üç tane sütunumuz olmuş bulunmaktadır. Bu yüzden ikinci satır etiketinin içine üç tane <td> etiketi açabiliriz. İlk iki açtığımız <td> etiketleri Adınız ve Soyadınız yazılı olan kısmın altına gelecektir.[/accordion_content] [/accordion]
Yukarıda yer alan akordiyon menü sayesinde HTML tablo oluşturma ile ilgili detaylı bilgiler edinebilirsiniz. Hepsinden de önemlisi bunları okuyup geçmekle değil kendinizde denemeniz gerekmektedir. Yukarıda yer alan HTML tablo örneklerinden yararlanabilir, öğrenmiş olduğunuz bilgiler üzerine kendiniz bir şeyler katabilirsiniz.