HtmlBanker | Sitene Ekle | Html Kodlari | Web Tasarımlari | HtmlBank Sitemize Hoşgeldiniz

Rüya Gerçekleri

Rüyalarımızın yüzde 90'ını unuturuz Uyandıktan 5 dakika sonra rüyamızın yarısını unuturuz, 10 dakika sonra ise yüzde 90'ını. Erkek ve kadınlar farklı rüyalar görür..............

18 Saniye de Başar

Bu Oyunda 18 saniyeden Fazla Kalabilecekmisin Bakalım. İlginç Bir Test Mutlaka Dene...

Paris Hilton

Ünlü Güzel Paris Hilton'un Hayatı Hakkında Bilgi Edinmek İçin işte Sana Bir Fırsat...

From Portfolio

temp
temp
scotch egg
temp
scotch egg

Sponsor Reklam

some text

 

Liste'nin Enleri

  • Haftanın Videosu
  • Haftanın Sayfası
  • Forum

View more

KarikaturMuzesiKapat !

HtmlBanker | Tr.Gg Web Master Hizmetleri

Tablo Kodlari

TABLE KODU - TABLO KODLARI - OLUŞTURMA - YAPMA 

<table>..</table> kodlarından yola çıkarak size çerçeve kodlarını ve tablo kodlarını göstereceğiz, html ile çerçeveyi nasıl oluşturacağınız, sütun ve satırları neye göre belirleyeceğinizi de göstermeye çalışacağız..

Tek başına <table> kodu tablo yapmak için geçerli değildir, yazmak istediğimiz yazıyı tek bir çerçeve içine almak istiyorsak eğer, yani şunun gibi;


İşte yazımız çerçeve içinde
Size gereken kod şu;

<table width="200" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
  <td>İşte yazımız çerçeve içinde</td>
</tr>
</tbody>
</table>


  Daha farklı, satır ve sütunları olan bir çerçeve istiyorsanız, örneğin;

sol 1 sağ 1
sol 2 sağ 2
sol 3 sağ 3


Bu çerçevemizin kodu ise;

<table width="200" height="150" border="1" align="center" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>sol 1</td>
<td>sağ 1</td>
</tr>
<tr>
<td>sol 2</td>
<td>sağ 2</td>
</tr>
<tr>
<td>sol 3</td>
<td>sağ 3</td>
</tr>
</tbody>
</table>


Burada ilk çerçeveden farklı olarak 2 sütun ve 3 satır oluşturduk, çerçeveyi ortaladık ve yükseklik olarak bir ölçü belirledik.. Size en can alıcı noktaları belirleyip bir örnek daha vererek gerisini size bırakalım.. Buradaki kodda width : Genişlik, height: Yükseklik, align="center" : Ortalama (left yapsaydık sola, right yapsaydık sağa hizalamış olurduk), border: çerçevenin varlığını oluşturan etmen (0 yapsaydık çerçeve kenarları görünmezdi, webmasterların en sık kullandığı tablolama biçimi border 0 dır), cellpadding: Yazının çerçeveyle arasındaki mesafe, cellspacing: ızgara kalınlığı, <tbody> : gövdeyi oluşturmak için olmazsa olmazlardan, <tr>: sütun <td>: satır ve son olarak kodumuzu </table> ile kapattık..

Şimdi bu örneklerden sonra kodlarla biraz oynayıp neler yapabileceğimizi görelim..


yazı1 yazı2 yazı3 yazı4
yazı5 yazı6 yazı7 yazı8
yazı9 yazı10 yazı11 yazı12
yazı13 yazı14 yazı15 yazı16
yazı17 yazı18 yazı19 yazı20


  Bu sefer 4 sütun ve 5 satırlı bir tablo oluşturduk.. Peki neleri değiştirdik?

<table width="250" height="150" border="0" cellpadding="4" cellspacing="3">
<tbody>
<tr>
<td>yazı1</td>
<td>yazı2</td>
<td>yazı3</td>
<td>yazı4</td>
</tr>
<tr>
<td>yazı5</td>
<td>yazı6</td>
<td>yazı7</td>
<td>yazı8</td>
</tr>
<tr>
<td>yazı9</td>
<td>yazı10</td>
<td>yazı11</td>
<td>yazı12</td>
</tr>
<tr>
<td>yazı13</td>
<td>yazı14</td>
<td>yazı15</td>
<td>yazı16</td>
</tr>
<tr>
<td>yazı17</td>
<td>yazı18</td>
<td>yazı19</td>
<td>yazı20</td>
</tr>
</tbody>
</table>


  Burada en göze çarpan şey çerçevenin kenarlarının olmayışı, bunu sadece border="0" tag'ının 0(sıfır) rakamıyla yaptık, peki bunu 1 yaparsak nasıl olurdu? Yani border="1" olsaydı ne kadar değişebilirdi tablomuz? Deneyelim..

yazı1 yazı2 yazı3 yazı4
yazı5 yazı6 yazı7 yazı8
yazı9 yazı10 yazı11 yazı12
yazı13 yazı14 yazı15 yazı16
yazı17 yazı18 yazı19 yazı20


Gördüğümüz gibi border tagını 0 yaptığımızda diğer cellpadding ve cellspacing bile bir işe yaramamıştı, çünkü çerçeveyi asıl ortaya çıkaran border kodumuzu 0(sıfır) olarak belirlemiştik, bunu 1 rakamına çevirdiğimizde çerçevemiz ortaya çıkmış oldu.. Burada sütunları oluşturan kodun <td>...</td> olduğunu tekrar hatırlatalım ve tabiki satırları oluşturan ise <tr>...</tr> idi, 5 satırımız olduğuna göre her 4 sütunluk bölümü bir <tr>..</tr> içine almak gerekir, yani 

<tr>
<td>yazı1</td>
<td>yazı2</td>
<td>yazı3</td>
<td>yazı4</td>
</tr>


Bunlardan alt alta 5 tane yazdığımızda 4 sütun 5 satır oluşur... Peki bu satırlardan birini yada birkaçını çekip alırsak ne olur? örneğin <td>yazı1</td> ve <td>yazı15</td> kısımlarını çıkaralım..

yazı2 yazı3 yazı4
yazı5 yazı6 yazı7 yazı8
yazı9 yazı10 yazı11 yazı12
yazı13 yazı14 yazı16
yazı17 yazı18 yazı19 yazı20


Görüldüğü üzere yazı1 alanını çıkartıp aldığımızda diğer sütunların (yazı2,yazı3,yazı4) sol tarafa kaydığını ve en sağ kısmın boş kaldığını görüyoruz, aynı şekilde 4. satıra bakarsak, yazı15 alanını çıkartıp aldığımızda, hemen sağındaki yazı16 alanının sol tarafa kayarak yerini doldurduğunu görüyoruz..

Bugün 4 ziyaretçi (27 klik) Burdaydı!
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=