HTML/Tablolar

Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli:

Kod Anlamı

< table >	Tabloya başlamak.
< tr >	Satıra başlamak.
< td >	Sütuna başlamak.

  < table >
     < tr >
        < td >satır 1, sütun 1</ td >
        < td >satır 1, sütun 2</ td >
     </ tr >
     < tr >
        < td >satır 2, sütun 1</ td >
        < td >satır 2, sütun 2</ td >
     </ tr >
  </ table >
  

satır 1, sütun 1	satır 1, sütun 2
satır 2, sütun 1	satır 2, sütun 2

Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştireceksek colspan="" ya da iki satırı birleştireceksek rowspan="" özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir.

  < table border="1" >
     < tr >
        < td colspan="2" >satır 1, sütun 1 ve 2 birleşti</ td >
     </ tr >
     < tr >
        < td rowspan="2" >satır 2 ve 3 birleşti, sütun 1</ td >
        < td >satır 2, sütun 2</ td >
     </ tr >
     < tr >
        < td >satır 3, sütun 2</ td >
     </ tr >
  </ table >

satır 1, sütun 1 ve 2 birleşti
satır 2 ve 3 birleşti, sütun 1	satır 2, sütun 2
	satır 3, sütun 2

Dikkat edilirse rowspan="2" kullandığımız satırdan sonra sadece tek sütun kullandık. Bu da satır 3, sütun 2'yi oluşturdu. Bu sayılarda yapacağınız yanlışlık tabloda görünümde sorunlar çıkaracaktır.

Tablo Özellikleri

Özellik	Anlamı
border="0"	Tablo kenarlığı boyutu.
cellspacing="0"	Sütunlar arası kenarlık boşluğu.
cellpadding="0"	Satırlar arası kenarlık boşluğu.
width="genislik"	Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil"	Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).

TD (Sütun) Özellikleri

Özellik	Anlamı
align="hiza"	Kutu hizası, left, right, center kullanılabilir.
width="genislik"	Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
height="yukseklik"	Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil"	Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).

NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için   kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.