HTML Tablo Oluşturma ve Özellikleri – HTML Dersleri – 7

Bu yazımda Web’de kodlamaya ilk başladığım zamanlarda HTML kodlarıyla ufak deneme siteleri yaparken, sitenin temasını oluştururken sıklıkla kullandığım tablolardan bahsedeceğim. HTML Tablo nasıl oluşturulur ve temel özellikleri gibi konulardan bahsedeceğim.

HTML Tablo Oluşturma

HTML’de kodlama yaparken tabloları <table> etiketiyle tanımlarız. Tablolar içerisinde oluşturulacak her satır <tr> (table rows) etiketiyle oluşturulur. Bu satırların içerisinde de her sütun <td> (table data) etiketiyle tanımlanır. Bu <td> etiketi ile tanımlanan her bir alana tablo hücresi de diyebiliriz. Tabloda verilecek verilerin tümü bu etiket içerisinde tanımlanır. <td> ve <tr> etiketleri kapanış etiketlerine de sahiptir. Kapanış etiketlerinin kullanımı zorunludur. ( </td>, </tr> )

Örnek olarak iki satırlı ve dört sütunlu bir tablo oluşturmak için HTML kodlarını şu şekilde derlemeliyiz;

<table>
   <tr>
     <td>1. satır 1. sütun</td>
     <td>1. satır 2. sütun</td>
     <td>1. satır 3. sütun</td>
     <td>1. satır 4. sütun</td>
   </tr>
   <tr>
     <td>2. satır 1. sütun</td>
     <td>2. satır 2. sütun</td>
     <td>2. satır 3. sütun</td>
     <td>2. satır 4. sütun</td>
   </tr>
</table>

Bu kodlar ise şu şekilde bir tablo görüntüsü ortaya çıkartacaktır;

Border ve Hücre Birleştirme Öznitelikleri

Tablolarda kenarlıkları border özniteliği ile tanımlar/boyutlandırırız:

<table border="3">
 <tr>
   <td>1. satır 1. sütun</td>
   <td>1. satır 2. sütun</td>
   <td>1. satır 3. sütun</td>
   <td>1. satır 4. sütun</td>
 </tr>
 <tr>
   <td>2. satır 1. sütun</td>
   <td>2. satır 2. sütun</td>
   <td>2. satır 3. sütun</td>
   <td>2. satır 4. sütun</td>
 </tr>
</table>

Yukarıdaki tabloda table etiketine border özniteliğini 3 piksel olarak tanımladık. Bu şekilde tanımladığımızda ise tablomuz şöyle görünecektir:

Tablolarda colspan özniteliği ise tablo hücrelerini yatayda birleştirmek için kullanılır:

<table border="3">
 <tr>
   <td>1. satır 1. sütun</td>
   <td>1. satır 2. sütun</td>
   <td>1. satır 3. sütun</td>
   <td>1. satır 4. sütun</td>
 </tr>
 <tr>
   <td>2. satır 1. sütun</td>
   <td colspan="2">2. satır 2. ve 3. sütunların birleştirilmesi</td>
   <td>2. satır 4. sütun</td>
 </tr>
</table>

Yukarıdaki kodlamada ise tablonun ikinci satırında ikinci ve üçüncü hücreleri birleştirdik:

Bir satırdaki iki hücreyi colspan ile birleştirdik. Peki bir sütundaki iki hücreyi nasıl birleştireceğiz? Bu da çok kolay! Bunun için ise rowspan özniteliği ile yapıyoruz:

<table border="3">
 <tr>
   <td rowspan="2">1. satır 1. sütun</td>
   <td>1. satır 2. sütun</td>
   <td>1. satır 3. sütun</td>
   <td>1. satır 4. sütun</td>
 </tr>
 <tr>
   
   <td>2. satır 2. sütun</td>
   <td>2. satır 3. sütun</td>
   <td>2. satır 4. sütun</td>
 </tr>
</table>

Tablomuz ise aşağıdaki gibi görünecek:

Tablo Hizalama ve Arkaplan Rengi Öznitelikleri

Bir tabloyu ekranda sağa, sola dayamayı yada ekranı ortamasını isteyebiliriz. Bunun için align özniteliğini kullanabiliriz. Bu özniteliği table koduna eklememiz yeterli:

<table align="center">

Hadi şimdi de tablonun bir hücresinin arkaplanına, örneğin yeşil rengi nasıl tanımlarız bakalım. Bunun için arkaplan rengi atamak istediğimiz hücreye bgcolor özniteliğini eklememiz yeterli olacaktır:

<table border="3">
 <tr>
   <td rowspan="2">1. sütun 1. ve 2. satır birleşimi</td>
   <td bgcolor="green">1. satır 2. sütun</td>
   <td>1. satır 3. sütun</td>
   <td>1. satır 4. sütun</td>
 </tr>
 <tr>
   
   <td>2. satır 2. sütun</td>
   <td>2. satır 3. sütun</td>
   <td>2. satır 4. sütun</td>
 </tr>
</table>

Yukarıdaki kod kümesinin 4. satırında da gördüğünüz gibi 1. satır 2. sütun için arka plana yeşil (İngilizce yazılmak zorundadır. Yada # koduyla başlayan renk kodu da girilebilir) rengini tanımladık:

Bir Tabloda Başlık Satırı Oluşturmak

Bir tabloda, örneğin bir program tablosunda her sütunun ilk satırını başlık olarak belirlemek isteyebiliriz. Bunun için yapmamız gereken ilk <tr> tagını kullandığımızda her bir sütun için <td> etiketi yerine <th> etiketi kullanmamız yeterli olacaktır:

Yukarıdaki tablonun kodları ise şu şekildedir:

<table border="3">
 <tr>
   <td>Günler</td>
   <th>Pazartesi</th>
   <th>Salı</th>
   <th>Çarşamba</th>
   <th>Perşembe</th>
   <th>Cuma</th>
 </tr>
 <tr>
   <td>8-8:30</td>
   <td>Çalışma</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
 </tr>
</table>

Bu dersimizde HTML’de tablo oluşturmak için bilmemiz gereken kodları temel öznitelikleri ve kullanım yerlerini gördük. Bir sonraki dersimizde HTML satır içi ve blok elemanlarını göreceğiz.