HTML ve CSS'ye Giriş (Bölüm 07): Tablolar (01)

Tablolar, satırlar ve sütunlardan oluşan oldukça karmaşık yapılar olup, tabloların dış temel yapısını her zaman table öğesi oluşturur.

<table>
…
</table>

Bu öğenin içinde gerçek tablo tanımı gerçekleşir. Bir tabloyu HTML'de uygulama sürecinde, tabloya bir çerçeve atamak önerilir. Böylece, satırların ve sütunların tam olarak nasıl göründüğünü daha iyi anlayabilirsiniz. Bunun için açılış <table> öğesine border="1" özniteliği-değeri kombinasyonunu atarsınız. (HTML'de border özniteliğinin kullanılmaması gerektiğini unutmayın. Bunun yerine ilgili CSS özelliklerine başvurulmalıdır. Ancak bu konuya daha sonra değineceğiz).

<table border="1">
…
</table>

Şimdi tablo satırlarının tanımına geçelim. Bunun için tr öğesi kullanılır.

<table border="1">
   <tr></tr>
</table>

Ancak bu henüz istenilen çıktıya yol açmaz. Sonrasında sütunları tanımlamanız gerekir. Bu da yine td öğesi aracılığıyla gerçekleşir.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Şimdi ilk tablo içeriğini tanımlayabilirsiniz. Bu içeriği <td> ve </td> arasında tanımlarsınız.

<table border="1">
   <tr>
      <td>İçerik 1</td>
   </tr>
</table>

Şimdi sonuca tarayıcıda bir göz atabilirsiniz.

Bu şu anda oldukça etkileyici değil, çünkü tablo şu anda sadece bir hücreden oluşuyor. Şimdi başka bir sütun daha ekleyebilirsiniz. Bunu yine bir td öğesiyle yaparsınız. Bu öğeyi tr öğesi içinde tanımlamayı unutmayın.

<table border="1">
   <tr>
      <td>İçerik 1</td>
      <td>İçerik 2</td>
   </tr>
</table>

Bu durumda da sonucu tarayıcıda görüntüleyebilirsiniz.

Tabloya ekstra satırlar eklemek için, sadece bir başka tr öğesi açarsınız ve istenen td öğelerini tanımlarsınız.

Bu için aşağıdaki örneğe bakalım:

<table border="1">
   <tr>
      <td>İçerik 1</td>
      <td>İçerik 2</td>
   </tr>
   <tr>
      <td>İçerik 3</td>
      <td>İçerik 4</td>
   </tr>
</table>

Tarayıcıdaki sonucu görüntüleyebilirsiniz:





Bu şekilde geniş tablolar da oluşturabilirsiniz.

Kafa, Gövde ve Ayak Belirleme

Tablolar mantıklı alanlara ayrılabilir. Bu bir kafa, bir veya daha fazla veri alanı ve bir ayak alandır. Aşağıdaki örnek böyle bir şeyin nasıl görünebileceğini göstermektedir:

<table border="1">
  <thead>
    <tr>
      <th>Kalkış</th>
      <th>Varış</th>
      <th>Peron</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Münih</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Ve işte tarayıcıdaki sonuca bir göz atın:





Bu bölgelere ayrılmanın görsel bir etkisi olmadığı açıktır. Tabii ki şöyle bir soru akla geliyor: Neden bu alanları tanımlama zahmetine giriyorsunuz? İki iyi nedeni vardır:

• CSS sayesinde istenildiğinde alanları farklı biçimlendirebilirsiniz.

• Tarayıcılar, uzun tabloları yazdırırken tablo başlığını ve tablo altını her sayfada tekrar edebilir.

Tablo başlığı thead ile başlatılır. Bu, başlık alanına ait olan tablo satırlarını kapsar. Başlık alanını kapatmayı unutmamanız önemlidir: </thead>.

Bir tabloya tablo altı eklenmesi gerekiyorsa, bu kesinlikle tablo gövdesinden önce tanımlanmalıdır. Ayak, <tfoot> ile başlar. Buraya, ayağa ait bir veya daha fazla satır ekleyebilirsiniz. Tablo ayağını </tfoot> ile kapatırsınız.

Gerçek tablo gövdesi, tbody öğesi içinde tanımlanır. Bu tbody öğesi birden fazla olabilir. Her tablo gövdesi, </tbody> ile kapatılır.

Örneğin, bir tabloda neden birden fazla tbody öğesi kullanmalısınız? Bu konuda güzel bir örnek, Bundesliga tablosu olabilir. Böyle bir tabloda genellikle birden fazla al...[that's the cutoff point]

Sütunları önceden tanımlamak

Tablonun tarayıcılar tarafından nasıl görüntülendiği, elbette ki mevcut satır ve sütun sayısından büyük ölçüde etkilenir. Bir tabloyu görüntüleme süreci, tarayıcı için aslında pek de kolay değildir. Aslında tarayıcının bir tabloyu gösterebilmesi için önce tüm tabloyu okuması gerekmektedir. Özellikle çok geniş tablolarda, bu elbette ki bir süre alabilir. Bu sorunu aşmanın yolu, tarayıcıya tablonun gerçekte kaç sütundan oluştuğunu doğrudan belirtmekten geçer.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Başlık</th>
     <th>Fiyat</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Hemen Her Şeyin Kısa Bir Tarihi</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

colgroup ile sütun tanımlamaları önceden belirtilir. Dikkat edin ki, eski HTML sürümlerinde mevcut olan colgroup için çoğu özellik HTML5'te artık geçerli değildir. Şu anda yalnızca span özniteliği geçerlidir. Bu özniteliğin beklediği değer, tabloda bulunan sütunların sayısını içerir.

colgroup elemanı, giriş <table> elemanının hemen arkasında yer alır. Sütunlar, daha sonra sırasıyla tanımlanan col elemanları aracılığıyla belirtilir.

colgroup kullanımında temelde iki seçenek vardır:

• span özniteliği ile

• span özniteliği olmadan

span özniteliği kullanılmazsa, her bir sütun için col elemanı tanımlanmalıdır. Bu eleman, tek başına duran bir eleman olduğunu unutmayın.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Başlık</th>
     <th>Fiyat</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Hemen Her Şeyin Kısa Bir Tarihi</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Ayrıca bir karışım şekli de bulunmaktadır.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Bu özellik, bir sütunun ayrı ayrı önceden belirlenmesi gerektiğinde ve diğer sütunları bir araya getirmek istendiğinde çok kullanışlıdır.