HTML Etiketleri ile Hazır Tablo Ekleme
Tablolar, web sayfalarında veriyi düzenli ve anlaşılır bir şekilde sunmak için kullanılan güçlü bir araçtır. HTML’de tablolar, <table> ve </table> etiketleri kullanılarak oluşturulur. Bu etiketler arasında, satırları tanımlayan <tr> ve hücreleri tanımlayan <td> etiketleri yer alır.
Tablo Oluşturma
Bir tablo oluşturmak için aşağıdaki adımları izleyin:
<table>etiketiyle tabloyu açın.- Her satır için bir
<tr>etiketi kullanın. - Her hücre için bir
<td>etiketi kullanın. </table>etiketiyle tabloyu kapatın.
Örneğin, aşağıdaki HTML kodu basit bir 2×2 tablo oluşturur:
“`html
| Hücre 1 | Hücre 2 |
| Hücre 3 | Hücre 4 |
“`
Tablo Özelliklerini Ayarlama
Tabloların görünümünü ve davranışını özelleştirmek için çeşitli özellikler kullanılabilir. Bu özellikler <table> etiketine eklenir.
Sınır: border özelliği tablonun sınırının kalınlığını piksel cinsinden belirler. Örneğin, border="1" 1 piksel kalınlığında bir sınır oluşturur.
Hücre Aralığı: cellspacing özelliği hücreler arasındaki boşluğu piksel cinsinden belirler. Örneğin, cellspacing="5" hücreler arasında 5 piksel boşluk oluşturur.
Hücre Dolgusu: cellpadding özelliği hücre içeriği ile hücre sınırları arasındaki boşluğu piksel cinsinden belirler. Örneğin, cellpadding="10" hücre içeriği ile sınırları arasında 10 piksel boşluk oluşturur.
Tablo Genişliği: width özelliği tablonun genişliğini piksel veya yüzde olarak belirler. Örneğin, width="500" tabloyu 500 piksel genişliğinde yapar.
Hücre Özelliklerini Ayarlama
Hücrelerin görünümünü ve davranışını özelleştirmek için çeşitli özellikler kullanılabilir. Bu özellikler <td> etiketine eklenir.
Hizalama: align özelliği hücre içeriğinin yatay hizalamasını belirler. Örneğin, align="center" hücre içeriğini yatay olarak ortalar.
Dikey Hizalama: valign özelliği hücre içeriğinin dikey hizalamasını belirler. Örneğin, valign="top" hücre içeriğini dikey olarak üste hizalar.
Arka Plan Rengi: bgcolor özelliği hücrenin arka plan rengini belirler. Örneğin, bgcolor="#FF0000" hücreye kırmızı bir arka plan rengi verir.
Gelişmiş Tablo Özellikleri
HTML, daha gelişmiş tablo özellikleri de sağlar.
Başlık Satırları: <thead> ve </thead> etiketleri tablo başlık satırlarını tanımlar. Başlık satırları genellikle kalın veya farklı bir arka plan rengine sahiptir.
Alt Bilgi Satırları: <tfoot> ve </tfoot> etiketleri tablo alt bilgi satırlarını tanımlar. Alt bilgi satırları genellikle tablo özetini veya toplamlarını içerir.
Kapsam: colspan ve rowspan özellikleri hücrelerin birden fazla sütun veya satırı kaplamasını sağlar. Örneğin, colspan="2" hücrenin iki sütunu kaplamasını sağlar.
Faydalı Kaynaklar
Sonuç
HTML etiketleri ile tablolar oluşturmak, web sayfalarında veriyi düzenli ve anlaşılır bir şekilde sunmanın etkili bir yoludur. Tabloların görünümünü ve davranışını özelleştirmek için çeşitli özellikler kullanılabilir. Bu özellikler, tabloların web sayfasının genel tasarımına ve işlevselliğine uymasını sağlar.