BİRSEY.COM

   

HTML

HTML__icon.gif (2655 bytes)

KONULAR

satir_arasi.gif (41 bytes)

HTML NEDİR  ?

satir_arasi.gif (41 bytes)

TEMEL UNSURLAR

satir_arasi.gif (41 bytes)

İLK SAYFAM

satir_arasi.gif (41 bytes)

METİN BİÇİMLENDİRME

satir_arasi.gif (41 bytes)

FONTLAR

satir_arasi.gif (41 bytes)

RENKLER

satir_arasi.gif (41 bytes)

RESİMLER

satir_arasi.gif (41 bytes)

BAGLANTILAR

satir_arasi.gif (41 bytes)

TABLO

satir_arasi.gif (41 bytes)

ÇERÇEVE

HTML DERSİ MUSTAFA OZKAN

                                   TABLO HAZIRLAMA

Grafik destekli Web programlarının tablo desteği ile çok çeşitli istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu gösterilebilir. Tablo hazırlama başlığı altındaki örnekler, her çeşit tablonun oluşturulması için yeterli değildir. Kullanıcı, isteği doğrultusunda bunları gerçekleştirmelidir.

Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki metinin genişliğine göre tablonun en ve boyu değişebilir.

Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir.

<TABLE>: Bu takıyı gören web tarayıcısı bundan sonra gelecek bilgilerin bir tablo yapımı için kulanilacanı anlar.

<TD>:Web tarayıcısına yeni bir hücre tanimlanmaya basladını haber verirbu takı </td> takısıyla kapanır 

<TR >:Web tarayıcısı bu takıyla bir satırın tanimlanacanı anlar ve </tr> takısıyla kapanır

Tablolara başlık, liste, paragraf, form, figür ve her formatta metin konabilir.

Örneğin,  

<TABLE BORDER>

<TR><TH ROWSPAN=2><TH COLSPAN=2>Average

<TH ROWSPAN=2>other<BR>category<TH>Misc

<TR><TH>height<TH>weight

<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003

<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002

</TABLE>

Yukarıdaki örnek, aşağıdaki gibi görünür:

  Average other
category		 Misc
height weight
males 1.9 0.003
females 1.7 0.002

Dikkat edilmesi gereken noktalar:

Default olarak, header hücreler merkeze alınır, diğerleri sağa yanaşık olarak ekrana gelirler. Bunu engellemek için hücre için <ALIGN=.. belirteci, tüm tablo için <COLSPEC=.. belirteci kullanılır.

Her hücre boş olabilir.

Tablodaki her satırdaki kolon sayısının eşit olmadığı durumlarda kayıp hücreler tablonun sağına yerleştirilir ve içleri boş kalır.

Tablodaki satır sayısı <tr belirteci tarafından belirlenir.

<th> ve <tc> belirteçleri sadece <tr> belirteçleri arasında olabilir.

Hücrelerin üstüste gelmesi istenmeyen sonuçlar yaratabilir.

Tablo ebadı :

Tüm tablonun uzunluğu, en geniş satırla belirlenir. Kelimeler kısaltılmadığı için paragraflar <br> ile kesilmedikçe ekrana gelirler. En kısa uzunluk da en geniş kelime veya resmin uzunluğu ile bağıntılıdır.

Align : Tablonun dik halinin nasıl olacağını belirler.

Left : Metini ekranın soluna yanaşık yazar.

Right : Metini ekranın sağına yanaşık yazar.

Colspec : Sütunların ebadını ayarlar. Sütunlar soldan sağa, bir büyük harf ve onu izleyen bir sayı ile listelenirler (örneğin <COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttiği yazıları L harfi sola, R harfi sağa alır. C harfi ortalamak için kullanılır. Burada belirteç opsiyonları mutlaka büyük harfle yazılır.

Border : Bu belirteç, tablo kenarlarının ebadını kontrol etmeye yarar.

<table border=10>

Nowrap : Programın tablo içinde paragrafları otomatik olarak kesmemesi için kullanılır.Böylece kullanıcı istediği yerde <br> belirtecini kullanabilir.

Tablo Örnekleri

Temel bir 3X2 tablo

<table border>

<tr> <td>A</td>  <td>B</td>   <td>C</td>      </tr>

<tr>   <td>D</td>   <td>E</td>     <td>F</td>    </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

A B C
D E F

"Rowspan" kullanılması (tablo 3x2)

<table border >

<tr>    <td>1. hücre</td>

<td rowspan=2>2. hücre</td>

<td>3. hücre</td>     </tr>

<tr>      <td>4. hücre</td> <td>5. hücre</td>     </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

1. hücre 2. hücre 3. hücre
4. hücre 5. hücre
<table border>

<tr>      <td rowspan=2>1. hücre</td>

<td>2. hücre</td> <td>3. hücre</td>     <td>4. hücre</td>    </tr>

<tr>      <td>5. hücre</td> <td>6. hücre</td> <td>7. hücre     </td>     </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür

1. hücre 2. hücre 3. hücre 4. hücre
5. hücre 6. hücre 7. hücre

"Colspan" kullanılması

<table border >

<tr>      <td>1. hücre</td>    <td colspan=2>2. hücre</td></tr>

<tr>      <td>3. hücre</td> <td>Item 4</td> <td>5. hücre</td></tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

1. hücre 2. hücre
3. hücre Item 4 5. hücre

"Colspan" ve Başlıkların birlikte kullanılması

<table border>

<tr>      <th colspan=2>Head1</th>      <th colspan=2>Head2</th>   </tr>

<tr>      <td>A</td>    <td>B</td>    <td>C</td>      <td>D</td>     </tr>

<tr>      <td>E</td>    <td>F</td>    <td>G</td>       <td>H</td>      </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

Head1 Head2
A B C D
E F G H

Yan Başlıkların kullanımı

<table border>

<tr><th>Başlık1</th>       <td>1. hücre</td>     <td>2. hücre</td>     <td>3. hücre</td></tr>

<tr><th>Başlık2</th>     <td>4. hücre</td>    <td>5. hücre</td>        <td>6.hücre</td></tr>

<tr><th>Başlık3</th>    <td>7. hücre</td>      <td>8. hücre</td>        <td>9. hücre</td></tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

Başlık1 1. hücre 2. hücre 3. hücre
Başlık2 4. hücre 5. hücre 6.hücre
Başlık3 7. hücre 8. hücre 9. hücre

"Rowspan" ve yan başlıkların birlikte kullanılması

<table >

<tr>   <th rowspan=2>Başlık1</th>   <td>1. hücre</td>     <td>2. hücre</td>  <td>3. hücre</td>    <td>4. hücre</td>

</tr>

<tr>     <td>5. hücre</td>      <td>6. hücre</td><td>7. hücre</td> <td>8. hücre</td>   </tr>

<tr>     <th>Başlık2</th>   <td>9. hücre</td>    <td>10. hücre</td>     <td>11. hücre</td>    <td>12. hücre</td>  </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

Başlık1 1. hücre 2. hücre 3. hücre 4. hücre
5. hücre 6. hücre 7. hücre 8. hücre
Başlık2 9. hücre 10. hücre 11. hücre 12. hücre

10 birim kenarı olan tablo

<table border=10>

<tr>      <td>1. hücre</td>      <td>2. hücre</td>      </tr>

<tr>     <td>3. hücre</td>      <td>4. hücre</td>        </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

1. hücre 2. hücre
3. hücre 4. hücre

Cellpadding ve Cellspacing belirteçlerinin kullanılması

<table border cellpadding=10 cellspacing=0>

<tr>      <td>A</td>    <td>B</td>      <td>C</td>      </tr>

<tr>      <td>D</td>     <td>E</td>     <td>F</td>      </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

A B C
D E F
<table border cellpadding=0 cellspacing=10>

<tr>         <td>A</td>        <td>B</td>      <td>C</td>    </tr>

<tr>         <td>D</td>       <td>E</td>       <td>F</td>     </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

       A       B     C    
        D      E      F    

 

Tablo içinde birden fazla satır kullanımı

<table border>

<tr>    <th>Ocak</th>    <th>Şubat</th>       <th>Mart</th>      </tr>

<tr>   <td>Bu 1. hücre</td>    <td>2. hücre</td>     <td>Diğer hücre,<br>3. hücre</td>    </tr>

<tr>  <td>Cell 4</td>    <td>ve işte bu<br>5. hücre</td>     <td>6. hücre</td>      </tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

Ocak Şubat Mart
Bu 1. hücre 2. hücre Diğer hücre,
3. hücre
Cell 4 ve işte bu
5. hücre		 6. hücre

Hücrenin sağına, soluna ve ortasına metin yazmak

<table border>

<tr>       <th>Ocak</th>       <th>Şubat</th>        <th>Mart</th>       </tr>

<tr align=center>    <td>Hepsi ortada</td>    <td>2. Hücre</td>     <td>Diğer hücre,<br>3. hücre</td>     </tr>

<tr>     <td align=right>sağa yanaşık</td>    <td align=center>merkezde</td>      <td>default,<br>sola yanaşık</td></tr>

</table>

Yukarıdaki örnek, aşağıdaki gibi görünür:

Ocak Şubat Mart
Hepsi ortada 2. Hücre Diğer hücre,
3. hücre
sağa yanaşık merkezde default,
sola yanaşık

<-geri                                                                                                                                  ileri->

©2001 BİRSEY.COM