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