HTML Nedir Çerçeve Kullanma Form Oluşturma HTML Web Sayfası Yapma Kayan Yazı Oluşturma
Link Verme Liste Oluşturma Meta Tagları Metin Biçimlendirme Özel Karakterler
Renkler Web Sayfasına Resim Ekleme Web Sayfasına Efekt Verme Web Sayfasına Muzik Ekleme Tablo Oluşturma
Türkçe Karakter Sorunu

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;
hücre
<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>
hücre1 hücre2
<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>
hücre1
hücre2
<table border="1">
<tr>
<td>hücre1</td>
<tr>
</tr>
<td>hücre2</td>
</tr>
</table>
hücre1 hücre2
hücre3 hücre4
<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</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

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:
1.satır 1.sütun 1.satır 2.sütun
2.satır 1.sütun 2.satır 2.sütun
3.satır 1.sütun 3.satır 2.sütun

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:
1.satır 1.sütun 1.satır 2.sütun
2.satır 1.sütun 2.satır 2.sütun
3.satır 1.sütun 3.satır 2.sütun

Colspan ve Rowspan kullanımı ile ilgili örnekler
123
45
6789
<table border="1" cellpadding="12">
<tr><td colspan="2">1</td><td>2</td><td>3</td></tr>
<tr><td colspan="3">4</td><td>5</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td></tr>
</table>

 

 

12 63
457
89
<table border="1" cellpadding="12">
<tr><td>1</td><td>2</td>
<td rowspan="3">6</td><td>3</td></tr>
<tr><td rowspan="2">4</td><td>5</td><td>7</td></tr>
<tr><td>8</td><td>9</td></tr>
</table>

HTML Nedir Çerçeve Kullanma Form Oluşturma HTML Web Sayfası Yapma Kayan Yazı Oluşturma
Link Verme Liste Oluşturma Meta Tagları Metin Biçimlendirme Özel Karakterler
Renkler Web Sayfasına Resim Ekleme Web Sayfasına Efekt Verme Web Sayfasına Muzik Ekleme Tablo Oluşturma
Türkçe Karakter Sorunu