comag

Html Tablo Olusturma

Tablo Oluşturma


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


TD


Tabloda sütun oluşturmayı sağlar


<table border="1">

<tr>

<td>RAM</td> 1.satır


</tr>

<tr>

<td>ROM</td> 2.satır


</tr>

</table>


------------------------------------------


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


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

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


TH



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

<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
</table>


Colspan


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

Rowspan

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

-------------------------ÖRNEK----------------

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


Cellspacing


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

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

------------------------Örnek----------------------------------

<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------------------------
<table border="1" cellpadding="0">
<tr><td>HTML</td></tr>
</table>

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

---------------------Örnek---------------------------
<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>

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

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

 

comag.tr.gg
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol