HTML <th> etiketi

Tanım ve Kullanım

<th> etiketi HTML tablosundaki başlık hücresi tanımlar.

HTML tabloları iki tür hücreye sahiptir:

  • Başlık hücresi - Başlık bilgisi içerir (kullanarak) <th> öğesi oluşturulur)
  • Veri hücresi - Veri içerir (kullanarak) <td> öğesi oluşturulur)

Varsayılan olarak,<th> Öğedeki metin kalın ve ortadadır.

Varsayılan olarak, <td> öğesindeki metin sıradan ve solda hizalanmıştır.

Ayrıca bkz.:

HTML Eğitimi:HTML Tablosu

HTML DOM Referans Kılavuzu:TableHeader nesnesi

CSS Eğitimi:Formun stili nasıl ayarlanır:

Örnek

Örnek 1

Üç satır, iki başlık hücresi ve dört veri hücresi içeren basit bir HTML tablosu:

<table>
  <tr>
    <th>Ay</th>
    <th>Yatırım</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>￥4500</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 2

Hizalama nasıl yapılır: <th> içeriğini (CSS kullanılarak):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Ay</th>
    <th style="text-align:left">Tasarruf</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>￥4500</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 3

CSS ile tablo başlık hücresine arka plan rengi nasıl eklenir:

<table>
  <tr>
    <th style="background-color:#FF0000">Ay</th>
    <th style="background-color:#00FF00">Tasarruf</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
 </table>

Kişisel olarak deneyin

Örnek 4

CSS ile tablo başlık hücresi yüksekliğini nasıl ayarlayacağınızı öğrenin:

<table>
  <tr>
    <th style="height:100px">Ay</th>
    <th style="height:100px">Yatırım</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 5

Tablo başlık hücrelerinde satır atlamayı nasıl önlersiniz (CSS kullanılarak):

<table>
  <tr>
    <th>Ay</th>
    <th style="white-space:nowrap">Yeni araba için biriktirilen para</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 6

Yatayda nasıl hizalanır: <th> içeriğini (CSS kullanılarak):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Ay</th>
    <th style="vertical-align:bottom">Yatırım</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 7

Tablo başlık hücrelerinin genişliğini nasıl ayarlanır (CSS kullanılarak):

<table style="width:100%">
  <tr>
    <th style="width:70%">Ay</th>
    <th style="width:30%">Yatırım</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 8

Tablo başlığını nasıl oluşturursunuz:

<table>
  <tr>
    <th>Ad</th>
    <th>E-posta</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 9

Başlıklı bir tablo nasıl oluşturulur:

<table>
  <caption>Aylık Yatırım</caption>
  <tr>
    <th>Ay</th>
    <th>Yatırım</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>￥4500</td>
  </tr>
</table>

Kişisel olarak deneyin

Örnek 10

Çok satırlı veya çok sütunlu tablo hücrelerini nasıl tanımlarsınız:

<table>
  <tr>
    <th>Ad</th>
    <th>E-posta</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Kişisel olarak deneyin

Özellik

Özellik Değer Açıklama
abbr Metin Başlık hücreindeki içeriğin kısaltılmış sürümünü belirtir.
colspan Sayı Belirtilen başlık hücrelerinin geçiş yapması gereken sütun sayısını belirler.
headers header_id Bir veya daha fazla hücrele ilgili başlık hücrelerini belirtir.
rowspan Sayı Belirtilen başlık hücrelerinin geçiş yapması gereken satır sayısını belirler.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Başlık hücresi sütun başlığı, satır başlığı mı yoksa bir grup sütun veya satırın başlığı mıdır?

Genel Özellikler

<th> Bu etiketler aynı zamanda HTML'deki Genel Özellikler.

olay özelliklerini destekler

<th> Bu etiketler aynı zamanda HTML'deki Olay Özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <th> Element:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek