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

7
756
görüntülenme
HTML Öğreniyorum
HTML Öğreniyorum Görseli

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;

1. satır 1. sütun 1. satır 2. sütun 1. satır 3. sütun 1. satır 4. sütun
2. satır 1. sütun 2. satır 2. sütun 2. satır 3. sütun 2. satır 4. sütun
Tablo veri (table data) etiketi olan, tablo içerisindeki veri hücresidir. Bu hücreler her türlü HTML kodlarını içerisinde barındırabilir. Yazı, görüntü, listeler gibi hatta bu hücrelerin içerisine de yeni tablolar oluşturabilirsiniz!

Border ve Hücre Birleştirme Öznitelikleri

border gibi öznitelikleri CSS kullanarak ayarlayabilirsiniz. Bunu açacağım CSS Öğreniyorum bölümünde de göstereceğim!

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:

1. satır 1. sütun 1. satır 2. sütun 1. satır 3. sütun 1. satır 4. sütun
2. satır 1. sütun 2. satır 2. sütun 2. satır 3. sütun 2. satır 4. sütun

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:

1. satır 1. sütun 1. satır 2. sütun 1. satır 3. sütun 1. satır 4. sütun
2. satır 1. sütun 2. satır 2. ve 3. sütunların birleştirilmesi 2. satır 4. sütun
Uyarı!
Kenarlık tanımlayan border özniteliği HTML5 te desteklenmemektedir!

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>
Bunu yaparken birleştirme yaptığınız satırlarda 1 hücreyi (

ile tanımladığımız hücreyi) eksik yazmayı unutmayın! Özellikle vurgulamak için 2. satır 1. sütun hücresinin kodu olan 9. kod satırını boş bıraktım.

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

1. sütun 1. ve 2. satır birleşimi 1. satır 2. sütun 1. satır 3. sütun 1. satır 4. sütun
2. satır 2. sütun 2. satır 3. sütun 2. satır 4. sütun

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:

1. sütun 1. ve 2. satır birleşimi 1. satır 2. sütun 1. satır 3. sütun 1. satır 4. sütun
2. satır 2. sütun 2. satır 3. sütun 2. satır 4. sütun

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:

Günler Pazartesi Salı Çarşamba Perşembe Cuma
8-8:30 Çalışma

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.

7 YORUMLAR

  1. Greate article. Keep writing such kind of info on your page.
    Im really impressed by your blog.
    Hey there, You have performed a great job. I’ll definitely digg it and personally recommend to
    my friends. I’m confident they’ll be benefited from
    this website.

CEVAP VER

Lütfen yorumunuzu yazınız.
Lütfen isminizi buraya yazınız