Hemen Hemen Herşey
  Tablolar Anlatım
 

Paylaş: Paylaş
HTML dersleri, Site yapma, web tasarım dizayn

 

Tablo Hazirlama

Grafik destekli Web programlarinin tablo destegi ile çok çesitli
istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu
gösterilebilir. Tablo hazirlama basligi altindaki örnekler, her çesit
tablonun olusturulmasi için yeterli degildir. Kullanici, istegi
dogrultusunda bunlari gerçeklestirmelidir.

Ekranda tablo gösterirken, o an kullanilan pencerenin büyüklügüne
ve tablo içindeki metinin genisligine göre tablonun en ve boyu degisebilir.

Tablo, satir ve sütunlardan olustugu için her hücre ayri ayri tanimlanir.
Her satir ve sütun, kendi içinde baska satir ve sütunlari ihtiva edebilir.

Tablolara baslik, liste, paragraf, form, figür ve her formatta metin konabilir.

Örnegin,

 

   <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>
       

Yukaridaki örnek, asagidaki 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 alinir, digerleri
    saga yanasik olarak ekrana gelirler. Bunu engellemek
    için hücre için <ALIGN=.. belirteci, tüm tablo için
    <COLSPEC=.. belirteci kullanilir.

  • Her hücre bos olabilir.

  • Tablodaki her satirdaki kolon sayisinin esit olmadigi
    durumlarda kayip hücreler tablonun sagina yerlestirilir
    ve içleri bos kalir.

  • Tablodaki satir sayisi <tr belirteci tarafindan belirlenir.

  • <th> ve <tc> belirteçleri sadece <tr> belirteçleri arasinda olabilir.

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

 

Tablo ebadi

Tüm tablonun uzunlugu, en genis satirla belirlenir. Kelimeler
kisaltilmadigi için paragraflar <br> ile kesilmedikçe ekrana
gelirler. En kisa uzunluk da en genis kelime veya resmin
uzunlugu ile bagintilidir.

Align

Tablonun dik halinin nasil olacagini belirler.

Left

Metini ekranin soluna yanasik yazar.

 
Right
 

Metini ekranin sagina yanasik yazar.

 
Colspec
 

Sütunlarin ebadini ayarlar. Sütunlar soldan saga, bir büyük harf
ve onu izleyen bir sayi ile listelenirler (örnegin
<COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttigi yazilari L
harfi sola, R harfi saga alir. C harfi ortalamak için kullanilir.
Burada belirteç opsiyonlari mutlaka büyük harfle yazilir.

 
Border
 

Bu belirteç, tablo kenarlarinin ebadini kontrol etmeye yarar.
<table border=10>

 
Nowrap
 

Programin tablo içinde paragraflari otomatik olarak kesmemesi
için kullanilir.Böylece kullanici istedigi yerde <br> belirtecini kullanabilir.

 

Tablo Örnekleri

Temel bir 3X2 tablo

A

B

C

D

E

F

 <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>


        

"Rowspan" kullanilmasi

1. hücre

2. hücre

3. hücre

4. hücre

5. hücre

 <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>
        

 

1. hücre

2. hücre

3. hücre

4. hücre

5. hücre

6. hücre

7. 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>


        

"Colspan" kullanilmasi

1. hücre

2. hücre

3. hücre

4. hücre

5. hücre

 <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>


        

"Colspan" ve Basliklarin birlikte kullanilmasi

Head1

Head2

A

B

C

D

E

F

G

H

 <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>


        

Yan Basliklarin kullanimi

Baslik1

1. hücre

2. hücre

3. hücre

Baslik2

4. hücre

5. hücre

6. hücre

Baslik3

7. hücre

8. hücre

9. hücre

 <table border>
	<tr><th>Baslik1</th>
		<td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td></tr>
	<tr><th>Baslik2</th>
		<td>4. hücre</td> <td>5. hücre</td> <td>6.hücre</td></tr>
	<tr><th>Baslik3</th>
		<td>7. hücre</td> <td>8. hücre</td> <td>9. hücre</td></tr> </table>

        

"Rowspan" ve yan basliklarin birlikte kullanilmasi

Baslik1

1. hücre

2. hücre

3. hücre

4. hücre

5. hücre

6. hücre

7. hücre

8. hücre

Baslik2

9. hücre

10. hücre

11. hücre

12. hücre

 <table border>
	<tr><th rowspan=2>Baslik1</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>Baslik2</th>
	    <td>9. hücre</td> <td>10. hücre</td> <td>11. hücre</td> <td>12. hücre</td>
	</tr>
</table>


        

10 birim kenari olan tablo

1. hücre

2. hücre

3. hücre

4. hücre

 <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>


        

Cellpadding ve Cellspacing belirteçlerinin kullanilmasi

A

B

C

D

E

F

 <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>
        

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>
        

A

B

C

D

E

F

 <table border cellpadding=10 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>


        

Tablo içinde birden fazla satir kullanimi

Ocak

Subat

Mart

Bu 1. Hücre

2. Hücre

Diger hücre,
3. hücre

4. Hücre

ve iste bu
5. hücre

6. hücre

 <table border>
	<tr>
		<th>Ocak</th>
		<th>Subat</th>
		<th>Mart</th>
	</tr>
	<tr>
		<td>Bu 1. hücre</td>
	    	<td>2. hücre</td>
	    	<td>Diger hücre,<br>3. hücre</td>
	</tr>
	<tr>
		<td>Cell 4</td>
	    	<td>ve iste bu<br>5. hücre</td>
	    	<td>6. hücre</td>
	</tr>
</table>


        

Hücrenin sagina, soluna ve ortasina metin yazmak

Ocak

Subat

Mart

Hepsi ortada

2. hücre

Diger hücre,
3. hücre

saga yanasik

merkezde

default,
sola yanasik

 <table border>
	<tr>
	    <th>Ocak</th>
	    <th>Subat</th>
	    <th>Mart</th>
	</tr>
	<tr align=center>
	    <td>Hepsi ortada</td>
	    <td>2. Hücre</td>
	    <td>Diger hücre,<br>3. hücre</td>
	</tr>
	<tr>
	    <td align=right>saga yanasik</td>
	    <td align=center>merkezde</td>
	    <td>default,<br>sola yanasik</td>
	</tr>
</table>

        

 

MusTy KsknkLç
En Kaliteli Site Yapımcı Adayı

 
  Bugün 11 ziyaretçi burdaydı!
 
 
Bu sayfada dakika saniye misafirim oldunuz .....

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol