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.

HTML Kodu

   <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>

HTML Görünümü

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.

HTML Kodu

   <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>

HTML Görünümü

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.

HTML'ye Giriş

Üst Düzey HTML

Facebook Sayfamız

Programlama Türkiye