HTML’de Tablolar

1 Ocak 2015 - 28 Okunma
HTML’de Tablolar
HTML ile kolayca tablolar oluşturabilirsiniz. HTML’de tablo oluşturmak için 3 temel koda ihtiyacımız vardır. Bunlar; <table> <tr> <td> Bu kodlarla istediğiniz gibi tablo oluşturabilirsiniz. Sonucu aşağıdaki gibi olur; satır 1, sütun 1 satır 1, sütun 2 satır 2, sütun 1 satır 2, sütun 2 Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara ayrılır ve her […]

HTML ile kolayca tablolar oluşturabilirsiniz. HTML’de tablo oluşturmak için 3 temel koda ihtiyacımız vardır. Bunlar;

  • <table>
  • <tr>
  • <td>

Bu kodlarla istediğiniz gibi tablo oluşturabilirsiniz.

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Tablolar</title>
 </head>
 <body>
<table>
      <tr>
         <td>satır 1, sütun 1</td>
         <td>satır 1, sütun 2</td>
      </tr>
      <tr>
         <td>satır 2, sütun 1</td>
         <td>satır 2, sütun 2</td>
      </tr>
   </table>
</body>
</html>

Sonucu aşağıdaki gibi olur;

satır 1, sütun 1 satır 1, sütun 2
satır 2, sütun 1 satır 2, sütun 2

Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara ayrılır ve her satır <td> etiketiyle sütunlara ayrılır. <td> etiketinin anlamı table data dır. Bir tablo hücresi metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.

Tablolar ve Border Parametresi

HTML tablonuzda bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları olan bir tablo daha çok işe yarar. Bu etiketi <table border=”1″> yazarak kullanabiliriz.

HTML Tabloda Başlıklar

HTML tablonuzda başlık olmasını istiyorsanız <td> yerine ilk satırlarda <th> etiketi kullanmanız gerekir.

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Başlıklı Tablolar</title>
 </head>
 <body>
<table>
      <tr>
         <th>Başlık 1</th>
         <th>Başlık 2</th>
      </tr>
      <tr>
         <td>İçerik 1</td>
         <td>İçerik 2</td>
      </tr>
   </table>
</body>
</html>
Başlık 1 Başlık 2
İçerik 1 İçerik 2

Tabloda Hücre Birleştirme

Tablolarda hücre birleştirirken dikkat edilmesi gereken bir kaç husus var. İlki mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştiriyorsak colspan=”” veya iki satırı birleştiriyorsak rowspan=”” kodunu td kodu içerisine kaç sütun veya satır birleştireceğimizi yazarak kullanmamız gerekir.

Bu iki kodu kullanırken dikkatli olmamız gerekir yoksa sayılarda yapacağımız yanlışlık tablo görünümünde sorunlar oluşturacaktır. Bunu bir kaç örnekle pekiştirelim.

<!DOCTYPE html>
<html>
 <head>
  <title>HTML'de Tablo Satır Sütun Birleştirme</title>
 </head>
 <body>
<table>
<tr>
  <td>satır 1, sütun 1</td>
  <td rowspan="2">rowspan ile birleşti</td>
</tr>
<tr>
  <td>satır 2, sütun 1</td>
</tr>
<tr>
  <td colspan="2">colspan ile birleşti</td>
</tr>
</table>
</body>
</html>

Örneğin çalışan halini görelim;

satır 1, sütun 1 rowspan ile birleşti
satır 2, sütun 1
colspan ile birleşti

 

Tüm Tablo Etiketleri

Tablo Etiketi Açıklama
<table> Tablo
<th> Tablo başlığı
<tr> Satır
<td> Hücre
<caption> Manşet
<colgroup> Hücre grupları
<col> Sütun genişliği
<thead> Tablo başı
<tbody> Tablo body özelliği
<tfoot> Tablonun en alt kısmı

Tablo Özellikleri Etiketleri

Özellik Anlamı
border=”0″ Tablo kenarı boyut ayarı (Sıfır kenarlık yok anlamına gelir)
cellspacing=”0″ Sütunlar arası kenar boşluğu
cellpadding=”0″ Satırlar arası kenar boşluğu
width=”genislik” Tablo genişliğini verir. Piksel veya yüzde olarak ifade edilebilir.
class=”stil” Tablo stilini belirtir. (Bu konuyu CSS’de detaylı anlatacağız.)
ITC | İlkteknoloji