Tablo Yaratma

Tek Hücreli Bir Tablo

Hücre Yaratma

Tablo Görüntüsü	HTML Kodları
Hücredeki Veri	<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. ALIGN Tablonun 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. BGCOLOR Hücrenin zemin rengini belirler. WIDTH Tablonun 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ı
Hücre 1 Hücre 2 Hücre 3 Hücre 4	<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ı
A B C D E F	<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

Bir satır içindeki hücreler <TD> damgasının istenildiği kadar tekrarlanmasıyla yaratılır.

Görünüş	HTML Kodları
Hücre 1 Hücre 2	<TABLE BORDER CELLPADDING=2> < TR > <TD> Hücre 1 </TD> <TD> Hücre 2 </TD> < /TR > </TABLE>

Tabloda Satır Yaratma

Satır Yaratma

Tablodaki her satır için bir <TR> </TR> damgası yazılır.

Görünüş	HTML Kodları
Hücre 1 Hücre 2 Hücre 3 Hücre 4	<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ı
Kısaltma Açıklama HTML Hyper TextMarkup Language	<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ı
Bu hücre 2 satır geriyor A B C D	<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ı
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7	<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ı
a B c d e	<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ı
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7	<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

İki yada daha çok kolonun üstüne bir açıklama ya da başlık koyabiliriz. Bunu yapmak için ilgili hücreyi <TD COLSPAN=n > Bu hücre n kolonu gerer</TD> nitelemesi yapılır.

Örnek:

Görünüş	HTML Kodları
Veri 1 Bu hücre 2 kolon geriyor: Veri 2 Veri 3 Veri 4	<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ı
Item 1 Item 2 Item 3 Item 4 Item 5	<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>

Örnek:

Karma Örnekler

Kolon Başlıkları

Kolon Başlıkları

Görünüş	HTML Kodları
Head1 Head2 Head3 A B C D E F	<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ı
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>

Çoklu Kolon Başlıkları

Görünüş	HTML Kodları
Head1 Head2 Head 3 Head 4 Head 5 Head 6 A B C D E F G H	<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

Tablo hücrelerine zemin rengi atamak için BGCOLOR nitelemesi kullanılaır.

Bir hücreye zemin rengi verilirse, onun sağındaki bütün hücreler aynı zemin rengine boyanır.

Görüntü	HTML Kodları
Dil İçerik Pascal Unit Java Class	<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ı
Head1 Item 1 Item 2 Item 3 Head2 Item 4 Item 5 Item 6 Head3 Item 7 Item 8 Item 9	<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ı
Head1 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Head2 Item 9 Item 10 Item 3 Item 11	<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ı
Average Height Weight Gender Males 1.9 0.003 Females 1.7 0.002	<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ı
Item 1 Item 2 Item 3 Item 4 Item 5	<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ığı

Tablonun kenar kalınlığı <TABLE BORDER=n > nitelemesi ile belirlenir.

Görünüş	HTML Kodları
Item 1 Item 2 Item 3 Item 4	<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

Hücre içindeki yazı ile hücre kenarı arasındaki açıklık <TABLE BORDER CELLPADDING=10 > nitelemesi ile belirlenir.

Görünüş	HTML Kodları
A B C D E F	<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

Hücreler arasındaki açıklık <TABLE BORDER CELLSPACING="n" > nitelemesi ile belirlenir.

Görünüş	HTML Kodları
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>

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 isehü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ı
Pazartesi SAlı Çarşamba Hepsi ortalandı Cell 2 Hücre, cell 3 Sağa Yanaşık Ortalandı default,Sola dayalı	<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

Tablonun üstüne ya da altına tablo adını ya da açıklamasını yazmak için < CAPTION ALIGN=top(bottom)> Açıklama 6lt;CAPTION> nitelemesi kullanılır. Top tablonun üstüne, bottom ise altına yazar.

Görünüş	HTML Kodları
Üstte Tablo Adı Bahar Yaz Güz Bu hücre: Cell 1 Cell 2 Başka hücre: Cell 3	<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ı Bahar Yaz Güz Bu hücre: Cell 1 Cell 2 Başka hücre: Cell 3	<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ı
1 2 3 A B C D	<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ı
Width=50% Width=50% 3 4	<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ı
Item 1 Item 2 Item A Item B Item 4	<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ı
HEIGHT=15% Item 2 3 4	<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.

Müzik için burayı tıklayınız

© etudio etudio@etudio.biz Teknoloji Tanıtım Merkezi, Ankara, TR