Hancı Eğitim

TABLOLAR

Genel kullanımı;
Öncelikle <table>...</table> etiketlerini yazıyoruz,. <tr> etiketi
ile satır açıyoruz; <td> etiketi sütun açıyoruz.



<table>

<tr>

<td> … </td>

</tr>

</tablo>



Örnekler;

<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



A.) 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>



Tarayıcınızda şöyle gözükecektir:

B.) 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>



Tarayıcınızda şöyle gözükecektir:

Colspan ve Rowspan kullanımı ile ilgili örnekler