- html: tablo

html: tablo

TABLO DÜZENLEME STİLİ

Tablolar saysinde sayfada herhangi bir yazının istediğimiz yerde durmasını sağlayabiliriz .
Sayfamızda gözüksede, gözükmesede tablolar web tasarımında kullanılabilir... Hatta böyle birçok sayfa var... Tablonun ızgara kalınlığı 0 değerine düşürülüyor, menu bolumu ekleniyor, sayfanın görüneceği yer ekleniyor, her bir bolume arkaplan grifiği ekleniyor... İşte size bir tablodan site. Ama html css kadar hassas olamaz... Html' de yapacağımız şeyler sınırlıdır. Ama css ile istediğimiz bir yazıyı her yere koyabiliriz... Tabi konumuz bu değil. Css derslerine sonra başlarsınız. Tablo, html' nin önemli yapıtaşlarından bir tanesi.

Öncelik <table>...</table> etiketlerinde bu etiketleri yazdıktan sonra, bu tagların arasına birçok şey yazabiliriz çünkü; artık tarayıcıya bir tablonun başlangıcı olduğunu belirtttik... Peki nasıl basit bir tablo yapabiliriz? İşte derlserimiz;

İlk olarak bir tablo yazarken <tr>...</tr> taglarıyla satır oluşturabiliriz.
Bu tagların arasına ise istediğimiz kadar, <td>...</td> tagları yazarız sonra <td> taglarının arasına teker teker bu hücrelerde ne görünecekse onları yazarız.

Mesela; (html, table taglarını hep ekleriz)

<tr>
<td>Hucre</td>
<td>2. hucre</td>
</tr>

Bu basit bir tabloydu.

deneme

<table border="1">
<tr>
<td>deneme</td>
</tr>
</table>

deneme1

deneme2

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

deneme1

deneme2

<table border="1">
<tr>
<td>deneme1</td>
</tr>
<tr>
<td>deneme2</td>
</tr>
</table>

1.satır-deneme1	1.satır-deneme2
2.satır-deneme1	2.satır-deneme2

<table border="1">
<tr>
  <td>1.satır-deneme1</td>
  <td>1.satır-deneme2</td>
</tr>
<tr>
  <td>2.satır-deneme1</td>
  <td>2.satır-deneme2</td>
</tr>
</table>

<table> tagıyla tabloyu açtıktan sonra, <tr> tagıyla bir satır açıyoruz. Sonra istediğimiz kadar <td>...</td> taglarından ekliyoruz. eklenen taglardan sonra, </tr> ile satırı kapatıyoruz... Her bir satır için aynı işlemleri uyguluyoruz. Sutun (td) taglarının arasına kafanıza göre birşeyler yazın...
<tr>...<tr> taglarının arasına ise sadece sutunlar (<td>...</td>) açılır...

BUNDAN SONRAKİ BÖLÜM WEBHOCAM.NET' den alıntıdır...

Tablonun başlıkarı ve gövdesi

Tablonun bir web sayfasında olduğu gibi <thead>(head) ve <tbody>(body) bölümleri vardır... Bundan sonraki tablo yapımlarımızi ise; body ve head bölümlerine ayıyarak yapalım.
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;

<table border="1">
<thead>Tablonun başlık bölümünü görüyorsunuz...</thead>
<caption align="bottom">
açıklayıcı yazı
<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

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>

Align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar.

hücre1

hücre2

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

hücre1

hücre2

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

hücre1

hücre2

<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, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.

A	B	C	D
E	F	G	H
I	J	K	L

Tebrikler!! HTML derslerinde büyük bir yol katlettiniz! Hepinize başarılar!

Bu sayfayı okuyun