HTML

26 Ekim 2007

HTML tabloları (table)

HTML kullanarak tablolar yaratabilirsiniz.

Örnekler

Bu örnek HTML belgesi içinde nasıl tablo yaratıldığını gösterir.
 
<html>
<body>

<p>
Her tablo "table" biçimiyle başlar.
Her tablo satırı "tr" biçimyle başlar.
Her tablo verisi "td" biçimyle başlar.
</p>

<h4>Bir Kolon:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>Bir satır ve üç kolon:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>İki satır ve üç kolon:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

Her tablo "table" biçimiyle başlar. Her tablo satırı "tr" biçimiyle başlar. Her tablo verisi "td" biçimiyle başlar.

Bir kolon:

100

Bir satır ve üç kolon:

100 200 300

İki satır ve üç kolon:

100 200 300
400 500 600
Bu örnek değişik tablo çerçevelerini gösterir.
 
<html>
<body>

<h4>Normal çerçeveyle:</h4>  
<table border="1">
<tr>
  <td>İlk</td>
  <td>Satır</td>
</tr>   
<tr>
  <td>İkinci</td>
  <td>Satır</td>
</tr>
</table>

<h4>Kalın çerçeveyle:</h4>  
<table border="8">
<tr>
  <td>İlk</td>
  <td>Satır</td>
</tr>   
<tr>
  <td>İkinci</td>
  <td>Satır</td>
</tr>
</table>

<h4>Çok kalın çerçeveyle:</h4>  
<table border="15">
<tr>
  <td>İlk</td>
  <td>Satır</td>
</tr>   
<tr>
  <td>İkinci</td>
  <td>Satır</td>
</tr>
</table>

</body>
</html>

Normal çerçeveyle:

İlk Satır
İkinci Satır

Kalın çerçeveyle:

İlk Satır
İkinci Satır

Çok kalın çerçeveyle:

İlk Satır
İkinci Satır

Tablolar

Tablolar <table> biçimiyle tanımlanır. Bir tablo satırlara (<tr> biçimiyle tanımlanır), ve her satır da veri hücrelerine (<td> biçimiyle tanımlanır) bölünür. Buradaki td harfleri "table data (tablo verisi)" yerine geçer ve tablo hücresinin içeriğini oluşturur. Bir veri hücresi yazı, resim, liste, paragraflar, formlar, yatay çizgiler, tablolar vb öğelerden oluşur.
 
<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>
Bir tarayıcıda bu nasıl görünür:

satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2

Tablolar ve çerçeve (border) Niteliği

Eğer çerçeve niteliği belirtmezseniz tablo çerçevesiz görüntülenir. Bazen bu çok kullanışlı olabilir, ama çoğunlukla tabloları göstermek için çerçeve kullanmak istenir.

Bir tabloyu çerçevesiyle görüntülemek isterken çerçeve (border) niteliği kullanılır: 
<table border="1">
<tr>
<td>Row 1, hücre 1</td>
<td>Row 1, hücre 2</td>
</tr>
</table>

Tablolarda Başlıklar

Tablolarda başlıklar <th> biçimiyle tanımlanır.
 
<table border="1">
<tr>
<th>Başlık</th>
<th>Diğer Başlık</th>
</tr>
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Bir tarayıcıda yukarıdaki kod şöyle görünür:
Başlık Diğer Başlık
satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2

Bir tablodaki boş hücreler

İçi boş olan tablo hücreleri her tarayıcıda çok iyi görünmez
 
<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td></td>
</tr>
</table>

Bu tanım bir tarayıcıda nasıl görünür:
satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1

Boş hücrenin çevresindeki çerçeve görünmez (NB! Mozilla Firefox çerçeveyi gösterir).
Bundan kurtulmak için kırılmayan boşluk (&iamp;nbsp;) boş hücreyte yazılır ki çerçeve görülebilsin:
 
<table border="1">
<tr>
<td>satır 1, cell 1</td>
<td>satır 1, cell 2</td>
</tr>
<tr>
<td>satır 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

satır 1, cell 1 satır 1, cell 2
satır 2, hücre 1  

Temel Notlar - Kullanılabilir ipuçları

<thead>,<tbody> ve <tfoot> öğeleri tarayıcılar tarafından kötü destekleindiği için ender kullanılır. Bu sorunun XHTML'in ilerideki sürümlerinde değişeceğini umulmaktadır. Eğer sizde 5.0 ya da daha yeni IE varsa, çalışan bir örneği XML derslerinde görebilirsiniz.
 
<html>
<body>

<xml id="cdcat" src="cd_catalog.xml"></xml>

<table border="1" datasrc="#cdcat">

<thead>
<tr><th>Sanatçı</th><th>Başlık</th></tr>
</thead>

<tfoot>
<tr><th colspan="2">Bu benim CD kolleksiyonumdur</th></tr>
</tfoot>

<tbody>
<tr>
<td><span datafld="artist"></span></td>
<td><span datafld="title"></span></td>
</tr>
</tbody>

</table>

</body>
</html>
SanatçıBaşlık
Bu benim CD kolleksiyonumdur

diğer örnekler...