Keşfet

HTML Dersleri: 4

Türker

Türker

Yeni Üye

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: 
<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: 
<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:

MaviBeyaz
DenizBulut
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: 
<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: 
<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.
 
Trker4ktas' Alıntı:

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: 
<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: 
<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:

MaviBeyaz
DenizBulut
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: 
<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: 
<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.
Genişletmek için tıkla ...
güzel gidiyorsun böyle devam...
 
Cevap yazmak için giriş yap yada kayıt ol.

Konu görüntüleyen kullanıcılar

Toplam: 2 (Kullanıcı: 0, ziyaretçi: 2)
Benzer konular Forum Tarih
Türker HTML'de Formlar HTML - CSS - XML 0 123
T Satış Satılık 100 adet HTML5 teması - 6 TL Tema Alışverişi 3 237
somebach HTML Ziyaretçi Sayacı Kodu Programlama 0 85
Z HTML ile yazılan bir siteyi lisanslama ? ( Destek ) Webmaster 1 119
Türker HTML Dersleri: 5 HTML - CSS - XML 3 424
Türker HTML Dersleri: 3 HTML - CSS - XML 1 461
Türker HTML Dersleri: 2 HTML - CSS - XML 3 418
Türker HTML Dersleri: 1 HTML - CSS - XML 5 461

Benzer konular

Geri
Üst