TABLOLAR (Enes KÜPELİ)

Yapacağımız projenin Sosyal Medya üzerinden olacağı için Proje Lider Öğretmenimiz Muhittin IŞIK tarafından aşağıdaki eğitimler verilmiştir. Böylece kendi Web ve Blog sayfalarımızı hazırlamamız sağlanmıştır. Aşağıda temel web tasarım çalışmalarında neler yaptığımız anlatılmıştır.

TABLOLAR

Öncelikle hocamız Bize HTML etiketi kullanarak tablo oluşturmayı öğretti.

Bizlere tablo kodunun etiket içinde TABLE yani <TABLE> olduğunu gösterdi birde bu kodun nasıl kapatılacağını yani </TABLE> kodunu. Daha sonra bizlere bu tablo içinde nasıl sütün ve satır oluşturabileceğimizi ve bu satır ve sütunların içini nasıl doldurabileceğimizi gösterdi satır ve sütün kodlarını bizlere şöyle örnek verdi :

<TR> Satır 1 </TR>   ,  <TD> Sütün 1 </TD>   satır ve sütün kodlarının nasıl kullanıldığı

<table border=”1”>
  <tr>
    <td>Sütün 1</td>
 </tr>  
</table>

Daha sonra border kodunun ne olduğunu anlattı. Border tablo çizgilerini belirginleştiriyormuş yani çizgileri kalınlaştırıyor. Daha sonrada HTML sayfasında olduğu gibi başlık (head)  ya da gövde (body ) olarak ayırabileceğimizi gösterdi bu kodların ise  <tbody> ve <thead > olduğunu gösterdi  ve birde
<caption > etiketi ile ikinci bir açıklama yapmanın mümkün olduğunu gösterdi .  Daha sonra sütün başlığı yazmayı öğretti. Yani sütün başlığı kodunun <th> olduğunu anlattı ve bu kodların <tr>…</tr> kodları arasına yazıldığını anlattı. Sonra <tr> ve <td> etiketinin  <tbody>...</tbody> arasında yazıldığını anlattı.
<th> etiketine bir örnek verirsek :

<table border=”1”>
 <thead>Örnek Başlık </thead>
 <caption aligin=”bottom”>
Örnek Açıklama
 <caption>
  <tr>
   <th>Örnek</th>
  </tr>

Lider Öğretmenimiz bize daha sonra width kodunun tablonun pixel  cinsinden genişliğini belirttiğini ve bu kodu kullanmadığınızda web tarayıcısının otomatik en uygun genişliği belirttiğini söyledi .
Height kodunun ise tablonun pixel cinsinden genişliğini belirttiğini ve yine bu kodu kullanmazsanız web tarayıcınızın otomatik en uygun yüksekliği belirttiğini anlattı.


Bu kodlara örnek verirsek :

<table border=”1”>
   <tr><td width=100> Örnek </td></tr>
   <tr><td height=40>Örnek </td></tr>

Daha sonra yine Lider Öğretmenimiz bize colspan ve rowspan kodlarını gösterdi
colspan ın aynı satırdaki hücreleri birleştirmek için rowspan ın ise aynı sütündaki hücreleri birleştirmek için kullanıldığını gösterdi.
Bunlara örnek verirsek :

 <table border=”1”>
               <tr>
                  <td rowspan=”2”>örnek</td>
               </tr>
               <tr>
      <td colspan=”2”>Örnek</td>
               </tr>
 </table>

Yine Lider Öğretmenimiz bize cellspacing ve Cellpadding kodunu gösterdi . Cellspacing kodunun tablo içerisindeki hücrelerin , birbirlerinden ve tablo sınırlarından uzaklığını,pixel cinsi olarak ayarladığını anlattı.Cellpadding ise tablonun iç kısmını genişletir ya da daraltır.
Buna Örnek verirsek :

             <tablo border=”1” cellpadding=”0”>(eğer bu kodu girersek hücre içinde bulunan unsurun bitişik olmasını sağlar)
<tr><td>Örnek</td></tr>

</tablo>

<tablo border=”1”  cellspacing=”9”>
 <tr><td>Örnek</td></tr>
</tablo>

Enes Küpeli