HTML

HTML Kodlama Dersi – IV

HTML Tablo Oluşturma

Tablo oluştururken kullanacağımız temel etiketler <table> <tr> ve <td> dir. <table> tabloyu belirtir. <tr> satırları, <td> ise sütunları belirtir. Önce basit bir örnek yapalım.

<html>
  <body>
   <table>
    <tr>
     <td>Satır1, Sütun1</td>
     <td>Satır1, Sütun2</td>
    </tr>
    <tr>
     <td>Satır2, Sütun1</td>
     <td>Satır2, Sütun2</td>
    </tr>
   </table>
  </body>
</html>

Bu şekilde 2×2’lik bir tablo oluşturabiliriz. Ancak tablonun kenarları görünmeyebilir. Kenarlık kalınlığını ayarlamak için border ifadesini kullanırız. Kullanımı <table border=”1″> şeklindedir. <th> etiketinden de bahsedelim. <th> tablo başlığıdır diyebiliriz. İfadeyi kalın ve bölmenin ortasında gösterir. Bir örnek daha yapalım.

<html>
  <body>
   <table border="2">
    <tr>
     <th>Mavi</th>
     <th>Beyaz</th>
    <tr>
     <td>Deniz</td>
     <td>Bulut</td>
    </tr>
    <tr>
     <td>Gökyüzü</td>
     <td>Duman</td>
    </tr>
   </table>
  </body>
</html>

Yazdığımız kodun çıktısı aşağıdaki gibi olacaktır:

Mavi Beyaz
Deniz Bulut
Gökyüzü Duman

 

Satır veya sütunları birleştirebiliriz. rowspan=”…” satırlar, colspan=”…” sütunlar için kullanılır. Araya da birleştirilecek satır veya sütun sayısını yazarız. Ayrıca bgcolor=”…” ifadesini kullanarak tabloların arkaplan rengini de değiştirebiliriz. Örnekle görelim:

<html>
  <body>
   <table border="2" bgcolor="aqua">
    <tr>
     <td colspan="3">0</td>
     <td>1</td>
    </tr>
    <tr>
     <td>4</td>
     <td>5</td>
     <td rowspan="2">6</td>
     <td>7</td>
    </tr>
    <tr>
     <td>8</td>
     <td>9</td>
     <td>10</td>
    </tr>
   </table>
  </body>
</html>

Tablolarla ilgili son olarak cellspacing ve cellpadding ifadelerinden bahsedelim. cellspacing hücreler arası, cellpadding hücre içi genişliği belirtir. Kullanımlarından gösterecek olursak:

<html>
 <body>
   <table border="2" cellspacing="100" cellpadding="100">
    <tr>
     <td>A</td>
     <td>B</td>
    </tr>
    <tr>
     <td>C</td>
     <td>D</td>
    </tr>
   </table>
 </body>
</html>

Evet arkadaşlar tablolar hakkında söyleyeceklerimiz şimdilik bu kadar. HTML’de önemli bir yol katetmiş durumdayız. Diğer derste görüşmek dileğiyle kendinize iyi bakın.

Related Articles

Leave a Reply

Check Also

Close
Close

Reklam Engelleme

Please consider supporting us by disabling your ad blocker