- Katılım
- 3 yıl 8 ay 3 gün
- Mesajlar
- 25,264
- Tepkime puanı
- 8,715
- Yaş
- 35
- Konum
- Memed' Home
- İsim
- CHRS
- Memleket
- Neresi?
- Meslek
- IzdırapÇI
- Cinsiyet
- Medeni Hal
HTML Tablosu Nedir?
Bir web sayfasındaki tablo, günlük yaşamda kullandığımız tabloların özeliklerini taşıyan bir yapıdır.Bir tablo tablo adı, tablo satırları ve satırlar içindeki hücrelerden (data cells) oluşur. Ayrıca, istenirse, tablo kenarları (çerçeve) kalınlığı belirlenebilir, hücreler arası açıklık ayarlanabilir. Hücrelere yazılan yazıların hücre içindeki konumları belirlenebilir. Bu konumlar yatay doğrultuda ortada, sağa yanaşık, sola yanaşık yapılabilir. Düşey doğrultuda ise ortada, tabanda ya da tepede olabilir. Hücre zemini ve yazıların renkleri belirlenebilir. Font türü seçilebilir.Hücrelere resim ya da ses konulabilir. Hücreler içinde href yapılabilir.
Aşağıda bu işlerin nasıl yapıldığı açıklanacaktır.
Bir Tabloyu Belirleyen Damgalar
<TABLE> ... </TABLE>Tablo başlangıç ve bitimini belirler.<TR> ... </TR>Tabloda bir satırın başlangıç ve bitimini belirler.<TD> ... </TD>Bir satırda bir hücrenin başlangıç ve bitimini belirler. Daima <TR> ... </TR> içinde yer alır.<TH> ... </TH>Bir satırda bir kolonun başlığını belirler; <TD> ... </TD> nin rolünü oynar, ancak yazılar koyu yazılır.<CAPTION> ... </CAPTION>Tablo adını belirler. Tablo adının nereye konuşlanacağı belirlenebilir. Aşağıdaki örneklerde görülecektir.Tek Hücreli Bir Tablo
| Hücre Yaratma |
Tablo Görüntüsü | HTML Kodları | |
|---|---|---|
| <TABLE BORDER CELLPADDING=2 > <TR> <TD>Hücredeki Veri</TD> </TR> </TABLE> |
Tabloda Nitelemeler
Bir tablonun görünüşünü istenilen biçime sokmak için kullanılan parametrelerdir. Kullanılışı
<TABLE Niteleme="değer">
biçimindedir. Nitelemeler aşağıdakilerden birisi ya da birkaçı olabilir.
UNITS=Birimler en, göreceli (relative) ya da pixel cinsinden verilebilir. Default cinsi pixel' dir.ALIGNTablonun yatay konuma göre yerini ayarlar. < TABLE ALIGN="left"> nitelemesi tabloyu sola dayalı yapar. Bu niteleme default halidir; align nitelemesi yapılmazsa bu hal oluşur. ALIGN="right" nitelemesi tabloyu sağa dayar. ALIGN="center" nitelemesi tabloyu ortalar.BORDER<TABLE BORDER="5"> biçiminde yazılır. Tablonun ve hücrelerinin kenar (çerçeve) kalınlığını belirler. Kalınlık pixel cinsinden yazılır. Değer atanmazsa, çoğu browser, kalınlığı 2 pixel olarak alır. Border nitelemesi yapılmazsa, tablo çerçevesiz görünür.CELLPADDING<TABLE BORDER CELLPADDING="2"> biçiminde yazılır. Hücre kenarı ile hücre içindeki yazı arasındaki açıklığı belirler.CELLSPACING<TABLE BORDER CELLSPACING="3"> biçiminde yazılır. Hücrelar arasındaki açıklığı belrler.BGCOLORHücrenin zemin rengini belirler.WIDTHTablonun genişliğini belirler. Örneğin,
WIDTH="80%" nitelemesi, tablo genişliğini ekranın 80% oranına ayarlar.
WIDTH="200" nitelemesi, tablo genişlğini 200 pixel yapar.2 satır ve 2 sütunlu bir tablo
| 2 x 2 Tablo |
Görünüş | HTML Kodları | ||||
|---|---|---|---|---|---|
| <table border align="center" BGCOLOR="#00F0F0"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> <tr> <td>Hücre 3</td> <td>Hücre 4</td> </tr> </table> |
2 satırlı ve 3 sütunlu bir tablo
| 2 x 3 Tablo |
Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE BORDER ALIGN="center" BGCOLOR="#00F0F0"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> |
Bir satıra hücreler yerleştirme
 Satırda hücreler |
Görünüş | HTML Kodları | ||
|---|---|---|---|
| <TABLE BORDER CELLPADDING=2> < TR > <TD> Hücre 1 </TD> <TD> Hücre 2 </TD> < /TR > </TABLE> |
Tabloda Satır Yaratma
| Satır Yaratma |
Görünüş | HTML Kodları | ||||
|---|---|---|---|---|---|
| <TABLE BORDER CELLPADDING=2> <TR> <TD> Hücre 1 </TD> <TD> Hücre 2 </TD> </TR> <TR> <TD> Hücre 3 </TD> <TD> Hücre 4 </TD> </TR> </TABLE> |
Kolonlara (sütunlara) Başlık Yazma
| Kolon Başlıkları |
Bir kolona (sütun) başlık yazmak için, o kolonun en üst hücresi <TD> yerine <TH> damgası ile işaretlenir. Bunun <TD> damgasından tek farkı, hücre içini koyu yazmasıdır.
Örnek:
Görünüş | HTML Kodları | ||||
|---|---|---|---|---|---|
| <TABLE BORDER CELLPADDING=2> <TR> <TH ALIGN=LEFT> Kısaltma</TH> <TH ALIGN=LEFT> Açıklama </TH> </TR> <TR> <TD> HTML</TD> <TD> Hyper Text<BR> Markup Language</TD> </TR> </TABLE> |
Kolon ve Satır Germe
Satır Germe
| Satır Germe |
Bazan bir hücredeki veri, kendisinin sağında kalan iki ya da daha çok satırın soluna bir açıklama ya da yan başlık olarak konulabilir. Bunun için, istenen hücreye <TD ROWSPAN=n >Hücre içi veri</TD> nitelemesi yapılır. Burada n gerilecek satır sayısıdır. Aşağıdaki örnek bunun nasıl olduğunu göstermektedir.
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE BORDER > <tr> <td ROWSPAN="2">Bu hücre 2 satır geriyor</td> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> |
Örnek:
Satır Germe
| Görünüş | HTML Kodları | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER align="center"> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE> |
Tablo içindeki bir hücre de satır gerebilir
Örnek:
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE BORDER> <TR> <TD>a</TD> <TD ROWSPAN=2>B</TD> <TD>c</TD> </TR> <TR> <TD>d</TD> <TD>e</TD> </TR> </TABLE> |
Örnek:
| Görünüş | HTML Kodları | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER align="center"> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE> |
Kolon Germe
| Kolon Germe |
Örnek:
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <table BORDER > <tr> <td>Veri 1</td> <td COLSPAN="2"> Bu hücre 2 kolon geriyor </td> </tr> <tr> <td>Veri 2</td> <td>Veri 3</td> <td>Veri 4</td> </tr> </table> |
Örnek:
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE> |
| Karma Örnekler |
Kolon Başlıkları
| Kolon Başlıkları |
| Görünüş | HTML Kodları | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER> <TR> <TH> Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR> <TR> <TD>A</TD> <TD> B </TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> |
Birden Çok Kolona Başlık Yazma
| Görünüş | HTML Kodları | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <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> |
Çoklu Kolon Başlıkları
| Görünüş | HTML Kodları | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER BGCOLOR="00f0f0"> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TH>Head 3</TH> <TH>Head 4</TH> <TH>Head 5</TH> <TH>Head 6</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> |
Tablo Hücrelerine Zemin Rengi Atama
| Tablo hücrelerini boyama |
Bir hücreye zemin rengi verilirse, onun sağındaki bütün hücreler aynı zemin rengine boyanır.
Görüntü | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE CELLPADDING=2> <TR> <TH ALIGN=LEFT BGCOLOR="#FFFFD0">Dil</TH> <TH ALIGN=LEFT BGCOLOR="#FFFFD0">İçerik</TH> </TR> <TR> <TD BGCOLOR="#FFD0FF"> Pascal</TD> <TD BGCOLOR="#FFD0FF"> Unit</TD> <TR> <TR> <TD BGCOLOR="#D0FFFF"> Java</TD> <TD BGCOLOR="#D0FFFF"> Class</TD> <TR> </TABLE> |
Yan Başlıklar (Satır Başlıkları)
| Görünüş | HTML Kodları | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER> <TR> <TH>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR> <TR> <TH>Head2</TH> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR> <TR> <TH>Head3</TH> <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD> </TR> </TABLE> |
Satır Geren Yan Başlıklar
| Görünüş | HTML Kodları | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER BGCOLOR="00f0f0"> TR> <TH ROWSPAN=2>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD> </TR> <TR> <TH>Head2</TH> <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD> </TR> </TABLE> |
Karma Başlıklar
| Görünüş | HTML Kodları | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER width="100%" > <TR><TD> <TD><TH ROWSPAN=2></TH> <TH COLSPAN=2>Average</TH></TD> </TR> <TR> <TD><TH>Height</TH> <TH>Weight</TH></TD> </TR> <TR> <TH ROWSPAN=2>Gender</TH> <TH>Males</TH><TD>1.9</TD> <TD>0.003</TD> </TR> <TR> <TH>Females</TH><TD>1.7</TD> <TD>0.002</TD> </TR> </TABLE> |
Kenarsız Tablo Yaratma
| Kenarsız Tablo |
BORDER nitelemesi yazılmazsa, kenarsız tablo yaratılır.
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE BGCOLOR="#00f0f0"> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE> |
Kenar Kalınlığını Belirleme
| Kenar Kalınlığı |
| Görünüş | HTML Kodları | ||||
|---|---|---|---|---|---|
| <TABLE BORDER=10 bgcolor="#00f0f0"> <TR> <TD>Item 1</TD> <TD> Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> </TR> </TABLE> |
Hücre Kenarına Uzaklık
| CELLPADDING |
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE BORDER CELLPADDING="10" > <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> |
Hücreler Arası Açıklık
| CELLSPACING |
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <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> |
Hücre Genişliği
| CELL-Width |
Aksi istenmezse, tabloda hücre genişlikleri içine yazılanlara bağlı olarak kendiliğinden ayarlanır. Gerekirse, bir hücredeki uzun yazıları satırlara ayırır. Satırlara bölünmesi istenmeyen sözcükler arasına &nbs; (bölmeyin-non breaking space) nitelemesi yapılır.
Ancak, büyük tablolarda &nbs; nitelemesini dikkatli kullanmak gerekir. Ekrana sığmayacak genişlikte tablolar yaratmamak gerekir.
| Pazartesi | Salı | Çarşamba |
|---|---|---|
| Bu geniş bir hücredir | Hücre 2 | Bu daha, dar hücredir |
| Cell 4 | Bu ise hücre 5 | Cell 6 |
Bunu yazdıran HTML kodları şöyledir:
<TABLE BORDER width="100%">
<TR>
<TABLE BORDER BGCOLOR="#00f0f0">
<TR>
<TH>Pazartesi</TH>
<TH>Salı</TH>
<TH>Çarşamba</TH>
</TR>
<TR>
<TD>Bu geniş bir hücredir</TD>
<TD>Hücre 2</TD>
<TD>Bu daha,<br> dar hücredir</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>Bu ise<br>hücre 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
Sola-sağa Yanaşık Ya da Ortada Yazma
| DATA-Align |
Bir tabloyu bütünüyle ortalamak, sağa dayalı ya da sola dayalı görüntülemek için TABLE ALIGN=" " nitelemesini yaparız.
Bir hücrenin ya da bir satırdaki bütün hücrelerin içeriğini yatay ve düşey doğrultuda istenen yere konuşlandırmak mümkündür. Bunun için şu nitelemeleri kullanırız:
<TR ALIGN=center>Satırdaki bütün hücrelerin içeriği yatay doğrultuda hücre içinde ortalanır<TR ALIGN=right>Satırdaki bütün hücrelerin içeriği yatay doğrultuda hücre içinde sağa dayanır<TR ALIGN=left >Satırdaki bütün hücrelerin içeriği yatay doğrultuda hücre içinde sola dayanır. Bu default haldir; yani ALIGN nitelemesi yapılmadığında oluşan haldir.<TD ALIGN=center >Hücrenin içeriği yatay doğrultuda hücre içinde ortalanır< TD ALIGN=right >Hücrenin içeriği yatay doğrultuda hücre içinde sağa dayanır< TD ALIGN=left >Hücrenin içeriği yatay doğrultuda hücre içinde sola dayanır.
| Görünüş | HTML Kodları | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER> <TR> <TH>Pazartesi</TH> <TH>Salı</TH> <TH>Çarşamba</TH> </TR> <TR VALIGN=top> <TD>Hepsi ortalandı</TD> <TD>Bu hücre<br>Cell 2</TD> <TD>Cell 3</TD> </TR> <TR> <TD VALIGN=top>Tavana (top) ayarlı</TD> <TD VALIGN=bottom>Tabana (bottom) ayarlı</TD> <TD>default ayar,<br>ortalı</TD> </TR> </TABLE> |
Tablo Adı
| CAPTION |
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
Üstte Tablo Adı
| <TABLE BORDER BGCOLOR="#00f0f0"> <CAPTION ALIGN=top>Üstte Tablo Adı</CAPTION> <TR> <TH>Bahar</TH> <TH>Yaz</TH> <TH>Güz</TH> </TR> <TR> <TD>Bu hücre: Cell 1</TD> <TD>Cell 2</TD> <TD>Başka hücre:<br> Cell 3</TD> </TR> </TABLE> |
Tablo Adını Alta Yazma
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
Altta Tablo Adı
| <TABLE BORDER BGCOLOR="#00f0f0"> <CAPTION ALIGN=bottom>Üstte Tablo Adı</CAPTION> <TR> <TH>Bahar</TH> <TH>Yaz</TH> <TH>Güz</TH> </TR> <TR> <TD>Bu hücre: Cell 1</TD> <TD>Cell 2</TD> <TD>Başka hücre:<br> Cell 3</TD> </TR> </TABLE> |
İç-içe Tablolar
| Görünüş | HTML Kodları | |||||||
|---|---|---|---|---|---|---|---|---|
| <TABLE BORDER BGCOLOR="#00f0f0"> <TR> <!-- ROW 1, TABLE 1 --> <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR> <!-- ROW 1, TABLE 2 --> <TD>A</TD> <TD>B</TD> </TR> <TR> <!-- ROW 2, TABLE 2 --> <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TABLE> |
Tablo Genişliği
| Width |
| Görünüş | HTML Kodları | ||||
|---|---|---|---|---|---|
| <TABLE BORDER WIDTH="50%"> <TR> <TD>Width=50%</TD> <TD>Width=50%</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE> |
Tablo Genişliği ve İç-içe Tablolar
| Görünüş | HTML Kodları | ||||||
|---|---|---|---|---|---|---|---|
| <TABLE BORDER WIDTH="50%"> <TR> <TD>Item 1</TD> <TD>Item 2</TD> </TR> <TR> <TD> <TABLE BORDER WIDTH=100%> <TR><TD>Item A</TD> <TD>Item B</TD> </TR> </TABLE> </TD> <TD>Item 4</TD> </TR> </TABLE> |
Hücre Yüksekliği
| Height |
| Görünüş | HTML Kodları | ||||
|---|---|---|---|---|---|
| <TABLE BORDER WIDTH="50%" HEIGHT="15%"> <TR> <TD>HEIGHT=15%</TD> <TD>Item 2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE> |
Ses Yaratma
| Ses |
Web sayfalarına ses clipleri ve arka-plan müzikleri konulabilir.
<BGSOUND ...>Web sayfası açıldığında ses cliplerini ya da arka-plan müzikleri çalar. Değişik ses formatları kullanılabilir:
(.WAV , .AU , .MIDI ya da .MID format).
Bunun tam HTML kodu şöyledir:
<BGSOUND SRC="start.wav">Web sayfası açılınca, arka planda, start.wav adıyla kayıtlı müzik parçasını çalar.
<EMBED SRC="clouds.mid" HIDDEN="True">Yukarıdaki deyimin yaptığını aynen yapar. Her iki halde de, çalınacak müzik parçası web dökümanının bulunduğu dizinde olmalıdır. Aksi halde, göreceli ya da mutlak URL adresleri yazılmalıdır.
<a href="start.wav"> Müzik</a >
Müzik parçası istendiğinde çalsın istiyorsak,bu deyimi yazarız. Bu durumda, müzik parçası tıklayınca çalar.
