Sık Kullanılanlara Ekle  Giriş Sayfası Yap  iletişim  Msn Ekle
Sitemizi Facebook'ta Paylaşmak için Tıkla!




canlı tv televizyonlar izle kesintisiz bedava seyret


canlı tv televizyonlar izle kesintisiz bedava seyret


fbmlkodarsiv.tr.gg Pagerank



istatistik    Bugün Tekil: 187
   Bugün Toplam: 442
   IP Adresin: 54.162.218.217

Html Kodları | Canlı Tv izle - Radyo Dinle | Static Html | Facebook Ayarları ve Bilgileri

Html Tablo Kodlari Olusturma

Bu Sayfayı ;

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..

  Biz öz olarak anlatmaya çalıştık, sizde kodlarla biraz uğraştığınızda değişik çerçeveler yapabilirsiniz, kod ana haliyle budur, bu kodlarla pratik yaparak daha iyi sonuçlar elde edebilirsiniz.






Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: BayMeraklı, 16.03.2015, 17:50 (UTC):
Kardeşim peki bunlara nasıl buton ekliyoruz? Mesela Bir yorum ekle alanı yapiyorsun, Yorum ekle butonunu nasıl yapiyorsun.Ayrıca teşekkür ederim.

Yorumu gönderen: M.A, 11.11.2014, 12:49 (UTC):
Çok sağolasın işime çok yaradı

Yorumu gönderen: nuslu, 18.05.2014, 21:19 (UTC):
okadar istifade ediyorum ki çok acemi olmama rağmen harika işe yarıyor.Allah razı olsun sizlerden.

Yorumu gönderen::13.12.2013, 18:19 (UTC)
test-code
test-code
Kapalı

değerli kardeşim.çok muhteşem bir bilgiyi vermişsin.ellerine ve bilgine sağlık

Yorumu gönderen::30.10.2012, 20:10 (UTC)
reha-pergole
reha-pergole
Kapalı

Başarılar

Yorumu gönderen::24.12.2011, 10:24 (UTC)
darkorbit-int1
darkorbit-int1
Kapalı

güzel sayfa istiyorum ne onerirsiniz ?



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın:

Sitemizi Twitter'da Takip Edin


=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=