Data WebMaster
  HTML TabLOLAR
 

<table>...</table>

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 şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık

programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek. İşte tablolar,

 

Sonbahar

Kış

İlkbahar

Yaz

Eylül

Aralık

Mart

Haziran

Ekim

Ocak

Nisan

Temmuz

Kasım

Şubat

Mayıs

Ağustos

Tabloyu renklendirelim,
 

Sonbahar

Kış

İlkbahar

Yaz

Eylül

Aralık

Mart

Haziran

Ekim

Ocak

Nisan

Temmuz

Kasım

Şubat

Mayıs

Ağustos

 

Başka bir örnek (farklara dikkat ediniz)  

 

 

ÖLÇÜLER

 

Boy

Kilo

1.

Zafer

1.77

80

2.

Mustafa

1.82

75

3.

Osman

1.75

83

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

 

Tablo Başlığı (thead)

Sütun Başlığı
#1

Sütun Başlığı
#2

Sütun Başlığı
#3

Sütun Başlığı
#4

 

hücre

hücre

hücre

hücre

 

 

hücre

hücre

hücre

hücre

 

 

hücre

hücre

 

 

Tablonun alt yazısı(caption)


Bu kadar örnek yeterli, şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <tr> etiketi ile satırları <td> etiketi ile de sütunları oluşturuyoruz

hücre

<table border="1">
 <tr>
  <td>hücre</td>
 </tr>
</table>

hücre1

hücre2

<table border="1">
 <tr>
  <td>hücre1</td>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

<table border="1">
 <tr>
  <td>hücre1</td>
 <tr>
 </tr>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

hücre3

hücre4

<table border="1">
 <tr>
  <td>hücre1</td>
  <td>hücre2</td>
 </tr>
 <tr>
  <td>hücre3</td>
  <td>hücre4</td>
 </tr>
</table>


 

<table> etiketinden sonra ilk olarak <tr> etiketiyle ilk satırı oluşturuyoruz. Oluşturmak istediğimiz sütun kadar <td> etiketi yazıyoruz. <td>...</td> etiketleri arasına metin yada grafik (<img src=>) koyabiliriz.<td> etiketleri ile sütunları oluşturduktan sonra </tr> etiketi ile oluşturduğumuz satırı bitiriyoruz. İkinci, üçüncü... satırları oluşturmak için aynı yöntemi uyguluyoruz.  

Tabloda başlık ve gövde

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.

Yukarıdaki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;

 

 

Tablo Başlığı (thead)

1.Sütun

2.Sütun

3.Sütun

hücre1

hücre2

hücre3

hücre4

hücre5

hücre6

hücre7

hücre8

hücre9

 

alt-yazı (caption)
<tableborder="1">
<thead>TabloBaşlığı(thead)</thead>
<captionalign="bottom">
alt-yazı(caption)
<caption>
<tr>
<th>1.Sütun</th>
<th>2.Sütun</th>
<th>3.Sütun</th>
</tr>
<tbody>
 <tr>
<td>hücre1</td>
<td>hücre2</td>
<td>hücre3</td>
</tr>
<tr>
<td>hücre4</td>
<td>hücre5</td>
<td>hücre6</td>
</tr>
<tr>
<td>hücre7</td>
<td>hücre8</td>
<td>hücre9</td>
</tr>
</tbody>
</table>


Parametreler


<table border=".." cellpading=".." cellspacing=".." align=".." width=".." height="..">
Border
parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.

 
 

hücre

<table border="0">
 <tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="2">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="4">
 <tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="6">
<tr>
<td>hücre</td>
</tr>
</table>






Bu sayfa hakkında yorum ekle:
İsminiz:
Siteniz:
Mesajın:
 
  BuGüN 6 ziyaretçiKişi Siteye Girdi.____ ©2008 Data WebMaster