HTML <table> etiketi

Tanım ve Kullanım

<table> HTML tablosunun etiketi tanımlanmıştır.

Bir HTML tablosu bir <table> bir element ve bir veya daha fazla <tr>ve<th> ve <td> Elementler:

HTML tabloları aşağıdaki elementleri de içerebilir:

Ayrıca bkz:

HTML Eğitimi:HTML Tablosu

HTML DOM Referans Kılavuzu:Table nesnesi

CSS Eğitimi:Tablo stillerini ayarlama

Örnek

Örnek 1

İki sütun ve iki satırlı basit bir HTML tablosu:

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

Kendi Kendine Deneyin

Örnek 2

Tabloya katlanabilir kenar çizgisi nasıl eklenir (CSS kullanılarak):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<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>
</body>
</html>

Kendi Kendine Deneyin

Örnek 3

Tabloyu nasıl sağa hizalayız (CSS kullanılarak):

<table style="float:right">
  <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>

Kendi Kendine Deneyin

Örnek 4

Tabloyu nasıl ortada hizalayız (CSS kullanılarak):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <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>

Kendi Kendine Deneyin

Örnek 5

Tabloya arka plan rengi nasıl eklenir (CSS kullanılarak):

<table style="background-color:#00FF00">
  <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>

Kendi Kendine Deneyin

Örnek 6

Tabloya iç dolgu nasıl eklenir (CSS kullanılarak):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>

Kendi Kendine Deneyin

Örnek 7

Tablo genişliğini nasıl ayarlanır (CSS kullanılarak):

<table style="width:400px">
  <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>

Kendi Kendine Deneyin

Örnek 8

Başlık oluşturma nasıl yapılır:

<table>
  <tr>
    <th>İsim</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>

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

Kendi Kendine Deneyin

Örnek 10

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

<table>
  <tr>
    <th>İsim</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>

Kendi Kendine Deneyin

Genel Özellikler

<table> Bu etiketler ayrıca HTML'deki Genel Özellikler.

olay özelliklerini destekler

<table> Bu etiketler ayrıca HTML'deki Olay Özellikleri.

Varsayılan CSS Ayarları

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

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

Kendi Kendine Deneyin

Tarayıcı Desteği

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