İleride değineceğimiz div kullanımına kadar HTML yazımlarda en çok başvurulan etiketler tablo etiketleri idi. Tablo etiketleri ile bir sayfayı dilediğiniz gibi bölümleyebilmeniz mümkün. Bu öyle bir kolaylık ki, tasarımın iskeletini oluşturan ögenin tablolar olduğunu dahi söyleyebiliriz. Tabii bu düne kadar olan gerçek. Ancak asıl gerçek, özellikle tarayıcı rekabetlerinin mantık dışı olumsuz etkileri arasında tablo etiketlerinin çoğu zaman uyumluluk kurtarıcısı olarak çıkması. Tablo etiketleri ile başlangıç anlatımlarımız devam ediyor.

Tablolar

table Tablo etiketi bir çok niteleyici ile birlikte ya da ham olarak kulanılabilir. Tablo etiketi içinde ayrıca sütun, satır, gövde, başlık, bitiş gibi etiketleri de barındırabilir. Standart olarak bir tablo etiketi satır ve sütun etiketleriyle kullanılır. Tablo etiketi <table> ile başlar, diğer açma ve kapama etiketlerinden sonra </table> ile biter. Bir tablonun içeriğine ait tüm veri ve etiketler <table>Burada</table> bulunmalıdır. Table etiketi bazı niteleyiciler kullanabilir.

tr (Table Row) Bir tablonun içindeki satırı ifade eder. Tek başına kullanılamaz. Kendisinden evvel table başlatma etiketine ihtiyaç duyar. Bazı niteleyiciler beraber ya da ham olarak kullanabilir.

td (Table Cell ?) Bir tabloda web sayfası üzerinden gösterilecek verilerin girildiği alandır. Tablonun hücrelerini oluşturur. Tek başına kullanılamaz, kendisinden evvel tr başlatma etiketine ihtiyaç duyar. Bazı niteleyicilerle beraber ya da ham olarak kullanılabilir.

Bir tabloyu oluşturan bu 3 etikete bakarsak kullanımını denemekte fayda olacaktır. Bir tablo oluşturabilmek için table, tr ve td etiketlerini içiçe kullanmamız gerekir. Tabloyu oluşturan ana etiketimiz table olup 1 tablo için 1 table açma ve kapama etiketi olacaktır. Ancak tablomuzda dilediğimiz kadar satır için tr etiketi ve bu satırların içinde dilediğimiz kadar yatay hücre için td etiketi kullanabiliriz. Hiyerarşik düzene ise dikkat etmemiz gerekir. Aşağıda tek satır ve hücre içeren bir tablo görüyorsunuz.

<table><!--Tablomuz başlıyor-->
        <tr><!--Tablomuzun satırını açtık-->
            <td><p>Bu da hücremizde görünecek yazı olsun</p></td>
<!--Bu araya not düşebilirsiniz-->
        </tr><!--Artık satırımızı da kapatabiliriz-->
</table><!--ve tablomuzu kapatma etiketiyle tamamlayabiliriz.-->

Bu tabloyu siz de kendi index.html dosyanızda deneyin. 2 satırlı bir tablo oluşturmak için ise izleyeceğimiz yol ilk satırı kapadıktan sonra 2. satırı açıp gerekli düzenlemeyi yapmak olacak. Örneğe bakalım:

<table><!--Tablomuz başlıyor-->
       <tr><!--1. satırı açtık-->
           <td><p>Bu da hücremizde görünecek yazı olsun</p></td>
           <!--ilk satırdaki hücreye verimizi girip kapadık-->
       </tr><!--1. satırı kapattık-->
       <tr><!--2. satırı açtık-->
           <td><p>Artık tablo yapmak çok kolay</p></td>
           <!--2. satırın hücresini de hallettik-->
       </tr><!--2. satırı kapattık-->
</table><!--2 satırlı 2 hücreli tablomuz burada biter-->

Bu tabloyu da deneyin ve tablo oluşturmada son temel yöntemi de görerek tablo konumuzu şimdilik kapatalım. Yapacağımız şey 2 satıra 2 sütun yani 4 hücreli bir tablo oluşturmak. Bunun için her satıra 2 hücre gireceğiz. Bir hücre açılıp kapatılacak, yanına bir hücre daha açılıp kapatılacak…yöntem bu. Buyrun:

<table><!--Tablomuz başlıyor-->
       <tr><!--1. satırı açtık-->
           <td><p>1. satırın 1. Hücresi</p></td>
           <td><p>1. satırın 2. Hücresi</p></td>
       </tr><!--1. satırı kapattık-->
       <tr><!--2. satırı açtık-->
           <td><p>2. satırın <br />1. Hücresi</p></td>
           <td><p>2. satırın <br />2. Hücresi</p></td>
       </tr><!--2. tablo satırında br etiketini de kullandık-->
</table><!--2 satırlı 4 hücreli tablomuz burada biter-->

Bu son örneğimizi de birkaç kez tekrar edip daha fazla satır-sütun ilişkisinde tablolar oluşturabilirsiniz. Tablolar hakkında detaylı anlatımlara ileriki yazılarda yer vereceğim. Sıradaki yazımda ise maddeleme-listelemeleye değineceğim.