HTML Ders Notları 1

Gönderen Sistem

HTML Yazı İçerisinde Tablo Kullanmak



Blog yada sitelerde bazen verileri göstermek için tabloya ihtiyacımız olur şimdi genel olarak tablo kullanımına bakalım


Tablo Kodları


<table cellpadding="0" cellspacing="0">
<tr>
<th>Tablo Başlığı 1</th>
<th>Tablo Başlığı 2</th>
<th>Tablo Başlığı 3</th>
</tr>
<tr>
<td>Tablo İçeriği 1</td>
<td>Tablo İçeriği 1</td>
<td>Tablo İçeriği 1</td>
</tr>
<tr>
<td>Tablo İçeriği 2</td>
<td>Tablo İçeriği 2</td>
<td>Tablo İçeriği 2</td>
</tr>
<tr>
<td>Tablo İçeriği 3</td>
<td>Tablo İçeriği 3</td>
<td>Tablo İçeriği 3</td>
</tr>
</table>

--------------------------------------------------------



<table width="250" height="150" border="10" cellpadding="4" cellspacing="3" bordercolor="#333333" bgcolor="#FF9933" align="center" valign=”top”>
<tbody>
<tr>
<td>yazı1</td>
<td>yazı2</td>
<td>yazı3</td>
<td>yazı4</td>
</tr>
<tr>
<td>yazı5</td>
<td>yazı6</td>
<td>yazı7</td>
<td>yazı8</td>
</tr>
<tr>
<td>yazı9</td>
<td>yazı10</td>
<td>yazı11</td>
<td>yazı12</td>
</tr>
<tr>
<td>yazı13</td>
<td>yazı14</td>
<td>yazı15</td>
<td>yazı16</td>
</tr>
<tr>
<td>yazı17</td>
<td>yazı18</td>
<td>yazı19</td>
<td>yazı20</td>
</tr>
</tbody>
</table>

width : Tablo genişliği . width içinde yüzde de kullanabilirsiniz. 100% yaparsanız tam genişlik alır.
height: Tablo yüksekliği. height içinde yüzde de kullanabilirsiniz. 100% yaparsanız tam genişlik alır.
border : Tablo çerçevesinin kalınlığı
cellpadding: Hücre içi boşluk
cellspacing : Hücreler arası boşluk
bordercolor : Tablo çerçevesinin rengi
bgcolor : Arkaplan rengi
align :”center” tabloyu ortalar. left / right
background : ”resim.gif” şeklinde arkaplan resmini tanımlıyabiliriz.
valign : Hücre içindeki yazıların dikey hizalaması. (vertical align) top/bottom



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>

<table border= “1”> : Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.

<table width=”100”> Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.

<table height=”50”> Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.

<table cellspacing=”2”> Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.

<table cellpadding=”5”> Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.

<table bgcolor=”#ffff00”> Tablonun genel arka plan rengini belirlemek için kullanılır.

<table align=”left”> ; <table align=right>; <table align=center> Tablonun konumunu ayarlamayı sağlar.

<table background=”tugla.gif”> Tablonun arkasına resim konulabilir.

< table bgcolor=”#ffff00” > Tablonun arka zemin rengini ayarlar.


<td> Takısının Parametreleri
Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa, sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz.

<td bgcolor=”#00ffff”> Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.
<td width=”250”> Hücre genişliğini belirlemek için kullanılır.
< td height=”50”> Hücre yüksekliğini belirlemek için kullanılı
<td colspan=”2”> Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.
<td rowspan=”2”> Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.
<td background=”hasan.gif”> Hücrenin arka planına bir resim yerleştirir.
<td align=”left”>, <td align=”right”>; <td align=”center”> Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.
<td valign="top”>, <td valign="middle”>, <td valign="bottom”>, <td valign="baseline”> sadece <td> ile birlikte kullanılır, hücre içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya tabanına(bottom) dayar.

Not : Align parametresi hücre içinde yatay hizalama yapar. Valign parametresi hücre içinde düşey hizalama yapar.

Not: <table border=“1”> takısı kullanıldıgında table ve td takısında <td bordercolor:#ff0000”> veya <table bordercolor:#ff0000”> paremetresi kullanıldıgında çerçevenin tüm kısımları aynı renge boyanıyor. Bordercolor yerine <BORDERCOLORDARK=”#ff0000”> kullanılırsa tablo çerçevesinin gölgeli kısmını <BORDERCOLORLIGHT=”#ff0000”> kullanılırsa çerçevenin ışığa bakan kısmını renklendiriyor.

Kenarlık renklerinde ayarlama yapmak

1.) Tablomuzun sadece bazı yerlerindeki iç kenarlıkları da yok etmemiz mümkün. Bunu <table> tagının "rules" elemanı ile yapabiliriz.



"Rules" Elemanının parametreleri.:
• none : Tüm iç kenarlıkları yok eder.
• rows : Dikey iç kenarlıkları yok eder.
• cols : Yatay iç kenarlıkları yok eder.


Örnek;


<table border="1" bordercolor="blue" rules="cols" cellpadding="5" cellspacing="0">
<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</table>


2.) Tablomuzun sadece bazı yerlerindeki dış kenarlıkları yok etmemiz mümkün. Bu özelliği <table> tagının "frame" elemanı sayesinde gerçekleştiririz.

Frame" Elemanının Parametreleri.


• void : Tüm dış kenarlıkları yok eder.
• above : Sağ,sol ve alt kenarlığı yok eder.
• below : Sağ,sol ve üst kenarlığı yok eder.
• hsides : Sağ ve sol kenarlıkları yok eder.
• vsides : Üst ve alt kenarlıkları yok eder.
• rhs : Üst, alt ve sol kenarlığı yok eder.
• lhs : Üst, alt ve sağ kenarlığı yok eder.



Örnek;


<table border="1" bordercolor="red" frame="vsides"
cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</tbody>
</table>



HTML Buton Olayı


<button> BUTON </button>
Butona tıkladığında sayfa ilgili url ye gider


<a href="#"><input type="button" value="BUTON ÜSTÜNDEKİ YAZI" /></a>
Butona tıkladığında sayfa ilgili url yi yeni sekmede açar


<a href="#" target="_blank"><input onclick="this.parentNode.click()" type="button" value="BUTON ÜSTÜNDEKİ YAZI" /></a>


Buton üzerine resim eklemek


<button ><img src="Resim URL"></button>

Tkıla oku buton



<script language="JavaScript">
<!--
var display_text  = "Sitemize hoşgeldiniz "
+ "Size gerekli tüm kodları bulabileceğiniz adrestesiniz  "
+ "     Kodlara kısa sürede ulaşmak için "
var display_text; var place; var meter;
var out = " "; var place = 50;
function scroll_text(){
for (meter = 0; meter < place; meter++){
out += " "
}
if (place >= 0)
out += display_text
else out = display_text.substring(-place,display_text.length)
document.scroll_form.field.value = out
out = " "
place--
if (place < -(display_text.length)){
place = 50
}
setTimeout('scroll_text()',100)
}
</script>


<CENTER>
Butona her tıkladığınızda yazı hızlanacaktır..

<CENTER>
<form name="scroll_form">
<input type="button" name="button_one" value="Tıkla oku..." onClick="scroll_text()">
<input type="text" name="field" size="50"><p>
</form>
</CENTER>


Standart buton yerine resim animasyonu eklemek isterseniz


 <a href="#"><img hspace="0" border="0" onmouseout="this.src='RESİM 1 URL';" onmouseover="this.src='RESİM 2 URL';" alt="" src="RESİM 1 URL" /></a>


Mause duyarlı değişebilir buton


 <input type="submit" value="Buraya Tıkla" onmouseover="this.value='http://www.webkenti.net/'" onmouseout="this.value='Buraya Tıkla!'">



HTML Arka Fon ( Background ) Kodu


<span style="background-color: #f5f5f5;">



vs. umarım faydası olur.


Yorumlar

Yorum Gönder

🔺 YUKARI ÇIK 🔺