Html Dersleri – 8 – Tablolar

Html sayfalarımızda tablolar oluşturmak için kullanabileceğimiz etiketler bulunmaktadır. 3 etiketi öğrenerek kolayca tablolar oluşturabiliriz.

Html’de Tablo Nasıl Oluşturulur?

Tablomuzu oluşturmak için <table>…</table> etiketlerini kullanırız. Tablolarımız satırlardan ve sütunlardan oluşmaktadır. Html içerisinde bu mantık ise satırlar ve satırların içerisinde sütunlar şeklinde kullanılmaktadır.
<table>…</table> etiketlerini kullanarak oluşturduğumuz tablomuzun içerisinde <tr>…</tr> etiketleri ile satırlar oluşturabiliriz. Eklenen her bir <tr>…</tr> etiketi yeni bir satırı temsil eder.
Daha sonra <td>…</td> etiketlerini kullanarak sütunlarımızı oluşturabiliriz. Düzenli bir yapı için aynı miktarda sütun oluşturulması gerekmektedir.

Hadi ilk tablomuzu oluşturalım.

Kullanım:

<table border="1">
   <tr>
      <td>1.Satır/1.sütun</td>
      <td>1.Satır/2.sütun</td>
   </tr>
   <tr>
      <td>2.Satır/1.sütun</td>
      <td>2.Satır/2.sütun</td>
   </tr>
</table>

Çıktısı:

Yukarıdaki örnekteki gibi tablolarımızı oluşturabiliriz. Tablolarımızın kenarlıklara sahip olmasını istiyorsak <table> etiketinin border parametresini kullanarak kenarlığın kalınlığını belirmemiz gerekmektedir. Belirtmediğimiz taktirde tablomuzun kenarlıkları gözükmeyecektir.

Tablolarda Başlıklar

Html tablolarımızda ki sütunlarımıza başlıklar ekleyebiliriz. <tr>…</tr> etiketini kullanarak oluşturduğumuz satırlarda <th>…</th> etiketini kullanarak başlıklarımızı içeren sütunları oluşturabiliriz. Bir önceki örneğimizi kullarak, başlıkları olan yeni bir tablo oluşturalım.

Kullanım:

<table border="1">
   <tr>
      <th>İlk Sutun Başlığı</th>
      <th>İkinci Sutun Başlığı</th>
   </tr>
   <tr>
      <td>1.Satır/1.sütun</td>
      <td>1.Satır/2.sütun</td>
   </tr>
   <tr>
      <td>2.Satır/1.sütun</td>
      <td>2.Satır/2.sütun</td>
   </tr>
</table>

Çıktısı:

Boş Sutunlar

Konumuzun başında satırlarımızın eşit miktarda sütun içermesi gerektiğinden bahsetmiştik. Bazen ihtiyaçlarımıza göre tablolarımız farklılık gösterebilir. Sütun sayısı farklı veya veri gelmeyecek sütunlarımız olabilir. Ancak boş sütunlar bazı tarayıcılar tarafından desteklenmemektedir.

Tablolarımızda satır ve sütunlarımız ek özelliklere de sahiptir. İhtiyacımız göre satırları ve sütunları olduğundan daha farklı sınırlamalarla kullanabiliriz. Örneğin birden fazla satır veya sütunu birleştirerek orada tek bir satır veya sütun olmasını sağlayabiliriz.

Örneğin:

<table border="1">
   <tr>
      <th>İlk Sütun Başlığı</th>
      <th>İkinci Sütun Başlığı</th>
   </tr>
   <tr>
      <td>1.Satır/1.sütun</td>
      <td>1.Satır/2.sütun</td>
   </tr>
   <tr>
      <td>2.Satır/1.sütun</td>
      <td></td>
   </tr>
</table>

Çıktısı:

Bazı tarayıcılar 2.Satır/2.Sütun hücresini boş olduğundan dolayı diğerlerinden farklı gösterebilirler(Sütun oluşmadığından dolayı iç kenarlık gözükmeyecektir. Gözüküyorsa tarayıcınız bu durumu destekliyor). Bu gibi durumların önüne geçmek için bir karakter boşluk kullanabiliriz.Ancak tarayıcılar space tuşunu kullanarak oluşturduğumuz boşluğu umursamayacağından dolayı   kullanarak boşluk oluşturmamamız gerekecektir. Bunun nedenine Html Dersleri – 4 – Özel Karakterler konusunda değinmiştik.

Bununla birlikte satırları veya satırlardaki sutunları da birleştiredebiliriz.

Sütunları Birleştirmek – Colspan

Colspan parametresini kullaranarak satırımızdaki belirli sayıda sütunumuzu birleştirebiliriz.

Kullanım:

<table border="1">
   <tr>
      <th>İlk Sütun Başlığı</th>
      <th>İkinci Sütun Başlığı</th>
      <th>Üçüncü Sütun Başlığı</th>
      <th>Dördüncü Sütun Başlığı</th>
   </tr>
   <tr>
      <td>1.Satır/1.sütun</td>
      <td>1.Satır/2.sütun</td>
      <td>1.Satır/3.sütun</td>
      <td>1.Satır/4.sütun</td>
   </tr>
   <tr>
      <td>2.Satır/1.sütun</td>
      <td colspan="2">2.Satır/2. ve 3. sütun</td>
      <td>2.Satır/4.sütun</td>
   </tr>
</table>

Çıktısı:

Örneğimize baktığımız her bir satırımız 4 sütundan oluşurken 2.satırımızdaki 2. ve 3. sütunlar birleştirilmiş bir bçimde karşımıza çıkıyor. colspan parametresini kullanarak birleştirmek istediğimiz sütun sayısını yazarak kolayca birleştirebiliriz.

Satırları Birleştirmek – Rowspan

Rowspan parametresini kullarakta belirli sayıda satırı birleştirebiliriz.

Kullanım:

<table border="1">
   <tr>
      <th>İlk Sütun Başlığı</th>
      <th>İkinci Sütun Başlığı</th>
      <th>Üçüncü Sütun Başlığı</th>
      <th>Dördüncü Sütun Başlığı</th>
   </tr>
   <tr>
      <td rowspan="2">1. ve 2. Satır/1.sütun</td>
      <td>1.Satır/2.sütun</td>
      <td>1.Satır/3.sütun</td>
      <td>1.Satır/4.sütun</td>
   </tr>
   <tr>
      <td>2.Satır/2.sütun</td>
      <td>2.Satır/3.sütun</td>
      <td>2.Satır/4.sütun</td>
   </tr>
</table>

Çıktısı:

Örneğimize baktığımızda 1.vs 2. satırlarımızın ilk hücrelerini tabloda hiçbir bozulma olmadan birleştirdiğimizi görebiliriz. Burada dikkat etmemiz gereken birleştirdiğimiz hücrelerin de aslında tablolada ki hücre sayısına etki ettiğidir. Tablolarımızı oluştururken düzenli bir tablo yapısı için eşit miktarda hücreler oluşturmaya veya birleştirdiğimiz hücreleri de bu sayıya dahil etmeye dikkat etmeliyiz.