Ebilgi

Html Tablolar

Html ile hazırladığımız web sitelerimize belirli bir metne veya listeye düzen sağlamak için tablo eklemek isteyebilirsiniz.

Html dilinde tablo ekleme işlem <table> etiketi ile açılmakta ve </table> şeklinde kapanmaktadır. Yani tablomuzun tüm elemanları <table> ile </table> etiketleri arasında olacaktır.

Bilgi: Tablolar satır, sütun ve hücrelerden oluşmaktadır. 

  • Satır: Sayfada yatay olarak yani alt alta yazılan her bir diziye satır denmektedir.
  • Sütun: Sayfada dikey olarak yazılan her bir bölüme sütun denmektedir.
  • Hücre: Satır ve sütunların kesişerek oluşturdukları her bir alana hücre denmektedir.

Table Etiketi Kullanımı: 

1 satır 1 sütun bir tablo oluşturma işleminin nasıl yapıldığını öğrenelim.

<table>

  <tr>

      <td> Tablo Oluşturma </td>

  </tr>

</table>

Kodu Çalıştır

Bilgi: Tablo oluşturmak için kesinlikle kullanılması gereken etiketler : table, tr ve td etiketleri'dir.

 

Table Etiketi ile Birlikte Kullanılan Olmazsa Olmaz Parametreler:

  • tr : Tabloya satır eklemek için kullanılmaktadır.
  • td : Tabloya sütun eklemek için kullanılmaktadır.
  • th : Tabloya başlık eklemek için kullanılmaktadır. (Olmasada tablo olur)

Tr Etiketi

Tr etiketi, tabloya satır eklemek için kullanılmaktadır. Hücrelerin oluşması için td etiketi ile birlikte kullanılması gerekmektedir.

Tr Etiketi  Örneği 1:

2 satır 1 sütun tablo 

<table>

  <tr>
      <td> Satır 1 </td>
  </tr>

  <tr>
      <td> Satır 2 </td>
  </tr>

</table>

Kodu Çalıştır

Tr Etiketi  Örneği 2:

3 satır 1 sütun tablo ekleme

<table>

  <tr>
      <td> Satır 1 </td>
  </tr>

  <tr>
      <td> Satır 2 </td>
  </tr>

  <tr>
      <td> Satır 3 </td>
  </tr>

</table>

Kodu Çalıştır

Td Etiketi

Tr etiketi, tabloya stütun eklemek için kullanılmaktadır. Hücrelerin oluşması için tr etiketi ile birlikte kullanılması gerekmektedir.

Td Etiketi  Örneği 1:

1 satır 2 sütun tablo oluşturma işlemini yapacağız.

<table>

  <tr>
      <td> Sütun 1 </td>
      <td> Sütun 2 </td>
  </tr>

</table>

Kodu Çalıştır

Td Etiketi  Örneği 2:

1 satır 3 sütun tablo oluşturma işlemini yapacağız. Daha fazla sütun eklemek isterseniz <td> etiketi ile ekleyebilirsiniz.

<table>

  <tr>
      <td> Sütun 1 </td>
      <td> Sütun 2 </td>
      <td> Sütun 3 </td>
  </tr>

</table>

Kodu Çalıştır

Örnek: 

2 satır 2 sütun tablo ekleme

<table>

  <tr>
      <td> Satır 1 Sütun 1 </td>
      <td> Satır 1 Sütun 2 </td>
  </tr>

  <tr>
      <td> Satır 2 Sütun 1 </td>
      <td> Satır 2 Sütun 2 </td>
  </tr>

</table>

Kodu Çalıştır

Örnek:

3 satır 5 sütun tablo ekleme

<table>

  <tr>
      <td> Satır 1 Sütun 1 </td>
      <td> Satır 1 Sütun 2 </td>
      <td> Satır 1 Sütun 3 </td>
      <td> Satır 1 Sütun 4 </td>
      <td> Satır 1 Sütun 5 </td>
  </tr>

  <tr>
      <td> Satır 2 Sütun 1 </td>
      <td> Satır 2 Sütun 2 </td>
      <td> Satır 2 Sütun 3 </td>
      <td> Satır 2 Sütun 4 </td>
      <td> Satır 2 Sütun 5 </td>
  </tr>

  <tr>
      <td> Satır 3 Sütun 1 </td>
      <td> Satır 3 Sütun 2 </td>
      <td> Satır 3 Sütun 3 </td>
      <td> Satır 3 Sütun 4 </td>
      <td> Satır 3 Sütun 5 </td>
  </tr>

</table>

Kodu Çalıştır

Th Etiketi

Tabloda başlık eklemek için kullanılmaktadır. Hücre oluşturulabilmesi için tr etiketi ile birlikte kullanılması gerekmektedir.

Th Etiketi Örneği 1:

2 satır 1 sütun başlık eklemek örneği

<table>

  <tr>
      <th> Başlık </th>
  </tr>

  <tr>
      <td> İçerik </td>
  </tr>

</table>

Kodu Çalıştır

Th Etiketi Örneği 2:

5 satır 3 sütun başlık eklemek örneği

<table>

  <tr>
      <th> Başlık 1 </th>
      <th> Başlık 2 </th>
      <th> Başlık 3 </th>
  </tr>

  <tr>
      <td> İçerik </td>
      <td> İçerik </td>
      <td> İçerik </td>
  </tr>

  <tr>
      <td> İçerik </td>
      <td> İçerik </td>
      <td> İçerik </td>
  </tr>

  <tr>
      <td> İçerik </td>
      <td> İçerik </td>
      <td> İçerik </td>
  </tr>

  <tr>
      <td> İçerik </td>
      <td> İçerik </td>
      <td> İçerik </td>
  </tr>

</table>

Kodu Çalıştır

Table Etiketi ile Kullanılan Parametreler :

  • border : Tabloya çerçeve eklemek için kullanılmaktadır.

    • bordercolor: Tabloda bulunan çerçevenin rengini belirlemek için kullanılır.
  • bgcolor : Tablonun arkaplanına renk eklemek için kullanılır.
  • background : Tablonun arkaplanına resim eklemek için kullanılır.
  • Width : Tablo genişliğini belirlemek için kullanılır.
  • Height : Tablo yüksekliğini belirlemek için kullanılır.
  • Colspan : Tabloda bulunan belirli aynı satırdaki hücreleri birleştirmek için kullanılır.
  • Rowspan : Tabloda bulunan aynı sütundaki hücreleri birleştirmek için kullanılır.
  • Cellspacing : Tablo içindeki hücrelerin birbirinden ve tablo kenarından ne kadar uzak olacağını belirlemek için kullanılır.
  • Cellpadding : Hücre içinde bulunan verilerin hücre sınırından ne kadar içten boşluk bırakılacağını belirlemek için kullanılır.

Border Parametresi

Tablolarda border parametresi, tabloda bulunan hücrenin ve tablonun etrafında bulunan çerçevenin kalınlığını belirlemek için kullanılmaktadır.

Border Parametresi Kullanımı :
<table border="3">

    <tr>
        <td> AZKOD </td>
    </tr>

</table>

Kodu Çalıştır

Bilgi: Border parametresi sıfır olarak girildiğinde (border="0") tabloda çerçeve görünmemektedir.

Border Parametresi Örneği: 
<table border="5"> 

<tr>
      <td> Hücre 1 </td>
</tr>

<tr>
      <td> Hücre 2 </td>
</tr>

<tr>
      <td> Hücre 3 </td>
</tr>

</table>

Kodu Çalıştır

Bordercolor Parametresi

Tabloda bulunan çerçevenin rengini belirlemek için kullanılmaktadır.

Bordercolor Parametresi Kullanımı:
<table border="3" bordercolor="red">

<tr>
     <td> Html Dersleri </td>
</tr>

</table>

Kodu Çalıştır

Bilgi: Bu parametre border ile çerçeve kalınlığı belirlendikten sonra kullanılması gerekmektedir.

Bordercolor Parametresi Örneği.
<table border="2" bordercolor="blue">

<tr>
     <th> AZKOD Dersleri </th>
</tr>

<tr>
     <td> Html Dersleri </td>
</tr>

<tr>
     <td> Css Dersleri </td>
</tr>

<tr>
     <td> JavaScript Dersleri </td>
</tr>

</table>

Kodu Çalıştır

Bgcolor Parametresi

Bgcolor parametresi, tabloya veya istenen hücreye arkaplan rengi eklemek için kullanılmaktadır. 

Bgcolor Parametresi Kullanımı:
<table bgcolor="yellow">

<tr>
     <th> AZKOD Eğitimleri </th>
</tr>

<tr>
     <td> Html </td>
</tr>

<tr>
     <td> Css </td>
</tr>

<tr>
     <td> JavaScript </td>
</tr>

</table>

Kodu Çalıştır

Bgcolor Parametresi Örneği:

Hücreye renk vermek için kullanılmaktadır.

<table>

<tr bgcolor="red">

     <th> AZKOD Dersleri </th>
</tr>

<tr bgcolor="blue">

     <td> Html </td>
</tr>

<tr>
     <td> Css </td>
</tr>

<tr>
     <td> JavaScript </td>
</tr>

</table>

Kodu Çalıştır

Background Parametresi

Background parametresi, tabloya veya istenen hücreye arkaplan resmi eklemek için kullanılmaktadır. 

Background Parametresi Kullanımı:
<table background="resim_adresi">

  <tr>
      <td> Hücre 1 </td>
  </tr>

  <tr>
      <td> Hücre 2 </td>
  </tr>

</table>

Kodu Çalıştır

Width Parametresi

Width parametresi, tablonun genişliğini belirlemek için kullanılmaktadır. 

Width Parametresi Kullanımı:
<table width="250" border="2">

  <tr>
      <td> Html Dersleri </td>
  </tr>

  <tr>
      <td> Css Dersleri </td>
  </tr>

  <tr>
      <td> JavaScript Dersleri </td>
  </tr>

</table>

Kodu Çalıştır

Height Parametresi

Height parametresi, tablonun yüksekliğini belirlemek için kullanılmaktadır. 

Height Parametresi Kullanımı:
<table height="500" border="2">

  <tr>
      <td> Html Dersleri </td>
  </tr>

  <tr>
      <td> Css Dersleri </td>
  </tr>

  <tr>
      <td> JavaScript Dersleri </td>
  </tr>

</table>

Kodu Çalıştır

Colspan Parametresi

Colspan parametresi, tabloda bulunan belirli aynı satırdaki hücreleri birleştirmek için kullanılmaktadır.

Colspan Parametresi Kullanımı:
<table>

<tr>
    <th colspan="2"> Başlık </th>
</tr>

<tr>
    <td> Hücre 1 </td>
    <td> Hücre 2 </td>
</tr>


</table>

Kodu Çalıştır

 Rowspan Parametresi 

Rowspan parametresi, tabloda bulunan aynı sütundaki hücreleri birleştirmek için kullanılır.

Rowspan Parametresi Kullanımı: 
<table>

<tr>
    <td> Hücre 1 </td>
    <td rowspan="2"> Hücre 3 </td>
</tr>

<tr>
    <td> Hücre 2 </td>
</tr>

</table>

Kodu Çalıştır

Cellspacing Parametresi

Tablo içindeki hücrelerin birbirinden ve tablo kenarından ne kadar uzak olacağını piksel türünden belirlemek için kullanılmaktadır.

Cellspacing Parametresi Kullanımı:
<table cellspacing="10"> 

<tr>
   <td> Hücre </td>
</tr>

</table>

Kodu Çalıştır

Bilgi: Cellspacing parametresi Html5 tarafından desteklenmemektedir.

Cellpadding Parametresi

Hücre içinde bulunan verilerin hücre sınırından yani kenarlardan ne kadar uzak olacağını (içten boşluk) bırakılacağını belirlemek için kullanılmaktadır.

Cellpadding Parametresi Kullanımı:
<table cellspacing="10"> 

<tr>
   <td> Hücre 1 </td>
</tr>

<tr>
   <td> Hücre 2 </td>
</tr> 

</table>

Kodu Çalıştır

Bilgi: Cellpadding parametresi Html5 tarafından desteklenmemektedir.

 

Önceki Ders: Html Listeleme Sonraki Ders: Html Renk Kodları