Üye Kayıt Üye Giriş

KATEGORİLER

Tablolar


Tablolar

 

10.TABLOLAR(TABLE)

Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir sayfa tasarlamak için tablolara hakim olmak gereklidir.

Tablolar <table>...</table> etiketleri arasına yazılır.<tr> etiketi bir yatay sıra oluşturulur, bu yatay sıra istenilen sayıda <td> etiketiyle hücrelere bölünür.Aşağıdaki örneğe bakarak tablo mantığını anlayabilirsiniz.

< table> Hücre1

Hücre2

Hücre3

Hücre4

Hücre5

Hücre6

<TD< td>

     

 <table border="1">

<tr>
 
 <td >Hücre1</td>
 <td >Hücre2</td>
 <td >Hücre3</td>
 
</tr>
<tr>
 <td>Hücre4</td>
 <td>Hücre5</td>
 <td>Hücre6</td>
</tr>

</table> 

 

10/1. <TABLE> ETİKETİ VE PARAMETRELERİ

Burada width ve height parametrelerini aynen daha önce kullandığınız gibi kullanabilirsiniz...

bgcolor

Hücrenin içinin rengini belirler.

<table>
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

background

Hücre içine resim koyar.

<table background="deneme.gif">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

border

Hücre etrafına yerleştireceğiniz çerçevenin kalınlığını belirler

<table border="5">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

bordercolor

Çerçeve rengini belirler

<table border="5" bordercolor="teal">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

bordercolorlight

Çerçevenin sol ve üst kenarlarının rengini belirler

<table border="5" bordercolorlight="aqua">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

bordercolordark

Çerçevenin sağ ve alt kenarlarının rengini belirler.

<table border="5" bordercolordark="blue">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

align

Hücrenin yatay konumu belirler

<table align="right">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

cellspacing

Hücre etrafındaki çerçevenin kalınlığını belirler.

<table border="1" cellspacing="10">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

cellpadding

Hücre içindeki elemanların (metin, resim, vs.) çerçeveden uzaklığını belirler.

<table border="1" cellpadding="10">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

 

10/2. <TR> ve <TD> ETİKETLERİ

<TR> etiketi, üzerine <td> etiketiyle hücreler döşenmesi için yatay bir sıra,bir platform oluşturur.Dolayısıyla bu etiketin parametreleri herhangi bir işimize yaramaz. Tablo içindeki bütün düzenlemeleri aşağıda parametreleri verilen <td> etiketiyle yapabiliriz.

bgcolor

<table>
<tr>
<td bgcolor="teal">
Hücre</td>
</tr>
</table>

Hücre

 

background

<table>
<tr>
<td background="deneme.gif">
Hücre</td>
</tr>
</table>

Hücre

 

align

<table border="1" width="100" height= "100">
<tr>
<td align="right">
Hücre</td>
</tr>
</table>

Hücre

 

valign

<table border="1" width="100" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>

Hücre

 

bordercolor

<table border="1">
<tr>
<td bordercolor="blue">
Hücre</td>
</tr>
</table>

Hücre

 

colspan

<table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="2">4</td><td>5</td>
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table>

1

2

3

4

5

6

7

8

 

rowspan

<table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table>

1

2

3

4

5

6

7

8

 

Yukarıdaki parametrelerden colspan yatay eksen üzerindeki iki hücreyi birleştirmek için kullanılır. Bu parametreye değer olarak birleşecek hücre sayısı verilir. Rowspan ise bu işi dikey eksen üzerindeki iki hücre için yapar. diğer parametrelerin kullanımlarını zaten başka etiketler üzerinde gördük.

 10/3. TABLO UYGULAMALARI

Bu uygulamaları önce kendiniz yapmaya çalışın, eğer takılırsanız kodlarından faydalanın.

Uygulama

Küçük bir tablo uygulaması

 

<table>
<tr>
 <td width="300" bgcolor="teal" align="center">Uygulama</td>
</tr>
<tr>
 <td height="200" bgcolor="silver" align="center">Küçük bir tablo uygulaması</td>
</tr>
</table>

 

Hosting

1.seçenek

20 Mb

100$/yıl

2.seçenek

50 Mb

150$/yıl

 

<table cellpadding="10" border=1>
<tr>
 <td colspan="3" align="middle" bgcolor="red" >Hosting</td>
 
</tr>
<tr>
 <td bgcolor="teal">1.seçenek</td>
 <td align="middle">20 Mb</td>
 <td align="middle">100$/yıl </td>
</tr>
<tr>
 <td bgcolor="teal">2.seçenek</td>
 <td align="middle">50 Mb</td>
 <td align="middle"> 150$/yıl</td>
</tr>
</table>

SÜRÜCÜ CİNSİ

HIZ

Cd-Dvd rom'lar

CD-ROM

30X

40X

50X

60X

DVD

10X

12X

 

 

 

 

 

 

 

<table BORDER="1" bgcolor="silver" bordercolor="black">
<tr>
 <td bgcolor="red">SÜRÜCÜ CİNSİ</td>
 <td bgcolor="red" colspan="4" align="center">HIZ</td>
 <td bgcolor="teal" color="white" rowspan="3"> Cd-Dvd rom'lar</td>
</tr>
<tr>
 <td>CD-ROM</td>
 <td>30X</td>
 <td>40X</td>
 <td>50X</td>
 <td>60X</td>
</tr>
<tr>
 <td>DVD</td>
 
 <td colspan="2">10X</td>
 <td colspan="2">12X</td>
 
</tr>
</table>
Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

tablolar