HTML Tablo - Hücre Birleştirme

SurHan · 22 Ara 2018

HTML Tablo
-

[font=Verdana, sans-serif]HTML Tablo Örneği
-
---

Kod:

Ad	Soyad	Puan
Ali	Veli	50
Ayse	Hece	94
Mehmet	Pek	67
Ece	Sak	35

HTML ile Tablo Oluşturmak
Bir HTML tablosu -

Kod:

<table>

etiketi ile oluşturulur.
Tablonun her satırı -

Kod:

<tr>

etiketi ile oluşturulur.
Tablo içindeki hücre -

Kod:

<td>

etiketi ile oluşturulur.
Tablo içindeki başlık alanları -

Kod:

<th>

etiketi ile oluşturulur.
Örnek-

Kod:

<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>

Not:-

Kod:

<td>

elementi tablo içinde veri yerleştirilecek alanlardır.
Bu alanlar içine resim, yazı, liste veya başka bir tablo yerleştirilebilir.-

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.
Örnek-

Kod:

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 -

Kod:

border-collapse

özelliği bir bu ikili çizgi tek çizgi yapılabilir:
Örnek-

Kod:

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 -

Kod:

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.
Örnek-

Kod:

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 -

Kod:

text-align

özelliği kullanılır.-

Kod:

text-align:left

yazıyı sola yaslar.-

Kod:

text-align:right

yazıyı sağa yaslar.
Örnek-

Kod:

th {
    text-align: left;
}

HTML Tablo - Hücre Dışına Boşluk Vermek
Tablo hücrelerinin dışına boşluk vermek için CSS -

Kod:

border-spacing

özelliği kullanılır.
Bu özellik hücreler arasında boşluk oluşturur.
Örnek-

Kod:

table {
    border-spacing: 10px;
}

Not: Eğer -

Kod:

border-collapse

özelliği kullanılırsa -

Kod:

border-spacing

özelliğinin etkisi görülemez.-

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 -

Kod:

colspan

özniteliği kullanılır.
Örnek-

Kod:

<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 -

Kod:

rowspan

özniteliği kullanılır.
Örnek-

Kod:

<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 -

Kod:

<caption>

etiketi kullanılır.
Örnek-

Kod:

<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>

Not:-

Kod:

<caption>

etiketi -

Kod:

<table>

etiketinden hemen sonra kullanılmalıdır.-

HTML Tablo - Hücre Birleştirme

SurHan

SurHan