HTML Dersleri
HTML'ye Giriş
HTML Dili
Genel Bakış
Elementler
Basit Kodlar
Özellikler
Biçimlendirme
Özel Karakterler
Bağlantılar
Frame Kullanmak
Tablolar
Listeleme
Form Nesneleri
Resim Eklemek
Arkaplan Kullanmak
Renkler

Üst Düzey HTML
CSS (Stil) Dosyaları
META Taglar
Script Kullanmak
Tüm Kodlar
Tüm Fonksiyonlar

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama
Görsel Programlama

Ana Sayfa Bize Ulaşın

Tablolar



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

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

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

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

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014