HTML Tablolar 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 Table etiketi: <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: <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: Tablo içinde bir tablo satırını tanımlar. Th etiketi: <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: <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 sıfatları 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.
Örnek 1 : Basit bir tablo örneği <p> Her tablo bir table etiketi ile başlar. Her satır bir tr etiketi ile başlar. Her sütun bir td etiketi ile başlar. </p> <h4>bir sütun:</h4> <td>100</td> <h4>bir satır ve üç sütun:</h4> <td>100</td> <td>200</td> <td>300</td> <h4>iki satır ve üç sütun:</h4> <caption>başlığım</caption> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td>
Örnek 2 : Farklı Kenarlıklar <h4>normal kenarlık ile:</h4> <h4>kalın bir kenarlık ile:</h4> <table border="8"> <h4>çok kalın bir kenarlık ile:</h4> <table border="15">
Örnek 3 : Kenarlıksız Tablolar <h4>bu tablonun kenarlığı yok:</h4> <table> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> <h4>bu tablonun da kenarlığı yok</h4> <table border="0"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> <p> Table etiketi içerisinde border özelliği belirtilmediğinde varsayılan değer olarak 0 alındığına dikkat ediniz.</p>
Örnek 4 : Başlık vermek <th></th> <h4>yatay başlıklar:</h4> <th>isim</th> <th>telefon</th> <th>telefon</th> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> <h4>dikey başlıklar:</h4> <th>isim:</th> <td>bill Gates</td> <th>telefon:</th> <td>555 77 854</td> <th>telefon:</th> <td>555 77 855</td>
Örnek 5 : Bir satır veya sütundan uzun hücreler <h4>aşağıdaki hücre iki kolon içeriyor:</h4> <th>isim</th> <th colspan="2">telefon</th> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> <h4>aşağıdaki hücre iki satır içeriyor:</h4> <th>isim:</th> <td>bill Gates</td> <th rowspan="2">telefon:</th> <td>555 77 854</td> <td>555 77 855</td>
Örnek 6 : Tablo içinde farklı biçimler kullanmak. <td> <p>bu bir paragraf</p> <p>bu başka bir paragraf</p> </td> <td>bu hücre bir tablo içeriyor: <td>a</td> <td>b</td> <td>c</td> <td>d</td> </td> <td>bu hücre bir liste içeriyor <ul> <li>elma</li> <li>muz</li> <li>ananas</li> </ul> </td> <td>merhaba</td>
Örnek 7 : Hücre kenarlığı ve içi arasındaki boşluğu ayarlamak. <h4>ccellpadding olmadan:</h4> <h4>cellpadding ile:</h4> <table border="1" cellpadding="10">
Örnek 8: Hücreler arası mesafeyi ayarlamak. <h4>cellspacing olmadan:</h4> <h4>cellspacing ile:</h4> <table border="1" cellspacing="10">
Örnek 9 : Tabloya arka plan rengi ve arka plan resmi eklemek <h4>bir arkaplan rengi:</h4> <table border="1" bgcolor="red"> <h4>bir arkaplan resmi:</h4> <table border="1" background="bgdesert.jpg">
Örnek 10 : Tablo hücrelerine arka plan rengi ve arka plan resmi eklemek <h4>hücre arkaplanları:</h4> <td bgcolor="red">ilk</td> <td background="bgdesert.jpg"> İkinci</td>
Örnek 11: Hücre içeriğini hizalamak <table width="400" border="1"> <th align="left">paranın harcandığı eşyalar</th> <th align="right">ocak</th> <th align="right">şubat</th> <td align="left">giyim</td> <td align="right">240 YTL</td> <td align="right">50 YTL</td> <td align="left">makyaj</td> <td align="right">30 YTL</td> <td align="right">45 YTL</td> <td align="left">yiyecek</td> <td align="right">730 YTL</td> <td align="right">650 YTL</td> <th align="left">toplam</th> <th align="right">1000 YTL</th> <th align="right">745 YTL</th>
Örnek 12 : Başka bir örnek <table border="0" width="100%" cellpadding="10"> <td width="50%" valign="top"> Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. </td> <td width="50%" valign="top"> Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. </td>