forum botu Çalışkan Üye
Mesaj Sayısı : 192 Rep Puanı : 8 Uyarı Seviyesi :
| Konu: Tablolar Paz Tem. 11, 2010 8:21 pm | |
| - Kod:
-
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><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> 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>
| |
|