Tablolar (9. Ders)

[me3met]

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

Tablo kodları ve anlamları:
<table> Tabloya başlamak.
tr Satıra başlamak.
td Sütuna başlamak.

Örnek tablo kodları:

Kod:

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

HTML görünümü: http://forumil.com/nane/tablo1.html

Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satılardaki 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..

Kod:

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

HTML Görünümü: http://forumil.com/nane/tablo2.html

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

Tablo özellik ve Anlamı:

border="0" Tablo kenarlığı boyutu.
cellspancing="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 ve Anlamları:

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