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>
</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>
<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>
<td>BİLİŞİM</td>
</tr>
</table>

<table border=”4″>
<tr>
<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>
<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″>
<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>
<tr><td width=150 >TASARIMI</td></tr>
</table>

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

<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>
<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>
<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″>
<tr><td>BİLİŞİM</td></tr>
<tr><td>TEKNOLOJİLERİ</td></tr>
</table>

<table border=”1″ cellspacing=”20″>
<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″>
<tr><td>WEB</td></tr>
</table>

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

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

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

<table border=”2″ bgcolor=”red”>
<tr>
<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>
<td>web</td>
<td>tasarım</td>
</tr>
</table>

<table border=”4″ bordercolor=”blue”>
<tr>
<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>
<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ş...

• Tüm yazıları-> ozan_kutlu →
• Kişisel Sayfası