Konu: Tablo Oluşturma - HTML Ders 8

[D®agon]

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.

<TABLE>

Tablolar <table> belirteci ile başlar.
<table>
……

</table>

TR :

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

örnek:
1.satır 2.satır

RAM

ROM

Kod: You are not allowed to view links. Register or Login

<table border="1">
<tr>
<td>RAM</td> 1.satır
</tr>
<tr>
<td>ROM</td> 2.satır
</tr>
</table>
TD :

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

Örnek:

---- 1.sütun ---- 2.sütun

RAM

ROM

Kod: You are not allowed to view links. Register or Login

<table border="1">
<tr>
<td>RAM</td>---- 1.sütun
<td>ROM</td>---- 2.sütun
</tr>
</table>
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.

örnek:

HTML

Kod: You are not allowed to view links. Register or Login

<table border=0>
<tr>
<td>HTML</td>
</tr>
</table>
örnek:

HTML

Kod: You are not allowed to view links. Register or Login

<table border=2>
<tr>
<td>HTML</td>
</tr>
</table>

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.

Örnek:

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ı

Kod: You are not allowed to view links. Register or Login

<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>
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.

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.

Örnek:

Kasa

Fare

Klavye

Monitör

Kod: You are not allowed to view links. Register or Login

<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>
Colspan :

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

Örnek:

C	Delphi	Pascal
XML	Borland C	HTML
PHP	Basic	ASP

Kod: You are not allowed to view links. Register or Login

<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>
Rowspan :

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

Örnek:

Delphi		Pascal
XML	Borland C	HTML
PHP	Basic

Kod: You are not allowed to view links. Register or Login

<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>
Cellspacing :

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

örnek:
[/html]
<table border="1" cellspacing="5">
<tr><td>Donanım</td></tr>
<tr><td>Yazılım</td></tr>
</table>
[/html]

Kod: You are not allowed to view links. Register or Login

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

Donanım

Yazılım

Kod: You are not allowed to view links. Register or Login

<table border="1" cellspacing="9">
<tr><td>Donanım</td></tr>
<tr><td>Yazılım</td></tr>
</table>
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.

örnek:

HTML

Kod: You are not allowed to view links. Register or Login

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

HTML

Kod: You are not allowed to view links. Register or Login

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