|
<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. |
Hakkı |
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:
Tablonun alt yazısı(caption)
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 |
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.
|
|
<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>
|
|
|
<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>
|
|
|
<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>
|
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 <td>
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)
alt-yazı (caption)
| 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 |
|
<table border="1">
<thead>Tablo Başlığı (thead)</thead>
<caption align="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="..."
cellpadding="..."
cellspacing="..."
align="..."
width="..."
height="...">
border parametresi çerçevenin
kalınlığını belirtir. border=0 çerçevenin görünmemesini
sağlar.
|
|
<table border="0">
<tr>
<td>hücre</td>
</tr>
</table>
|
|
|
<table border="2">
<tr>
<td>hücre</td>
</tr>
</table>
|
|
|
<table border="4">
<tr>
<td>hücre</td>
</tr>
</table>
|
|
|
<table border="6">
<tr>
<td>hücre</td>
</tr>
</table>
|
cellpadding parametresi hücre içi
marj değerini belirtir. cellpadding=0 hücre içinde bulunan
unsurun (metin/grafik) hücre çerçevesine bitişik olmasını sağlar.
|
|
<table border="1" cellpadding="0">
<tr>
<td>hücre</td>
</tr>
</table>
|
|
|
<table border="1" cellpadding="5">
<tr>
<td>hücre</td>
</tr>
</table>
|
|
|
<table border="1" cellpadding="10">
<tr>
<td>hücre</td>
</tr>
</table>
|
cellspacing parametresi hücreler
arası marjı belirler.
|
|
<table border="1" cellspacing="1">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
|
|
<table border="1" cellspacing="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
|
|
<table border="1" cellspacing="10">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
align parametresi tabloyu düşey
hizalamada kullanılır, align=left sola, align=right
sağa dayalı yapar, align=center ortalar
|
|
<table border="1" align="left">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
|
|
<table border="1" align="center">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
|
|
<table border="1" align="right">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
width ve height parametreleri
resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu
belirtir. Tablonun değer verilmediğinde sahip olduğu normal
ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz.
|
|
<table border="1" width="150" height="200">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
|
|
<table border="1" width="80" height="80">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
|
|
<table border="1" width="5" height="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
|
<td> etiketi için parametreler
<td bgcolor="..."
background="..."
width="..."
height="..."
align="..."
valign="...">
bgcolor parametresi hücreyi
renklendirmede kullanılır.
| hücre1 |
| hücre2 |
| hücre3 |
| hücre4 |
|
<table border="1" cellpadding="7">
<tr>
<td bgcolor="#ff0000">hücre1</td>
</tr>
<tr>
<td bgcolor="#00ff00">hücre2</td>
</tr>
<tr>
<td bgcolor="#0000ff">hücre3</td>
</tr>
<tr>
<td bgcolor="#ffff00">hücre4</td>
</tr>
</table>
|
background parametresi ile hücreye
grafik-artalan yerleştirebiliriz.
|
hücre1 |
|
hücre2 |
|
hücre3 |
|
hücre4 |
|
<table border="1" cellpadding="9">
<tr>
<td background="resim1.jpg">hücre1</td>
</tr>
<tr>
<td background="resim2.jpg">hücre2</td>
</tr>
<tr>
<td background="resim3.jpg">hücre3</td>
</tr>
<tr>
<td background="resim4.jpg">hücre4</td>
</tr>
</table>
|
width ve height parametreleri
ile hücrenin boyutlarını belirleyebiliriz. Yalnız height
komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini
değiştirebilirken, width komutu ile her hücreyi
değiştiremeyiz.En büyük width değeri tüm sütun için geçerli
olacaktır. Aynı şekilde tek satırlı tabloda width değerini
her hücre için değiştirebilirken en büyük height değeri tüm
satır için geçerli olacaktır.
| hücre1 |
| hücre2 |
| hücre3 |
| hücre4 |
|
<table border="1" cellpadding="7">
<tr><td width=120 height=20>hücre1</td></tr>
<tr><td width=120 height=40>hücre2</td></tr>
<tr><td width=120 height=60>hücre3</td></tr>
<tr><td width=120 height=80>hücre4</td></tr>
</table>
|
| hücre1 |
hücre2 |
hücre3 |
hücre4 |
|
<table border="1" cellpadding="7">
<tr>
<td width=40 height=30>hücre1</td>
<td width=70 height=30>hücre2</td>
<td width=90 height=30>hücre3</td>
<td width=120 height=30>hücre4</td>
</tr>
</table>
|
align parametresi hücre içinde yatay
hizalama yapar.
|
|
<table border="1" cellpadding="7">
<tr><td width="100" align="left">hücre1</td></tr>
<tr><td width="100" align="center">hücre2</td></tr>
<tr><td width="100" align="right">hücre3</td></tr>
</table>
|
valign parametresi hücre içinde düşey
hizalama yapar.
|
|
<table border="1" cellpadding="7">
<tr>
<td height="80" valign="top">hücre1</td>
</tr>
<tr>
<td height="80" valign="middle">hücre2</td>
</tr>
<tr>
<td height="80" valign="bottom">hücre3</td>
</tr>
</table>
|
Hücreleri Birleştirme
<td colspan=".." rowspan="..">
Aynı satırdaki hücreleri birleştirmek için
colspan, aynı sütundaki hücreleri birleştirmek için de
rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait
<td>..</td> etiketini siliyoruz.
|
|
<table border="1" cellpadding="12">
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>E</td><td>F</td><td>G</td><td>H</td></tr>
<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>
</table>
|
Yukarıdaki tabloda;
A ve B hücrelerini birleştirmek için A
hücresine ait <td> etiketine colspan=2 parametresini
ekliyoruz ve B hücresine ait <td>B</td> etiketini
siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait
<td> etiketine colspan=3 parametresini ekliyoruz ve
F ve G hücrelerine ait <td>F</td>, <td>G</td>
etiketlerini siliyoruz.
|
|
<table border="1" cellpadding="12">
<tr><td colspan="2">A</td><td>C</td><td>D</td></tr>
<tr><td colspan="3">E</td><td>H</td></tr>
<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>
</table>
|
Aynı şekilde E ve I hücrelerini birleştirmek
için E hücresine ait <td> etiketine rowspan=2
parametresini ekliyoruz ve I hücresine ait <td>I</td>
etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C
hücresine ait <td> etiketine rowspan=3 parametresini
ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td>
etiketlerini siliyoruz.
|
|
<table border="1" cellpadding="12">
<tr><td>A</td><td>B</td>
<td rowspan="3">C</td><td>D</td></tr>
<tr><td rowspan="2">E</td><td>F</td><td>H</td></tr>
<tr><td>J</td><td>L</td></tr>
</table>
|
|