html tablo kodları

<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
  • Mazlum

    Hocam Bu Tabloları Büyütme Gibi Bi İmkanımız Varmı Acaba

    • http://dahiweb.com/ Mustafa ŞADOĞLU

      tablolara değer girmezseniz içine eklediğiniz içerik kadar genişler…

      örneğin: 500px lik bir resim eklerseniz tablonuz otomatik olarak 500 px genişler… ancak tabloyu belli bir değerde tutmak isterseniz tablo komutunda width=”300″ diyebilirsiniz… ancak bu da 300pxten daha geniş bir içerik eklerseniz tablonun genişlemesini engellemez… bu yüzden size CSS öğrenmenizi tavsiye ederim…

  • 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