html'de tablo oluşturma arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/htmlde-tablo-olusturma/ Yazılımcı Notları Fri, 06 Apr 2018 06:56:48 +0000 tr hourly 1 https://wordpress.org/?v=6.1.10 https://www.mehmetkirazli.com/wp-content/uploads/2018/04/mehmetkirazlilogo.png html'de tablo oluşturma arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/htmlde-tablo-olusturma/ 32 32 HTML Tablo Oluşturmak https://www.mehmetkirazli.com/htmlde-tablo-olusturmak/ https://www.mehmetkirazli.com/htmlde-tablo-olusturmak/#respond Sun, 04 Mar 2012 10:29:04 +0000 http://www.mehmetkirazli.com/?p=601 Tablolar,verilerimizi bölümler halinde görüntülemek için kullanılırlar.Htmlde tablo oluşturmak için kullanacağımız etiket <table>..</table> dir. HTML Tablo Oluşturmak Oluşturacağımız tabloların çerçevelerini,her hücredeki elemanların konumunu değiştirmek isteyebiliriz.Bunun için bu etikette border,cellspacing,cellpadding özelliklerini kullanmalıyız.Öğrendiğimiz üzere bu özellikleri,etiketin içine yerleştiriyoruz.Şimdi bu özelliklerin ne işe yaradıklarından bahsedelim; align özelliği,tablomuzun konumunu belirler border özelliği,tablomuzun çerçevesini belirlemek için kullanılır.Vereceğimiz değerlerle çerçeve kalınlığı belirlenir …

The post HTML Tablo Oluşturmak appeared first on Mehmet Kirazlı.

]]> Tablolar,verilerimizi bölümler halinde görüntülemek için kullanılırlar.Htmlde tablo oluşturmak için kullanacağımız etiket <table>..</table> dir.

HTML Tablo Oluşturmak

Oluşturacağımız tabloların çerçevelerini,her hücredeki elemanların konumunu değiştirmek isteyebiliriz.Bunun için bu etikette border,cellspacing,cellpadding özelliklerini kullanmalıyız.Öğrendiğimiz üzere bu özellikleri,etiketin içine yerleştiriyoruz.Şimdi bu özelliklerin ne işe yaradıklarından bahsedelim;

align özelliği,tablomuzun konumunu belirler

border özelliği,tablomuzun çerçevesini belirlemek için kullanılır.Vereceğimiz değerlerle çerçeve kalınlığı belirlenir

bordercolor özelliği,çerçeve çizgilerinin rengini belirler

bgcolor özelliği,tablonun arka plan rengini belirler

width, tablomuzun genişliğini belirler

height, tablomuzun yüksekliğini belirler

Rowspan, satırları birleştirmek için kullanılan özelliktir

Colspan, sütunları birleştirmemize yarar

cellspacing özelliği,tablomuzdaki her hücrenin birbirine uzaklığını piksel cinsinden ifade eder

cellpadding ise hücrelerdeki elemanların hücre içindeki konumunu belirtir

 

Tablolarımızı hangi etiket yardımıyla oluşturabileceğimizi öğrendik.Şimdi tablolara satır bazında eleman eklememiz gerekiyor.Bunun için <tr> .. </tr> etiketini kullanacağız.Bu etiketi kullandığımızda tablomuzda bir satırlık yer ayırmış oluruz.Oluşturduğumuz satırlara elemanları eklemek için <td> .. </td> etiketinin kullanacağız.Eklemek istediğimiz her elemanı bu etiket içine yazacağız

 

–>Şunu da dipnot olarak düşmek gerekir.<td> etiketlerini,satır oluşturmak için kullanılan <tr> etiketlerinin arasına yazmalıyız.

–>2.dipnot olarak şunu söyleyelim.Öğrendiklerimizle oluşturacağımız tablolarda iki sütunu arada boşluk bırakmadan birleştirir.Bunun için <table> etiketinin style özelliğinden faydalanmalıyız.

<table style=”width: 30%”> yazarsak iki sütun arasında 30 piksek boşluk bırakacaktır.

 

Anlattıklarımıza 2 satır ve 2 sütunluk tablo oluşturan bir örnek verelim;

<html>
   <head>
     <title>Tablo Oluşturma</title>
   </head>
     <body>
      <table style="width: 30%">
       <tr>
       <td>1.satırın 1. elemanı</td>
       <td>1.satırın 2.elemanı</td>
       </tr>
       <tr>
       <td>2.satırın 1. elemanı</td>
       <td>2.satırın 2.elemanı</td>
       </tr>
      </table>
   </body>
</html>

Yazdıklarımız sonucunda çıktımız ;

Satır sayısını artırmak için <tr> etiketlerinden faydalanmalısınız.5 satır için 5 <tr> etiketi kullanın.Her satıra 5 eleman ( yani 5 sütun ) koymak istiyorsanız her <tr> etiketinin içine <td> etiketlerinden 5 tane koymalısınız.

Ek Bilgiler :

–><td> etiketinin bgcolor özelliği ile elemanın arka planına renk verebiliriz    

Örneğin : <td bgcolor=”orange”>

–><td> etiketinin background özelliği ile hücrenin arka planına resim ekleyebiliriz

Örneğin : <td background=”mehmet.jpg”>

 

Htmlde tablo oluşturmamıza yarayan özelliklerin çoğunu kullanarak yazdığım bir html tablo oluşturma kodunu paylaşmak istiyorum;

<html>
   <head>
     <title>Tablo oluşturma-genel</title>
   </head>
   <body>
     <table style="width: 30%" bgcolor="red" border="8" bordercolor="blue" align="left" >
      <tr>
      <td>1.satırın 1. elemanı</td>
      <td>1.satırın 2.elemanı</td>
      </tr>
      <tr>
      <td>2.satırın 1. elemanı</td>
      <td>2.satırın 2.elemanı</td>
      </tr>
     </table>
   </body>
</html>

Bu html sayfamızı Notepadde uzantısını .html olarak kaydedip üzerine çift tıkladığımızda tarayıcıdaki çıktımız;

 

tablo

Şimdi ise son olarak satır ve sütun birleştirmelere örnek verelim.Hatırladığımız üzere satır birleştirmek için Rowspan, sütun birleştirmek için ise Colspan özellikleri kullanılıyordu.Bunun için bir html bloğunu gösterelim ve çıktısıyla birlikte inceleyelim;

<html>
   <head>
    <title>Tablo</title>
   <body>
     <table border=2 width=400>
     <tr><td>1</td><td>2</td><td rowspan=2>3</td></tr>
     <tr><td>4</td><td>5</td></tr>
     <tr><td rowspan=1>6</td></tr>
     <tr><td colspan=2>7</td></tr>
   </head>
</html>

Çıktısı

tablo satir-sutun birlestirme

Rowspan=2  ile  1. ve 2.satırları birleştirerek 3 adında bir hücre oluşturduk

Colspan=2 ile de 1. ve 2.sütunları birleştirerek 7 adında bir hücre oluşturduk

Ve son olarak Rowspan=1 ile aslında birleştirme yapmamış olduk.

The post HTML Tablo Oluşturmak appeared first on Mehmet Kirazlı.

]]> https://www.mehmetkirazli.com/htmlde-tablo-olusturmak/feed/ 0