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 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>
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>
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>
Eğer boş bıraktığınız hücrenin sınırları kaybolmuşsa, boş hücreyi hazırlarken <td> </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>
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>
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>
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>
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>
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>
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>
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>
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.
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>
Ç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>
Ç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>
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com