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