Pages

HTML Tablolar ( table )


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




KodAnlamı
<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 1satır 1, sütun 2
satır 2, sütun 1satı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 1satı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

ÖzellikAnlamı
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

ÖzellikAnlamı
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 &nbsp; kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.

Mustafa Kemal Dirken

2017 yılında Ege Üniversitesi M.Y.O Bilgisayar Programcılığı Bölümünden mezun oldum. 21 yaşındayım ve kendimi daha da geliştirmek adına yazılım sektörlerinde çalışıyorum. Şuan Açık Öğretim Fakültesi Yönetim Bilişim Sistemleri Bölümünde okuyup kendimi geliştirmeye devam ediyorum.

Hiç yorum yok:

Yorum Gönderme