Turhal Endüstri Meslek Lisesi

 

5. TABLOLAR

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece istediğiniz düzenlemeyi yapabilirsiniz.

Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki metnin genişliğine göre tablonun eni ve boyu değişebilir. Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir ve diğer satır ve sütunlarla birleştirilebilir. Tablolara başlık, liste, paragraf, form, figür ve her formatta metin konabilir.

5.1. <TABLE>

Tablolar <table> belirteci ile başlar.

<table>
        ......
      </table>

5.1.1. TR

Tabloda satır oluşturmayı sağlar.

5.1.2. TD

Tabloda sütun oluşturmayı sağlar.

Örnek :

   
RAM
ROM
<table border="1">
 <tr> (1.satır başlangıç)
  <td>RAM</td>
 </tr> (1.satır bitiş)
 <tr> (2.satır başlangıç)
  <td>ROM</td>
 </tr> (2.satır bitiş)
</table>

5.1.3. Border

Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar.

5.1.4. TH

Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür.

Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar etiketinde olduğu gibi <tr>...</tr> arasına yazılır.

Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.

Ders Dağılım
Tablo 1.1: Bölümlere göre dersler
Bilgisayar Elektronik Elektrik
Web Tasarımı Uydu Alıcısı Çağırma Tes.
Programlama İletişim Tek. Dağıtım Panoları
<table border="1">
 <thead>Ders Dağılımı</thead>
 <caption align="bottom">
Tablo 1.1: Bölümlere göre dersler
 </caption>
  <tr>
    <th>Bilgisayar</th>
    <th>Elektronik</th>
    <th>Elektrik</th>
  </tr>
  <tbody>
   <tr>
    <td>Web Tasarımı</td>
    <td>Uydu Alıcısı</td>
    <td>Çağırma Tes.</td>
   </tr>
   <tr>
    <td>Programlama</td>
    <td>İletişim Tek.</td>
    <td>Dağıtım Panoları</td>
   </tr>
  </tbody>
</table>

5.1.5. Width

Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır.

5.1.6. Height

Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik olarak atayacaktır.

Kasa
Fare
Klavye
Monitör
<table border="1">
 <tr><td width=100 >Kasa</td></tr>
 <tr><td width=100 height=50>Fare</td></tr>
 <tr><td height=40>Klavye</td></tr>
 <tr><td height=80>Monitör</td></tr>
</table>

5.1.7. Colspan

Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır.

5.1.8. Rowspan

Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır.

C Delphi Pascal
XML Borland C HTML
PHP Basic ASP
<table border="1" >
 <tr>
  <td>C</td><td>Delphi</td><td>Pascal</td></tr>
 <tr>
  <td>XML</td><td>Borland C</td><td>HTML</td>
 </tr>
 <tr>
  <td>PHP</td><td>Basic</td><td>ASP</td></tr>
</table>

 

 
Delphi Pascal
XML Borland C HTML
PHP Basic
<table border="1" >
 <tr>
  <td colspan="2">Delphi</td>
  <td>Pascal</td></tr>
 <tr>
  <td>XML</td>
  <td>Borland C</td>
  <td rowspan="2">HTML</td></tr>
 <tr>
  <td>PHP</td>
  <td>Basic</td></tr>
</table>

5.1.9. Cellspacing

Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlar.

Donanım
Yazılım
<table border="1" cellspacing="5">
 <tr><td>Donanım</td></tr>
 <tr><td>Yazılım</td></tr>
</table>

 

Donanım
Yazılım
<table border="1" cellspacing="15">
 <tr><td>Donanım</td></tr>
 <tr><td>Yazılım</td></tr>
</table>

5.1.10. Cellpadding

Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.

HTML
<table border="1" cellpadding="0">
<tr><td>HTML</td></tr>
</table>

 

HTML
<table border="1" cellpadding="11">
<tr><td>HTML</td></tr>
</table>

Designed and Powered by Fatih KÖROĞLU

 

report phishingreport abuse
This page is hosted by XM.COM - Free Web Hosting