Merhaba,

HTML tabloları aynı bir Excel sayfasında olduğu gibi, satır ve sütunlardan oluşan, verileri düzenlememize yardımcı olan ögelerdir. HTML’de tablo oluştururken önce tablo etiketimizi, sonra satırlarımızı ve satırlarımızın içerisine de sütunlarımızı yerleştiriyoruz.

<table>
   <tr>
      <td>Ad</td>
      <td>Soyad</td>
   </tr>
   <tr>
      <td>Tony</td>
      <td>Stark</td>
   </tr>
   <tr>
      <td>Clark</td>
      <td>Kent</td>
   </tr>
   <tr>
      <td>Bruce</td>
      <td>Banner</td>
   </tr>
   <tr>
      <td>Bruce</td>
      <td>Wayne</td>
   </tr>
</table>

Görünümü:

Örnekte gördüğünüz üzere tablo etiketleri şimdiye kadar gördüğümüz etiketlere göre biraz daha fazla öge içeriyor. Örneğimizde Ad-Soyad değerlerini de bir satır olarak ekledik. Farklı bir kullanım ile bunları tablo ögelerimizden ayırabiliriz.

Nasıl ki HTML sayfamızın bir head ve bir body bölümü var, tablolarımızda da bu bölümleri kullanabiliriz. Hatta başlığımızı alt bölüme alabilir veya burada tekrarlatabiliriz.

<table>
   <thead>
      <tr>
         <th>Ad</th>
         <th>Soyad</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tony</td>
         <td>Stark</td>
      </tr>
      <tr>
         <td>Clark</td>
         <td>Kent</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Banner</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Wayne</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <th>Ad</th>
         <th>Soyad</th>
      </tr>
   </tfoot>
</table>

Görünümü:

Örnekte gördüğümüz gibi tablomuzun üst ve alt bölümlerine sütun başlıklarımızın girişini yaptık.

Tablo Çerçevesi

Örneklerde hazırladığımız tablolarda bir çerçeve bulunmuyordu. Daha düzenli bir görünüm için çerçeve kullanımı faydalı olacaktır. Bunun için <table> etiketimize border özelliği ekleyip, kalınlık değerini girmemiz yeterli.

<table border="1">
   <thead>
      <tr>
         <th>Ad</th>
         <th>Soyad</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tony</td>
         <td>Stark</td>
      </tr>
      <tr>
         <td>Clark</td>
         <td>Kent</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Banner</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Wayne</td>
      </tr>
   </tbody>
</table>

Görünümü:

Satır veya Sütunları Birleştirmek

Tablolarda son olarak göreceğimiz özellik satırları veya sütunları birleştirmek için kullandığımız rowspan ve colspan özellikleridir.

Rowspan nedir?

Rowspan satırları birleştirmemize olanak sağlayan bir özelliktir. Bunu yazıyla değil örnekle daha iyi görebiliriz.

<table border="1">
   <thead>
      <tr>
         <th>Evren</th>
         <th>Ad</th>
         <th>Soyad</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td rowspan="2">Marvel</td>
         <td>Tony</td>
         <td>Stark</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Banner</td>
      </tr>
      <tr>
         <td rowspan="3">DC</td>
         <td>Clark</td>
         <td>Kent</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Wayne</td>
      </tr>
   </tbody>
</table>

Görünümü:

Normalde her bir <tr> (satır) içerisine eşit sayıda <td> (sütun) girişi yapıyoruz. Burada yaptığımız işlem, 2 aynı sütun değerine sahip satırı gruplamak için aynı olan sütunlarda birleştirmek oldu. Peki bu gruplamayı biz satırları değil de sütunları birleştirerek yapmak istesek?

Colspan nedir?

Colspan da sütunları birleştirmemize olanak sağlayan bir özelliktir. Bunu da örnek üzerinde görelim:

<table border="1">
   <thead>
      <tr>
         <th>Ad</th>
         <th>Soyad</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td colspan="2">Marvel Evreni</td>
      </tr>
      <tr>
         <td>Tony</td>
         <td>Stark</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Banner</td>
      </tr>
      <tr>
         <td colspan="2">DC Evreni</td>
      </tr>
      <tr>
         <td>Clark</td>
         <td>Kent</td>
      </tr>
      <tr>
         <td>Bruce</td>
         <td>Wayne</td>
      </tr>
   </tbody>
</table>

Görünümü:

Burada da gruplandırmamızı satırlar üzerinden değil, sütunlar üzerinden yaptık. Grup isimlerimizi tek bir satırda 2 sütunu birleştirerek tanımlamış olduk.

Tablolar ile ilgili bilmemiz gerekenler şimdilik bu kadar. Bir sonraki yazıda HTML Formlara başlayacağız.