HTML TABLOLAR

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:

tablo

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 tablo

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:

html tablo

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:

html tablo

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:

tablo

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:

html tablo

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:

html tablo

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 tablo

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

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.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

2724

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.