HTML TABLO OLUŞTURMA

Bir web sayfasındaki tablo, günlük yaşamda kullandığımız tabloların özeliklerini taşıyan bir yapıdır. Tablolar, sayfaları satırlara / sütunlara böleriz.

Ayrıca, istenirse, tablo kenarları (çerçeve) kalınlığı belirlenebilir, hücreler arası açıklık ayarlanabilir. Hücrelere yazılan yazıların hücre içindeki konumları belirlenebilir. Bu konumlar yatay doğrultuda ortada, sağa yanaşık, sola yanaşık yapılabilir. Düşey doğrultuda ise ortada, tabanda ya da tepede olabilir. Hücre zemini ve yazıların renkleri belirlenebilir. Font türü seçilebilir. Hücrelere resim ya da ses konulabilir. Hücreler içinde link yapılabilir.

Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterlidir bunlar:

KOD	ANLAMI
<table></table>	Tabloyu oluşturur
<tr></tr>	Satır oluşturur
<td></td>	Tablo hücresi

İki satırlı iki sütunlu tablo oluşturalım

  
<table border="1">

  <tr>
	  
    <td>satır 1, sütun 1</td>
    <td>satır 1, sütun 2</td>
		
  </tr>
	  
  <tr>
	  
    <td>satır 2, sütun 1</td>
    <td>satır 2, sütun 2</td>
		 
  </tr>
	  
</table>

ÇIKTI:

HTML TABLOLAR VE KENARLIK (BORDER) PARAMETRESİ

---

Bu parametre tablonun kenar çizgileri ile hücre çerçevelerini kontrol eder. Border="1" değeri bu çerçevelerin görünür durumda ve asgari kalınlıkta olmasını sağlar. border="0" ile çerçevelerin görünmez olması sağlanabilir ; 2 , 3 gibi daha büyük değerler kullanılarak çerçeve kalınlığı artırılabilir. border parametresi için varsayılan değer sıfırdır. Dolasıyla bu parametre kullanılmadığında tablo çerçevesiz olarak görüntülenir.

<table border="4">

  <tr>
  
    <td>Satır 1, Hücre 1</td>
    <td>Satır 1, Hücre 2</td>
	
  </tr>
  
  <tr>
  
   <td>Satır 2, Hücre 1</td>
   <td>Satır 2, Hücre 2</td>
	
  </tr>
  
</table>

ÇIKTI:

HTML TABLODA BAŞLIKLAR

---

Başlıklar <th> etiketi ile belirtilir ; özelliği hücre içerisindeki metini kalın yazar.

<table border="1">

 <tr>
 
  <th>Başlık</th>
  <th>Başka Başlık</th>
  
 </tr>
 
 <tr>
 
  <td>Satır 1, Hücre 1</td>
  <td>Satır 1, Hücre 2</td>
  
 </tr>
 
 <tr>
 
  <td>Satır 2, Hücre 1</td>
  <td>Satır 2, Hücre 2</td>
  
 </tr>
 
</table>

ÇIKTI:

Cellpadding ve cellspacing PARAMETRELERİ

---

Bu iki parametreden cellspacing hücrelerin marjı, cellpadding ise hücre içi marjı kontrol etmeye yarar. Her iki parametre için verilebilecek en küçük değer sıfırdır. border parametresi de dahil olmak üzere 3 parametreye sıfır değeri verilmesi halinde hücreler içinde ki resim ,metin ve nesneler birbirlerine yapışık olarak görüntülenir.

Hücre Kenarına Uzaklık

Hücre içindeki yazı ile hücre kenarı arasındaki açıklık <table cellpadding=" " > nitelemesi ile belirlenir.

<table border="1" cellpadding="10">

<tr>
 
  <td>A</td> <td>B</td> <td>C</td>
  <td>A</td> <td>B</td> <td>C</td>
	
</tr>

<tr>

  <td>D</td> <td>E</td> <td>F</td>
	
</tr>

</table>

ÇIKTI:

Hücreler Arası Açıklık

Hücreler arasındaki açıklık <table cellspacing=" " > nitelemesi ile belirlenir.

<table border="1" cellpadding="10" cellspacing="10">

<tr>

  <td>A</td> <td>B</td>

  <td>C</td>

</tr>

<tr>

  <td>D</td><td>E</td>

  <td>F</td>

</tr>

</table>

ÇIKTI:

cellpadding değeri büyük verilerek tablo yapısı içindeki metinlerin okunabilirliği artırılabilir. cellspacing'e yüksek değerler verilerek hücrelerin birbirinden ayrık olmaları sağlanabilir.

HTML TABLOYU RENKLENDİRME

---

Daha önce sayfamızda arkafon rengini değiştirmekte kullandığımız bgcolor parametresini <table> , <tr> ve <td> etiketlerinde de kullanabiliyoruz. bu parametrenin <table> ile birlikte kullanılması durumunda tüm tabloyu <tr> ile kullanılmasında tüm satırı renklendirebiliriz. Tek bir hücreye renk vermek için bgcolor'ı <td> etiketi ile kullanıyoruz. bu sayede rengarenk tablolar elde etmemiz mümkün oluyor.

 <table border="0" bgcolor="#cccccc">
 
  <tr>
 
   <td bgcolor="#666666">hücre1</td>
   <td bgcolor="#666666">hücre2</td>
   <td bgcolor="#666666">hücre3</td>
   
  </tr>
 
  <tr bgcolor="#3366ff">>
 
   <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>
 
 </table>

ÇIKTI:

Bu örnek ilk satırda her hücreye ayrı ayrı renkler verdik, İkinci satırda <tr> etiketine renk vererek tüm satırı mavi renklendirdik, son satırda ise renk kullanmadık, fakat tablonun tümüne <table> etiketinde bgcolor ile renk verdiğimiz için, üçüncü sırada ki hücrelerin de zeminleri renklendirilmiş oldu.

Buradan şu sonucu çıkarabiliriz. bgcolor parametresinde <table> , <tr> ve <td> etiketleri arasında öncelik sırası <td>'ye aittir. yani <td>'ye renk vererek <tr> ve <table> ile verilen renkleri örtebiliriz.

HTML TABLOLARA ARKAPLAN RESMİ EKLEME

---

Tablolarda rengin yanısıra arkafon (background) olarak grafik dosyalarından faydalanabiliriz.

<table>

  <tr>
  
    <td background="logo.jpg"><h4>Hücre</h4></td>
	
  </tr>

</table>

NOT:

Kullandığımız arkafon grafiğinin tablo veya hücre alanında küçük olması durumunda grafik dosyası boş alanlar doldurulana kadar tekrarlanacaktır. Böylece arkafon amacıyla kullanmak için küçük boyutlu grafiklerden faydalanabilir.

TABLO VE HÜCRELERİN EBATLARINI BELİRLEMEK

---

Resimler konusunda gördüğümüz width (genişlik) ve height (yükseklik) parametrelerini tablo etiketlerinide kullanabiliriz. Ayrı ayrı hücrelerin, satırların ve tüm tablonun yükseklik ve genişliklerini ya pilsel olarak, ya da Browser penceresinin boyutuna göre değişen yüzde değeri kullanarak belirleyebiliyoruz. Ancak burada bazı kısıtlamalar sözkonusu. Bir hücreye genişlik değeri vermişsek Tablo yapısı gereği o satırdaki tüm hücreler de büyük yükseklik değerine sahip hücre temel alınarak oluşturulur.

 <table border="1">
 
  <tr height="60">
 
   <td>Hücre1</td>
   <td>Hücre2</td>
   
  </tr>
 
  <tr>
 
   <td>Hücre3</td>
   <td>Hücre4</td>
   
  </tr>
  
 </table>

 

ÇIKTI:

HÜCRELERİ BİRLEŞTİRME

---

Tabloları sayfa iskeleti oluşturmakta etkin olarak kullabilmemizin en büyük sebebi herhalde HTML'in hücreleri birleştirme özelliği olsa gerek.

Tabloları birleştirmede iki parametre bulunuyor: colspan ve rowspan aynı satır ve farklı (column) sütunlardaki hücreleri birleştirmek için colspan, aynı sütun ve farklı satırlardaki (row) hücreleri birleştirmek içinse rowspan'ı kullanıyoruz.

<table border="1">

   <tr>
	  
     <td colspan="2">satır 1, sütun 1 ve 2 birleşti</td>
		
   </tr>
	  
   <tr>
	  
    <td>satır 2, sütun 1</td>
    <td>satır 2, sütun 2</td>
		 
   </tr>
	  
   <tr>
	  
    <td rowspan="2">satır 3 ve 4 birleşti, sütun 1</td>
	  <td>satır 3, sütun 2</td>
		 
   </tr>
	  
   <tr>
	  
      <td>satır 4, sütun 4</td>
		 
   </tr>
	  
</table>

ÇIKTI:

HTML TABLODA LİNK VE RESİM GÖSTERME

---

Tablolaların içinde metin dosyalarından hariç link ve resimler'de gösterilir. örnek verelim:

<table border="1">

 <tr>
	  
 <th>Link</th>
 <th>Resim</th>
		
 </tr>
	  
 <tr>
	  
 <td><a href=""http://www.google.com"">GOOGLE</a></td>
 <td><img src="pepe.png" alt=""/></td>
		 
 </tr>
	  
</table>

Tablo Özellikleri

---

ÖZELLİK	ANLAMI
border="0"	Tablo kenarlığı boyutu.
cellspacing="0"	Sütunlar arası kenarlık boşluğu.
cellpadding="0"	Satırlar arası kenarlık boşluğu.
width="genislik"	Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil"	Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).

TD (Sütun) Özellikleri

ÖZELLİK	ANLAMI
align="hiza"	Kutu hizası, left, right, center kullanılabilir.
width="genislik"	Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
height="yukseklik	Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil"	Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).

NOT:

Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için &nbsp; kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.

5407

Gönder