HTML Tablo

HTML ile Tablo Oluşturmak

Bir HTML tablosu <table> etiketi ile oluşturulur.

Tablonun her satırı <tr> etiketi ile oluşturulur.

Tablo içindeki hücre <td> etiketi ile oluşturulur.

Tablo içindeki başlık alanları <th> etiketi ile oluşturulur.

<table style="width:100%">
  <tr>
    <th>Ad</th>
    <th>Soyad</th> 
    <th>Yaş</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Veli</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Hakan</td>
    <td>Pek</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Cem</td>
    <td>Cuma</td>
    <td>80</td>
  </tr>
</table>

HTML Tablo - Tabloya Kenar Çizgisi Eklemek

Tabloyu oluşturduğunuzda eğer border yani sınır çizgisi özelliğini ayarlamazsanız, tablonun çerçevesiz bir yapısı olduğunu fark edeceksiniz.

Bir tabloya sınır çizgisi oluşturmak için CSS border özelliğinden faydalanırız.

table, th, td {
    border: 1px solid black;
}

HTML Tablo - Kenar Çizgisini Birleştirmek

Dikkat ettiyseniz tablonun kenar çizgisi iki çizgiden oluşur.

Genelde bu istenen bir özellik değildir.

CSS border-collapse özelliği bir bu ikili çizgi tek çizgi yapılabilir:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

HTML Tablo - Hücrelere İç Boşluk Eklemek (Padding)

Hücre içindeki veri ile kenar çizgisi arasındaki boşluk CSS padding özelliği ile yapılır.

Eğer padding değerini belirtmezseniz, tablonun içindeki hücreler ile veriler arasında boşluk olmaz.

th, td {
    padding: 15px;
}

HTML Tablo - Başlıkları Sola ya da Sağa Yaslamak

Varsayılan olarak tablo başlıkları içindeki metinler ortalanmış olarak gelir.

Başlık içindeki yazıyı sağa ya da sola yaslamak için CSS text-align özelliği kullanılır.

text-align:left yazıyı sola yaslar.

text-align:right yazıyı sağa yaslar.

th {
    text-align: left;
}

HTML Tablo - Hücre Dışına Boşluk Vermek

Tablo hücrelerinin dışına boşluk vermek için CSS border-spacing özelliği kullanılır.

Bu özellik hücreler arasında boşluk oluşturur.

table {
    border-spacing: 10px;
}

HTML Tablo - Hücre Birleştirme

Tablo içindeki birkaç hücreyi birleştirmek mümkündür.

Tablo içindeki hücreleri birleştirmek için colspan özniteliği kullanılır.

<table style="width:100%">
  <tr>
    <th>Ad</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>2425566</td>
    <td>4440232</td>
  </tr>
</table>

HTML Tablo - Satırları Birleştirmek

Tablo içindeki birkaç satırı birleştirmek mümkündür.

Tablo içindeki satırları birleştirmek için rowspan özniteliği kullanılır.

<table style="width:100%">
  <tr>
    <th>Ad</th>
    <td>Ali Veli</td>
  </tr>
  <tr>
    <th rowspan="2">Telefon</th>
    <td>23344554</td>
  </tr>
  <tr>
    <td>55566778</td>
  </tr>
</table

HTML Tablo - Tabloya Başlık Eklemek

HTML tabloya başlık eklemek için <caption> etiketi kullanılır.

<table style="width:100%">
<caption>Öğrenciler</caption>
  <tr>
    <th>Ad</th>
    <th>Soyad</th>    
  </tr>
  <tr>
    <td>Ali</td>
    <td>Veli</td>   
  </tr>
  <tr>
    <td>Cem</td>
    <td>Tem</td>
  </tr> 
</table>