Html'de Tablolarla Çalışma

Tablolar tasarım düzgünlüğü açısından bazı yerlerde çok işimize yarar. Günümüzde daha çok Div + Css ile çalışılıyor ama örneğin bir iletişim formu hazırlarken tabloyla çalışmak çok daha rahat ve sıkıntısız oluyor. Gerçeği söylemek gerekirse bende div ve css ile yazıyorum ama iletişim formlarında herzaman tablo kullanırım. Hem formun yapısına uygun olduğu için hemde form için fazla emek gerekmediği için.
Şimdi girelim konumuza..

TABLOLAR

Tablolar satır ve sütunlardan oluşur. Tablolarla çalışmak için düzen şarttır. Divler gibi tablolarada css ile müdahale edebiliriz ama bu konuyu css derslerimizde görücez.

<table>

<tr>

<td>

</tr>

</table>

<table> : Tablomuzun başladığını belirtiriz.
<tr> : tr tagı ile yeni satır açarız.
<td> : td tagı ile yeni sütun açarız.
border : Kenar çerçevesini belirler.
cellpadding : Kenar çerçeveleri ile sütun içerisindeki yazının boşluğunu belirler. ( İç Boşluk )
cellspacing : Diğer kenar çerçeveleri arasındaki boşluğu belirler. ( Dış Boşluk )

Tablo oluşturmak için ilk önce tablo taglarımızı açıp kapatmamız gerek. Tablomuzun iskeleti satırlardır. Satırları ise sütunlar tamamlar. Hemen örneğimizi yapalım...

<tr>

<td>

İlk satırın ilk sütunu

<td>

İlk satırın ikinci sütunu

<td>

</tr>

</table>

Ekran görüntümüz şu şekilde olacaktır ;

Gördüğümüz gibi ilk satırımızda 2 tane sütun oluşturduk.

Şimdi 2 satırda 2 tane sütun yapalım..

<tr>

<td>

İlk satırın ilk sütunu

<td>

İlk satırın ikinci sütunu

<td>

</tr>

<tr>

<td>

ikinci satırın ilk sütunu

<td>

ikinci satırın ikinci sütunu

<td>

</tr>

</table>

Şimdiki sonucumuz ;

tr etiketimiz ile ikinci satırımızı açtık ve içine td ile 1. ve 2. sütunumuzu oluşturduk.

Şimdi cellpadding ve cellspacing özelliğimizi kullanıp tablonun iç ve dış kısımlarında boşluk bırakalım...

<tr>

<td>

İlk satırın ilk sütunu

<td>

İlk satırın ikinci sütunu

<td>

</tr>

<tr>

<td>

ikinci satırın ilk sütunu

<td>

ikinci satırın ikinci sütunu

<td>

</tr>

</table>

Tabloda Başlık Kullanımı

<th> tagımız başlığı belirtir. Bu tagın içine yazdığımız yazılar tabloda başlık olarak algılanır. Hemen basit bir değişiklikle ilk satırımızı başlık haline getirelim...

<tr>

<th>

</th>

<th>

SOYAD

</th>

</tr>

<tr>

<td>

Onur

</td>

<td>

İnci

</td>

</tr>

</table>

Önizleme ;