Html Dersleri / Table Tagı Nasıl Kullanılır?
Có thể bạn quan tâm
| Girilecek Kod | Görevi |
| border = "de?er" | Tablonun kenarl???n?n varl???n? belirler. |
| width = "de?er" | Tablonun genişli?i belirlenir. |
| height = "de?er" | Tablonun yüksekliği belirlenir. |
| bgcolor = "renk" | Tablonun zemin rengi belirlenir. |
| cellpadding = "de?er" | Tablo gözeleri içindeki ö?elerin tablo kenarl?klar?na uzakl??? belirlenir. |
| cellspacing = "de?er" |
| Burada bir yazı var | Burası da başka bir göze. |
| Burada bir yazı var | Burası da başka bir göze. |
| İkinci satırın ilk sütunu | İkinci satırın ikinci sütunu |
| Burada bir yazı var | Burası da başka bir göze. |
| İkinci satırın ilk sütunu | İkinci satırın ikinci sütunu |
| Tablomuz iki sütunluk olmasına rağmen, burada iki sütunluk bir satır var. | |
| Burası iki satırlık bir sütun. | Burası ilk satır. |
| Burası da ikinci satır. | |
<TABLE> <TR><TD>nesneler</TD></TR> </TABLE>
TABLE'de Kullanılan Özellikler BORDER: Bu kenarlık boyutudur. Tablonun kenarlığını belirtmek için kullanılır. Eğer tablonuzda kenarlık olmasını istemiyorsanız 0 yazabilirsiniz. Örnek Kullanım: BORDER=0 CELLSPACING ve CELLPADDING: Cellpadding sütun genişliği, cellspacing satır genişliğidir. Bunlarında bulunmasını istemiyorsanız 0 yazabilirsiniz. Unutmayın bu sayılar büyüdükçe sütun pencerelerine düşen alan azalacaktır. BGCOLOR: Tablonuzun arkaplan rengidir. Hex kodları olarak (#FFFFFF gibi) ya da ingilizce olarak renkleri yazabilirsiniz. Burada değilde TD(Sütun) içinde kullanımı daha yaygındır. Örnek Kullanım: BGCOLOR=#33CCFF BACKGROUND: Tablonuzun arkaplan resmidir. Bu gif, jpg.. gibi herhangi bir resim olabilir. Tablonuzun arkaplanında görüntülenecektir. WIDTH: Tablonun yatay genişliğidir. Bunu piksel olarak belirtebilirsiniz. Kullanılan piksel deyimi 800x600 gibi ekran çözünürlüklerinde kullanılanın aynısıdır. Diğer bir kullanım yolu yüzde olarak belirtmektir. Örneğin WIDTH=40% şeklinde kullanırsak tablo tüm alanın %40'ını kullanacak demektir. HEIGHT: Tablonun yüksekliğidir. Eğer bu kullanılmazsa yükseklik nesnelerin boyuna göre ayarlanacaktır. Ama kullanılırsa piksel ya da yüzde olarak belirtilebilir.Aşağıdaki örnekte TABLE'nin özellikleri bir arada kullanılmıştır.
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=300 HEIGHT=100 BGCOLOR=#0000C0 BACKGROUND="ARKA.JPG"> <TR><TD>nesneler</TD></TR> </TABLE>TR(Satır)'de Kullanılan Özellikler
HEIGHT: Tüm tablo içinde bu satırın yüksekliğini belirleyebilirsiniz. Piksel ya da yüzde olarak. Eğer TABLE'de belirtilen yükseklik TR'lerin toplamından azsa buradakiler geçerli olacaktır. Bu nedenle TABLE'de Height kullanmaya gerek yok. Burada kullanın yeterli.. BGCOLOR ve BACKGROUND: Eğer TD(Sütun)'de bu kod kullanılmadıysa arkaplan veya resim belirlenebilir. <TABLE> <TR HEIGHT=100> <TD>nesneler</TD></TR> </TABLE>TD(Sütun)'de Kullanılan Özellikler
WIDTH: Sütunun genişliğinin belirtilmesidir. Eğer bir satırda birkaç sütun kullanacaksanız boyutlarını buradan ayarlayabilirsiniz. Piksel ya da yüzde olarak belirtebilirsiniz. Aşağıdaki örneği inceleyin. <TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1> <TR HEIGHT=100> <TD WIDTH=100>Hücre 1</TD> <TD WIDTH=150>Hücre 2</TD> <TD WIDTH=200>Hücre 3</TD> </TR> </TABLE>Hücre 1 100 px GenişliğindeHücre 2 150 px GenişliğindeHücre 3 200 px Genişliğinde
BGCOLOR ve BACKGROUND: Sütun içinde BGCOLOR ile bir renk ya da BACKGROUND ile bir resim kullanabilirsiniz. Arkaplanın nasıl görüneceğini belirtir. TABLE ve TR'de ne kullanılırsa kullanılsın, Her zaman en küçük birim olan TD'de bu özellik geçerlidir. ALIGN: Hücrenin hizasıdır. Sağa(RIGHT), Sola(LEFT) ya da Ortalanmış(CENTER) olabilir. Örnek Kullanım: ALIGN=CENTER VALIGN: Hücrenin dikey yöndeki hizasıdır. Yukarıdan(TOP), Aşağıdan(BOTTOM) ya da Ortalanmış(MIDDLE) olabilir. Örnek Kullanım: VALIGN=TOP CLASS: Formatlanmış bir yazı tipi, renk, kalınlık kullanacaksak CLASS komutunu kullanırız. Yalnız CLASS'den sonra mutlaka STYLE bölümünde tanıtılmış bir isim kullanırız (Style ve CSS konularına sonra bakacağız). Örnek Kullanım: CLASS=METIN ID: Linklerinden, yazı tiplerine, kalınlıklarına.. Her özelliğini TD'lere özel olarak belirttiğimiz şekilde kullanmamıza yarar. (Sonraki konularda işleyecez)Aşağıdaki örnekte 2 satır(TR) ve 2 sütun(TD) toplam 4 hücreden oluşmuş bir tablonun kodları ve görünümü var.
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100> <TR HEIGHT=50> <TD WIDTH=100>Hücre 1</TD> <TD WIDTH=100>Hücre 2</TD> </TR> <TR HEIGHT=50> <TD WIDTH=100>Hücre 3</TD> <TD WIDTH=100>Hücre 4</TD> </TR> </TABLE>Hücre 1Hücre 2Hücre 3Hücre 4
Sonraki örnekte COLSPAN kullanarak tablo odalarını birleştirdik.
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100> <TR HEIGHT=50> <TD COLSPAN=2 WIDTH=100>Hücre 1</TD> </TR> <TR HEIGHT=50> <TD WIDTH=100>Hücre 3</TD> <TD WIDTH=100>Hücre 4</TD> </TR> </TABLE>Hücre 1Hücre 2Hücre 3
Ve bir alttaki örnekte ROWSPAN kullanarak dikey yönde odaları birleştirdik. <TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100> <TR HEIGHT=50> <TD ROWSPAN=2 WIDTH=100>Hücre 1</TD> <TD WIDTH=100>Hücre 2</TD> </TR> <TR HEIGHT=50> <TD WIDTH=100>Hücre 3</TD> </TR> </TABLE>Hücre 1Hücre 2Hücre 3 < Dersin Sonlanması >
 | <table border="10" width="200" cellpadding="10" cellspacing="50" bordercolor="#ffff00"> <tr> <td bgcolor="#00ff00">Bir</td> <td align="right">?ki</td> </tr> <tr> <td>Uc</td><td align="right">Dort</td> </tr> <tr> <td>Bes</td> <td align="right">Alt?</td> </tr> <tr> <td colspan="2">Yedi</td> </tr> </table> |
| <table border="1"> <tr> <td bgcolor="#0bc5e1"><font color="#ffffff">Dersler</font></td> <td bgcolor="#66e10b"><font color="#ffffff">1. Sınav</font></td> <td bgcolor="#66e10b"><font color="#ffffff">2. Sınav</font></td> <td bgcolor="#66e10b"><font color="#ffffff">Ortalama</font></td> </tr> <tr> <td bgcolor="#0bc5e1"><font color="#ffffff">Matematik</font></td> <td>30</td> <td>40</td> <td>35</td> </tr> <tr> <td bgcolor="#0bc5e1"><font color="#ffffff">Fen</font></td> <td>70</td> <td>60</td> <td>65</td> </tr> <tr> <td bgcolor="#0bc5e1"><font color="#ffffff">Türkçe</font></td> <td>100</td> <td>50</td> <td>75</td> </tr> </table> |
|
Aşağıdakii örnekte 2 satır(TR) ve 2 sütun(TD) toplam 4 hücreden olu?mu? bir tablonun kodları ve görünümü var.
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100> <TR HEIGHT=50> <TD WIDTH=100>Hücre 1</TD> <TD WIDTH=100>Hücre 2</TD> </TR> <TR HEIGHT=50> <TD WIDTH=100>Hücre 3</TD> <TD WIDTH=100>Hücre 4</TD> </TR> </TABLE>Hücre 1Hücre 2Hücre 3Hücre 4
Sonraki örnekte COLSPAN kullanarak tablo odalar?n? birle?tirdik. <TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100> <TR HEIGHT=50> <TD COLSPAN=2 WIDTH=100>Hücre 1</TD> </TR> <TR HEIGHT=50> <TD WIDTH=100>Hücre 3</TD> <TD WIDTH=100>Hücre 4</TD> </TR> </TABLE>Hücre 1Hücre 2Hücre 3
Ve bir alttaki örnekte ROWSPAN kullanarak dikey yönde odalar? birle?tirdik.
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100> <TR HEIGHT=50> <TD ROWSPAN=2 WIDTH=100>Hücre 1</TD> <TD WIDTH=100>Hücre 2</TD> </TR> <TR HEIGHT=50> <TD WIDTH=100>Hücre 3</TD> </TR> </TABLE>| Hücre 1 | Hücre 2 |
| Hücre 3 |
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 Ebadı
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 |
"Rowspan" Kullanılması
| 1. hücre | 2. hücre | 3. hücre |
| 4. hücre | 5. hücre |
| 1. hücre | 2. hücre | 3. hücre | 4. hücre |
| 5. hücre | 6. hücre | 7. hücre |
"Colspan" Kullanılması
| 1. hücre | 2. hücre | |
| 3. hücre | 4. hücre | 5. hücre |
"Colspan" ve Başlıkların Birlikte Kullanılması
| Head1 | Head2 | ||
| A | B | C | D |
| E | F | G | H |
Yan Başlıkların Kullanımı
| 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 |
"Rowspan" ve Yan Başlıkların Birlikte Kullanılması
| 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 |
10 Birim Kenarı Olan Tablo
| 1. hücre | 2. hücre |
| 3. hücre | 4. hücre |
Cellpadding ve Cellspacing Belirteçlerinin Kullanılması
| A | B | C |
| D | E | F |
| A | B | C |
| D | E | F |
| A | B | C |
| D | E | F |
Tablo İçinde Birden Fazla Satır Kullanımı
| 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 |
Hücrenin Sağına, Soluna ve Ortasına Metin Yazmak
| Ocak | Subat | Mart |
| Hepsi ortada | 2. hücre | Diger hücre, 3. hücre |
| saga yanasik | merkezde | default, sola yanasik |
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ğıdakii örne?e bakarak tablo mant???n? anlayabilirsiniz.
| <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> |
| |
| background | Hücre içine resim koyar. | <table background="deneme.gif"> <tr> <td>Hücre</td> </tr> </table> |
| |
| border | Hücre etraf?na yerle?tirece?iniz çerçevenin kal?nl???n? belirler | <table border="5"> <tr> <td>Hücre</td> </tr> </table> |
| |
| bordercolor | Çerçeve rengini belirler | <table border="5" bordercolor="teal"> <tr> <td>Hücre</td> </tr> </table> |
| |
| bordercolorlight | Çerçevenin sol ve üst kenarlar?n?n rengini belirler | <table border="5" bordercolorlight="aqua"> <tr> <td>Hücre</td> </tr> </table> |
| |
| bordercolordark | Çerçevenin sa? ve alt kenarlar?n?n rengini belirler. | <table border="5" bordercolordark="blue"> <tr> <td>Hücre</td> </tr> </table> |
| |
| align | Hücrenin yatay konumu belirler | <table align="right"> <tr> <td>Hücre</td> </tr> </table> |
| |
| cellspacing | Hücre etraf?ndaki çerçevenin kal?nl???n? belirler. | <table border="1" cellspacing="10"> <tr> <td>Hücre</td> </tr> </table> |
| |
| 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> |
|
<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> |
| |||||||||
| background | <table> <tr><td background="deneme.gif">Hücre</td></tr> </table> |
| |||||||||
| align | <table border="1" width="100" height= "100"> <tr> <td align="right"> Hücre</td> </tr> </table> |
| |||||||||
| valign | <table border="1" width="100" height="100"> <tr><td valign="bottom">Hücre</td></tr> </table> |
| |||||||||
| bordercolor | <table border="1"> <tr> <td bordercolor="blue"> Hücre</td> </tr> </table> |
| |||||||||
| 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> |
| |||||||||
| 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> |
| |||||||||
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.
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ı |
| Hosting | ||
| 1.seçenek | 20 Mb | 100$/yıl |
| 2.seçenek | 50 Mb | 150$/yıl |
| SÜRÜCÜ C?NS? | HIZ | Cd-Dvd rom'lar | |||
| CD-ROM | 30X | 40X | 50X | 60X | |
| DVD | 10X | 12X | |||
| <table border="1" cellpadding="0" cellspacing="0"> <tr> <td>Logo</td> <td colspan="2">Baslik</td> <td>Tarih</td> </tr> <tr> <td height="100" rowspan="2">Sol Menü</td> <td colspan="2">İçerik1</td> <td rowspan="2">Sağ Menu</td> </tr> <tr> <td>İçerik2</td> <td>İçerik3</td> </tr> <tr> <td colspan="4" align="center">Sayfa Alt?</td> </tr> </table> |
| ||||||||||||||
| <table border="1" cellpadding="0" cellspacing="0"> <tr> <td>Logo</td> <td>Baslik</td> <td>Tarih</td> </tr> <tr> <td height="100">Sol</td> <td valign="top"> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="2">İçerik1</td> </tr> <tr> <td>İçerik2</td> <td>İçerik3</td> </tr> </table> </td> <td>Sa?</td> </tr> <tr> <td colspan="3" align="center">Sayfa Alt?</td> </tr> </table> |
| |||||||||||||
Kaynak
- www.belgeler.org,
- www.venus.gen.tr/programlama/html/tablolarla-calismak.html,
- www.kesdi.com/htmlders.php
- www.htmldersleri.org/htmlders10.htm
Từ khóa » Html Td Etiketi Kullanımı
-
HTML Td Etiketi | M5 Bilişim
-
Tablolar (Temel) - Zinzinzibidi
-
HTML »
- MyNotlar [PDF] Web Tasarımı HTML Etiketleri