Anasayafa


Haber bülteni üyeliği



Ziyaret Bilgileri

[ Cum, 29 Mar 2024 ]
Toplam 6 ziyaret
5 benzersiz ziyaretçi

html » 9. Ders: HTML Tabloları

HTML Tabloları

HTML ile tablo hazırlayabiliriz.

Örnekler
Tablolar

<html>
<body>

<p>Her tablo bir table komutu ile baslar. Her satir bir tr komutu ile baslar. Her tablo verisi td komutu ile baslar</p>

<h3> 1 satir 1 sutun </h3>
<table border="1">
<tr><td>100</td></tr>
</table><br>

<h3> 1 satir 3 sutun </h3>
<table border="1">
<tr><td>100</td><td>200</td><td>300</td></tr>
</table><br>

<h3> 3 satir 3 sutun </h3>
<table border="1">
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>200</td><td>400</td><td>600</td></tr>
<tr><td>300</td><td>800</td><td>900</td></tr>
</table><br>

</body>
</html>

tablo

Tablo Sınırları
<html>
<body>

<h3> 1 satir 3 sutun (kalin sinirli) </h3>
<table border="9">
<tr><td>100</td><td>200</td><td>300</td></tr>
</table><br>

<h3> 3 satir 3 sutun (baya kalin sinirli) </h3>
<table border="16">
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>200</td><td>400</td><td>600</td></tr>
<tr><td>300</td><td>800</td><td>900</td></tr>
</table><br>

</body>
</html>

tablos

Tablolar
Tabloları <table> komutu ile başlatırız. Satırları ise <tr> komutu ile başlatırız. Bir satır içerisine veri eklemek <td> komutunu kullanırız. Bir satıra bir sütun daha eklemek için <td> komutu ile veri eklemeye devam ederiz. Bir <tr> komutu içerisinde <td> ile başlayıp </td> ile biten her aralık bir sütuna eşittir. Yeni satır içinse <table> komutu içinde yeni bir <tr> - </tr> aralığı açmak yeterlidir. <td> komutu ile girebileceğimiz veriler düz metin olabileceği gibi, resim, bağlantı ve ya her hangi bir şey olabilir.

Tablolar ve Border (sınır) Niteliği

Yukarıda verdiğimiz örnekte görmüş olduğumuz gibi, table komutunu uygularken içinde border niteliğini çalıştırabiliyoruz. Bu sayede tablonun sınırlarına müdahale edebiliyoruz.

Tablo başlıkları
Tablolara <th> komutu ile baslık ekleyebilirsiniz

<html>
<body>

<h3> 1 satir 3 sutun </h3>
<table border="1">
<th>1. sayi</th><th>2. sayi</th><th>3. sayi</th>
<tr><td>100</td><td>200</td><td>300</td></tr>
</table><br>

<h3> 3 satir 3 sutun </h3>
<table border="1">
<th>1. sayilar</th><th>2. sayilar</th><th>3. sayilar</th>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>200</td><td>400</td><td>600</td></tr>
<tr><td>300</td><td>800</td><td>900</td></tr>
</table><br>

</body>
</html>

tablob

Tabloda Boş Hücre
Tablolarınızda boş hücre isterseniz tek yapmanız gereken arasında hiç bir şey olmayan bir <td> </td> komut aralığı oluşturmak.

<html>
<body>

<h3> 3 satir 3 sutun </h3>
<table border="1">
<th>1. sayilar</th><th>2. sayilar</th><th>3. sayilar</th>
<tr><td></td><td>200</td><td></td></tr>
<tr><td>200</td><td></td><td>600</td></tr>
<tr><td></td><td>800</td><td></td></tr>
</table><br>

</body>
</html>

tablobb

Eğer boş bıraktığınız hücrenin sınırları kaybolmuşsa, boş hücreyi hazırlarken <td>&nbsp;</td> komutunu kullanabilirsiniz (Bu durum tarayıcınız ile alakalıdır).

Örnekler
Sınırsız Tablo
<html>
<body>

<h3>3 satir 3 sutun (sinirsiz)</h3>
<table>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>200</td><td>400</td><td>600</td></tr>
<tr><td>300</td><td>600</td><td>900</td></tr>
</table>

</body>
</hmtl>

ornek1

Başlıklı Tablo
<html>
<body>

<h3>3 satir 3 sutun (baslikli)</h3>
<table border="1">
<th>1. sayiler</th><th>2. sayiler</th><th>3. sayiler</th>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>200</td><td>400</td><td>600</td></tr>
<tr><td>300</td><td>600</td><td>900</td></tr>
</table>

</body>
</hmtl>

ornek2

Boşluklu Tablo
<html>
<body>

<h3>3 satir 3 sutun (bosluklu)</h3>
<table border="1">
<tr><td></td><td>200</td><td>300</td></tr>
<tr><td>200</td><td></td><td>600</td></tr>
<tr><td>300</td><td>600</td><td></td></tr>
</table>

</body>
</hmtl>

ornek3

Manşetli Tablo
<html>
<body>

<h3>3 satir 3 sutun (Mansetli)</h3>
<table border="1">
<caption>Manset</caption,>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>200</td><td>400</td><td>600</td></tr>
<tr><td>300</td><td>600</td><td>900</td></tr>
</table>

</body>
</hmtl>

ornek4

Ortak Hücreli Tablo
<html>
<body>

<h3>ortak hucreli tablo</h3>
<table border="1">
<caption>Telefon Defteri</caption>
<tr><th>isim</th><th colspan="2">Telefon numarasi</th><tr>
<tr><th rowspan="2"> Bill Gates</th><td>555 77 854</td><td>555 77 855</td></tr>
<tr><td>555 77 856</td><td>555 77 857</td></tr>
</table>

</body>
</hmtl>

Ornek5
Karışık Tablo Düzeni
<html>
<body>

<h3>karisik tablo duzeni</h3>
<table border="2">
<tr>
<td><p>Bu bir paragraf</p><p>bu da baska bir paragraf</p></td>

<td>
<p>bu hucrede bir tablo var</p>
<table border="1">
<tr><td>100</td><td>200</td></tr>
<tr><td>200</td><td>400</td></tr>
</table>
</td>
</tr>

<tr>
<td><p>bu hucrede bir liste var</p><ul><li>1</li><li>2</li><li>3</li></ul></td>
<td>Merhaba</td>
</tr>

</table>

</body>
</hmtl>

ornek6

Hücre Genişliği Ayarları
<html>
<body>

<h3> hucre genisligi ayarsiz </h3>
<table border="1">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3> hucre genisligi ayarli </h3>
<table border="1" cellpadding="10">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

</body>
</hmtl>

ornek7

Hücre boşluğu Ayarı

<html>
<body>

<h3> hucre boslugu ayarsiz </h3>
<table border="1">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3> hucre boslugu ayarli </h3>
<table border="1" cellspacing="10">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

</body>
</hmtl>

ornek8

Renkli ve Resimli Arka planlar
<html>
<body>

<h3>Renkli Arkaplan</h3>
<table border="1" bgcolor="red">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3> Resimli Arkaplan </h3>
<table border="1" background="res1.jpg">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

</body>
</hmtl>

NOT: Resim örneğinde resim dosyası ile HTML dosyanızın aynı klasör de olmasına dikkat edin.

ornek9



Yazıları Konumu
<html>
<body>

<table border="1">
<tr><th align="right">parca</th><th align="center">___fiyati___</th></tr>
<tr><td align="right">islemci</td><td align="center">$100</td></tr>
<tr><td align="right">ram</td><td align="center">$80</td></tr>
<tr><td align="right">anakart</td><td align="center">$120</td></tr>
<tr><td align="right">ekran karti</td><td align="center">$200</td></tr>
<tr><th align="right">toplam</th><th align="center">$500</th></tr>
</table>
</body>
</hmtl>

ornek10
Çerceve Özellikleri
<html>
<body>

<h3>Sinir Cerceveli</h3>
<table frame="border">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Kutu Cerceveli</h3>
<table frame="box">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Cercevesiz</h3>
<table frame="void">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Ust Sinir Cerceveli</h3>
<table frame="above">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Alt Sinir Cerceveli</h3>
<table frame="below">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Alt Ust Sinir Cerceveli</h3>
<table frame="hsides">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Sag Sol Sinir Cerceveli</h3>
<table frame="vsides">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Sol Sinir Cerceveli</h3>
<table frame="lhs">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Sag Sinir Cerceveli</h3>
<table frame="rhs">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

</body>
</hmtl>

ornek11

ornek11-1


Çerçeve Kalınlıkları
<html>
<body>

<h3>Sol Sinir Cerceveli</h3>
<table frame="lhs" border="5">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

<h3>Sag Sinir Cerceveli</h3>
<table frame="rhs" border="5">
<tr><td>ilk</td><td>satir</td></tr>
<tr><td>ikinci</td><td>satir</td></tr>
</table>

</body>
</hmtl>

 

ornek12

 

Sonraki ders için tıklayınız...

Editör Bilgileri

Mehmet Emrah Konya

Zibidi


Editöre Ulaşın

En Son Güncellenenler

ikinci-jeanpaul
freebsd
apiterapi
aramamotorlari
uyku
kazimkoyuncu
peyzaj

Uzerine.com Copyright © 2005 Uzerine.com
uzerine.com Ana Sayfa | Gizlilik Sözleşmesi | Üye Girişi