T-K-O-T

html programming 4

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 2x2'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.

 
Reklamı Sola Kaydır

Resim Galerisi

Galeri'ye Git

Sosyal Medya'da Biz!

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol