tablo Etiketleri

 

Web sayfalarında tablolar; metinleri, resimleri ya da diğer nesneleri istediğimiz yerde göstermek amacıyla yani istenilen düzeni oluşturmak amacıyla kullanılabilir. Bu bakımdan tablolar, ister görünsün ister görünmesin web sayfamızın ayrılmaz önemli parçalarındandır.

 

<TABLE> Hazırlamış olduğunuz web sayfanıza tablo eklemek için kullanılan etikettir. Bir tablo <Table> etiketi ile başlayıp </Table> etiketi ile biter. Tablolar satır ve sütunlardan oluşur. Satırların ve sütunların kesiştikleri kutuya “hücre” adı verilir.

 

<TR> Tabloda satırı oluşturmak için kullanılır.

<TD> Tabloda hücreyi oluşturmak için kullanılır.

 

Html Kodu
 Ekran çıktısı

 

<table width="200" border="1" >

<tr> <td>a hücresi</td> <td>b hücresi</td></tr>

<tr> <td>c hücresi</td> <td>d hücresi</td></tr>

</table>

 
a hücresi b hücresi
c hücresi d hücresi

 

 

Table etiketinde kullanılan parametrelerden önemli olanları aşağıdaki tabloda listelenmiştir.

 

Parametre Açıklama
Border: Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez.
Bgcolor: Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için kullanılır.
Background: Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır.
Width: Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. <table width=”200”> Tablo genişliğini belirlemek için kullanılır. <td width=”200”> Hücre genişliğini belirlemek için kullanılır.
Height: Tablonun pixel cinsinden yüksekliğini belirlemek için kullanılır. <table height=”200”> Tablo genişliğini belirlemek için kullanılır. <td height=”200”> Hücre genişliğini belirlemek için kullanılır.
align: Hücre içinde yatay hizalama yapar. left, center, right
valign Hücre içinde düşey hizalama yapar. top(üst), middle(orta), bottom(alt)
Colspan: Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.
Rowspan: Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır.
Cellspacing: Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.
Cellpadding: Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.

 

Örnek:

 

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>

 

 

 

Bordercolor Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.Bgcolor Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için kullanılır.

 

hücre1
hücre2
hücre3
hücre4

<table border="1" cellpadding="7">
<tr>
<td bgcolor="#ff0000">hücre1</td>
</tr>
<tr>
<td bgcolor="#00ff00">hücre2</td>
</tr>
<tr>
<td bgcolor="#0000ff">hücre3</td>
</tr>
<tr>
<td bgcolor="#ffff00">hücre4</td>
</tr>
</table>
table table kod

 

 

 

Hücreleri Birleştirme

 

<td colspan=".." rowspan="..">
Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.

 

 

 

 

 

 

a
c d

 

 

 

<table width="100" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="27" colspan="2">a</td>
</tr>
<tr>
<td height="28">c</td>
<td>d</td>
</tr>
</table>

 

ac b
d
e f

 

<table width="100" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">ac</td>
<td height="27">b</td>
</tr>
<tr>
<td height="28">d</td>
</tr>
<tr>
<td height="28">e</td>
<td>f</td>
</tr>
</table>

 

a
d e f
g

 

<table width="100" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">a</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td colspan="3">g</td>
</tr>
</table>

 

 

AB CD
EFH
JL

 

 

<table border="1" cellpadding="12">
<tr><td>A</td><td>B</td>
<td rowspan="3">C</td><td>D</td></tr>
<tr><td rowspan="2">E</td><td>F</td><td>H</td></tr>
<tr><td>J</td><td>L</td></tr>
</table>

 

 

ACD
EH
IJKL

 

 

<table border="1" cellpadding="12">
<tr><td colspan="2">A</td><td>C</td><td>D</td></tr>
<tr><td colspan="3">E</td><td>H</td></tr>
<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>
</table>

 

 

 

 

 

 

 

Web hosting by Somee.com