Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.
Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği için öncelikle etiketlerin anlamlarını öğrenecek, sonrasında çeşitli parametleri kullanarak nasıl daha düzenli hale getirebileceğinizi göreceksiniz.
Tablo etiketleri
Tablo özellikleri
Şimdi ülkelerin nüfuslarını bir tabloda nasıl verdiğimize bakalım:
Kod:
![[Resim: k8MAnq.png]](/proxy.php?image=https%3A%2F%2Fi.hizliresim.com%2Fk8MAnq.png&hash=bb3fbbf1d566d7480c5a049c372205dc "[Resim: k8MAnq.png]")
Şimdi tek hücreli bir tablo oluşturarak daha detaylı inceleyelim:
Kod:
![[Resim: 3pT3EX.png]](/proxy.php?image=https%3A%2F%2Fi.hizliresim.com%2F3pT3EX.png&hash=3b4ffc9d3633792bf6a5ca6aa3d398a6 "[Resim: 3pT3EX.png]")
Son olarak zemin rengi değiştirilmiş bir tablo örneğiyle eğitimi sonlandıralım:
Kod:
![[Resim: AKi6hw.png]](/proxy.php?image=https%3A%2F%2Fi.hizliresim.com%2FAKi6hw.png&hash=a144d344b65a05070feaf3cfd1be17e7 "[Resim: AKi6hw.png]")
Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği için öncelikle etiketlerin anlamlarını öğrenecek, sonrasında çeşitli parametleri kullanarak nasıl daha düzenli hale getirebileceğinizi göreceksiniz.
Tablo etiketleri
- table etiketi:
Kod:
<table> </table>
HTML kodu içinde bir tablo tanımlar. Şayet border parametresi tanımlanmışsa tarayıcı tabloyu çevre sınırları ile görüntüler.
- caption etiketi:
Kod:
<caption> </caption>
tablonun başlığı için bir ifade tanımlar. Tablo başlığının öntanımlı konumu, tablonun üstünde ve ortalanmış durumdadır.
- tr etiketi:
Kod:
<tr> </tr>
Tablo içinde bir tablo satırını tanımlar.
- th etiketi:
Kod:
<th> </th>
bir tablo başlık hücresi tanımlar. Öntanımlı olarak bu hücredeki metin ortalanmış ve koyu (bold) renklidir.
- td etiketi:
Kod:
<td></td>
Bir tablo hücresi tanımlar. Öntanımlı olarak bu hücre içindeki metin sola yanaşık ve düşeyde ortalanmış vaziyettedir.
Tablo özellikleri
- Align parametresi: Bir hücre verisinin yatay konumunu belirler. Left, Right, Center parametrelerini kullanarak belirtirsiniz.
- Valign parametresi: Bir hücre verisinin düşey konumunu belirler. Top, Middle, Bottom parametrelerini kullanarak belirtirsiniz.
- Colspan parametresi: Bir hücrenin kapsadığı sütun sayısıdır. Belirttiğiniz kadar sütun oluşmasını sağlar.
- Rowspan parametresi: Hücrenin kapsadığı satır sayısıdır. Belirttiğiniz kadar satır oluşmasını sağlar.
- Nowrap parametresi: Otomatik metin akışını iptal eder.
Şimdi ülkelerin nüfuslarını bir tabloda nasıl verdiğimize bakalım:
Kod:
Kod:
<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2">
<!-- tablo tanımı başlangıcı -->
<caption> ÜLKELER VE NÜFUSLARI </caption>
<!-- başlık tanımı -->
<tr>
<!-- başlık satırı tanımı -->
<th>ÜLKE ADI</th>
<th>NÜFUSU</th>
</tr>
<!-- başlık satırı tanımının sonu -->
<tr>
<!-- ilk satır tanımı -->
<td>AVUSTURYA </td>
<td>8,000,000</td>
</tr>
<!-- ilk satır tanımının sonu -->
<tr>
<td>ALMANYA</td>
<td>80,000,000</td>
</tr>
<tr>
<!-- son satır tanımının başlangıcı -->
<td>TÜRKİYE</td>
<td>73,000,000</td>
</tr>
<!-- son satır tanımının sonu -->
</table>
<!-- tablo tanımının sonu -->
</body>
</html>Şimdi tek hücreli bir tablo oluşturarak daha detaylı inceleyelim:
Kod:
Kod:
<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="5">
<tr>
<td>TEK HÜCRELİ BİR TABLO</td>
</tr>
</body>
</table>
</html>Son olarak zemin rengi değiştirilmiş bir tablo örneğiyle eğitimi sonlandıralım:
Kod:
Kod:
<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="5" align="left" bgcolor="ffcbf0">
<tr>
<td>PADOVA</td>
</tr>
</table>
Venedik'in bu kadar yakınında olması belki şanssızlığıdır.<br>
Gizemli bir Kuzey İtalya şehridir.<br>
Avrupa'nın en eski tıp fakültesi buradadır.
</body>
</html>