ana sayfa > Html > html tablo kodları

html tablo kodları

Perşembe, 12 Kas 2009 yorum ekle yorumlara git

<table>
Tabloya başlarken <table> kodu kullanılarak tablo başlar. Tablo </table> şeklinde kapatılır.

<tr>
Tabloda satıra başlarken <tr> kodu kulanılır ve satır sonunda </tr> şeklinde kapatılır.

<table border=”2″>
<tr>
<td>web</td>html_de_tablolar_1
</tr>
<tr>
<td>tasarım</td>
</tr>

</table>

***<td> den önce <tr> oluşturulmalıdır***

 


<td>
Tabloda sütun oluşturulurken <td> kullanılır ve diğer kodlarda olduğu gibi sütun sonunda </td> olarak kapatılır.

<table border=”2″>
<tr>html_de_tablolar
<td>web</td>
<td>tasarım</td>

</tr>
</table>

<table border>
Hücrelerin ve tablonun kenar kalınlığını belirler. Eğer <table border=0> verilirse tablo kenarlığı görünmez.

<table border=”0″>
<tr>html_de_tablolar_2
<td>BİLİŞİM</td>
</tr>
</table>

<table border=”4″>
<tr>html_de_tablolar_3
<td>BİLİŞİM</td>
</tr>
</table>

<th>
Tabloda başlık <thead> koduyla yazılır. Ancak sütun başlıkları <th> kodula yazılır.

<table border=”2″>
<tr>

<th>BİLİŞİM</th>
<th>TEKNOLOJİLERİ</th>
</tr>
<tbody>html_de_tablolar_4
<tr>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
</tr>
<tr>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
</tr>
</tbody>
</table>

<width>
Tabloda piksel cinsinden genişlik vermeyi sağlar.

<table border=”2″>html_de_tablolar_5
<tr><td width=50 >WEB</td></tr>
<tr><td width=50 >TASARIMI</td></tr>

</table>

<table border=”2″>
<tr><td width=150 >WEB</td></tr>html_de_tablolar_6
<tr><td width=150 >TASARIMI</td></tr>

</table>

<heigth>
Tabloda piksel cinsinden yükseklik vermeyi sağlar.

html_de_tablolar_7
<table border=”2″>
<tr><td height=30>WEB</td></tr>
<tr><td height=100>TASARIMI</td></tr>

</table>


<colspan>

Tabloda satırdaki hücreleri birleştirmeyi sağlar. (Yan yana birleştirir.)

<table border=”2″ >
<tr>html_de_tablolar_8
<td colspan=”2″>BİLİŞİM</td>
<tr>
<td>WEB</td>
<td>TASARIMI</td></tr>
</table>

<rowspan>
Tabloda sütundaki hücreleri birleştirmeyi sağlar. (Alt alta birleştirir.)

<table border=”2″ >
<tr>html_de_tablolar_9
<td>BİLİŞİM</td>
<td rowspan=”2″>TEKNOLOJİLERİ</td></tr>
<tr>
<td>WEB</td>
</table>

<cellspacing>
Tabloda hücreler arası boşluğu ayarlar.

<table border=”1″ cellspacing=”2″>html_de_tablolar_10
<tr><td>BİLİŞİM</td></tr>
<tr><td>TEKNOLOJİLERİ</td></tr>
</table>

<table border=”1″ cellspacing=”20″>html_de_tablolar_15
<tr><td>BİLİŞİM</td></tr>
<tr><td>TEKNOLOJİLERİ</td></tr>
</table>


<cellpadding>
Tablo içindeki bilgi ile tablo sınırları arasındaki boşluğu piksel cinsinden ayarlar.

<table border=”1″ cellpadding=”0″>html_de_tablolar_12
<tr><td>WEB</td></tr>
</table>

<table border=”1″ cellpadding=”15″>html_de_tablolar_13
<tr><td>WEB</td></tr>
</table>

<bgcolor>
Bgcolor hücre içini renklendirmeyi sağlar.

<table border=”2″>
<tr>html_de_tablolar_16
<td bgcolor=”red”>web</td>
<td bgcolor=”blue”>tasarım</td>

</tr>
</table>

<table border=”2″ bgcolor=”red”>
<tr>html_de_tablolar_19
<td>web</td>
<td>tasarım</td>
</tr>
</table>
 

<border color>
Hücre duvarının rengini değiştirir.

<table border=”4″ bordercolor=”red”>
<tr>html_de_tablolar_17
<td>web</td>
<td>tasarım</td>
</tr>
</table>

<table border=”4″ bordercolor=”blue”>
<tr>html_de_tablolar_18
<td>web</td>
<td>tasarım</td>
</tr>
</table>

 =ÖRNEK=
Yazdıklarımı daha iyi anlamanız için aşağıdaki örneği yapmanızı öneririm!


<table border=”4″>
<tbody>
<tr>html_de_tablolar_20
<td>Yıllara göre</td>
<td colspan=”2″><div align=”center”>2005</div></td>
<td colspan=”2″><div align=”center”>2006</div></td>
</tr>
<tr>
<td bgcolor=”#00ff00″ height=50><div align=”center”>SAY</div></td>
<td width=50><div align=”center”>250</div></td>
<td>120</td>
<td>100</td>
<td>50</td>
</tr>
<tr>
<td><div align=”center”>SÖZ</div></td>
<td><div align=”center”>36</div></td>
<td rowspan=”2″ bgcolor=”pink”>147</td>
<td>180</td>
<td rowspan=”2″>85</td>
</tr>
<tr>
<td><div align=”center”>EA</div></td>
<td><div align=”center”>125</div></td>
<td>160</td>
</tr>
</tbody>
</table>

Yazar: ozan_kutlu

Ozan KUTLU sitemizde 7 yazı eklemiş...




Benzer Konularımıza da Göz Atın!

coded by nessus
Share


Categories: Html Tags:
Bu kategorideki rastgele diğer yazılar
  • » Web Tarayıcıları
  • » xhtml html farkı
  • » Html 5 (Linkler)
  • » Php post methodu
  • » Html arka plan
  • » Html Etiketleri 4 (Listeleme Çeşitleri)
  • » Html sayfalarının temel yapısı
  • » Html Etiketleri 3 (hr ,br ,p, pre)
  • » Html nedir?
  • » Html Listeleme
  • » Html Etiketleri 2 (b,i,s,u,big,small,tt,sub,sup)
  • » Html Etiketleri 1 (html, head, body, title, center, hx)
  • » Html Etiketleri 6 (Tablolar)



    • http://www.dahiweb.com/siteye-destek-verenler/mustafa-sadoglu Mustafa Şadoğlu

      @semra ince
      yardım istediğiniz konu nedir? açıklarsanız belki yardımcı olabiliriz

    • semra ince

      ya bana 1 web sayfası için kodlar gerek yardımcı olurmusunuz ?lütfen çok gerekli yıllık ödevim

    • http://www.zindemuzik.com hakan

      slm
      kolay gelsin
      option value içine yazı rengi koyamıyorum formdan bir table yaprtım

    • http://www.facebook.com/editorfatih22 Fatih Aydın

      @doğukan
      buradan Table etiketi parametrelerini daha detaylı inceleyebilirsiniz
      http://www.w3schools.com/tags/tag_table.asp

      bunlar da tr ve td için parametreler
      http://www.w3schools.com/tags/tag_tr.asp
      http://www.w3schools.com/tags/tag_td.asp

      Bilginize: kodlamanızı HTML5 ile oluşturuyorsanız Table kodları desteklenmeyecektir.

    • doğukan

      ya bi gidin hiç bi şey yok bunla adam akıllı bi kod yazanda yok cellspacing sellpading hiç bi şey yazmamızşınız insan biraz çeşitli yapar align Valign kodları lazım bana table etiketi içinde ama sizin table etiketi içinde hiç bi şey yok

    • ömer

      Cidden çok işime yaradı fiyat listesini hiç bu kadar kolay çıkarmamıştım teşekkürler.

    • http://www.netbilgiver.com netbilgiver

      Gerçekten çok faydası oldu. Çok teşekkür ediyorum.

    • barış süren

      Teşekkürle.. Elinize Sağlık çok faydasını gördüm.

    • http://www.digitaldunya.net Selman Güler

      Güzel bir anlatım. detaylı olmuş. teşekkürler.

    • Hasan Kuru

      Emeğe Saygı Çok Teşekkürler :)

    • damat veysel

      gerçekten güzel olmuş ama biriz daha rahat okunacak şekilde yazsan daha iyi olurdu örnegin aynı etiketler aynıhizaya gelcek şekilde D:

    • Ceng

      çok güzel bir çalışma..

    • Seco

      Güzel makale yalnız fontu da burada aradan çıkarsaydın daha mı iyi olur du diyorum. İyi çalışmalar…

    • http://mafyamonline.tk Oğuz

      Mükemmel Çok İşime Yaradı Çok Teşekkürler

    • oguzhan

      web
      tasarım

      web
      tasarım

      =ÖRNEK=
      Yazdıklarımı daha iyi anlamanız için aşağıdaki örneği yapmanızı öneririm!

      Yıllara göre
      2005
      2006

      SAY
      250
      120
      100
      50

      SÖZ
      36
      147
      180
      85

      EA
      125
      160

    • oguzhan

      html kodları yanlışşş

    • Nihatbrahim

      Teşekkür ediyorum ders çalışmak için baktım ancak konuyuda iicene anladım hem sınavda hemde tasarımda yardımı olacak…

    • Pingback: HTML Kodları | Kisabilgi

    • Duhan

      Bende script yapıcaktım tablo komutları lazımdı çok sağolun :)

    • http://para-kazanmaliyiz.tr.gg samet koz

      çok teşekkürler bu konunun yardımı dokunda bana


    HasMeydan.Com