See the Pen html tabloları by ArmyYazılım (@armyyazilim) on CodePen.

<table>Etiketi ile bir HTML tablosu tanımlanır .

Her tablo satırı <tr>etiketi ile tanımlanır . <th>Etiketi ile birlikte bir tablo başlığı tanımlanır .

Varsayılan olarak, tablo başlıkları kalın ve ortalanmıştır. Bir tablo verisi / hücresi <td>etiketi ile tanımlanır .

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Not:<td> elementler tablosunun veri listelendiği yerdir.
Her türlü HTML öğesini içerebilirler; metin, resimler, listeler, diğer tablolar vb.

HTML Tablosu – Kenarlık Ekleme

Tablo için bir kenarlık belirtmezseniz, kenarlıksız olarak gösterilir.

CSS borderözelliği kullanılarak bir sınır belirlenir :

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

Hem tablo hem de tablo hücreleri için kenarlıkları tanımlamayı unutmayın.

HTML Tablosu – Daraltılmış Kenarlıklar

Kenarlıkların bir kenarlığa daralmasını istiyorsanız, CSS border-collapse özelliğini ekleyin :

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

HTML Tablosu – Hücre Dolgusu Ekleme

Hücre dolgusu, hücre içeriği ile sınırları arasındaki boşluğu belirtir.

Bir dolgu belirtmezseniz, tablo hücreleri dolgu olmadan görüntülenir.

Dolgu ayarlamak için CSS paddingözelliğini kullanın :

th, td {
  padding: 15px;
}

HTML Tablosu – Sola Hizalama Başlıkları

Varsayılan olarak, tablo başlıkları kalın ve ortalanmıştır.

Tablo başlıklarını sola hizalamak için, CSS text-alignözelliğini kullanın :

th {
  text-align: left;
}

HTML Tablosu – Kenarlık Boşluğu Ekleme

Kenarlık boşluğu, hücreler arasındaki boşluğu belirtir.

Bir tablonun kenar boşluğunu ayarlamak için, CSS border-spacingözelliğini kullanın :

table {
  border-spacing: 5px;
}

Çıktısı;

See the Pen html tablo iç boşluk by ArmyYazılım (@armyyazilim) on CodePen.

Not: Tablo sınırları daralttıysa, border-spacinghiçbir etkisi olmaz.

HTML Tablosu – Birçok Sütunlara Yayılan Hücreler

Bir hücrenin birden fazla sütuna yayılması için, colspanniteliği kullanın :

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Çıktısı;

See the Pen html tablolar colspan by ArmyYazılım (@armyyazilim) on CodePen.

HTML Tablosu – Birçok Satıra Yayılan Hücreler

Bir hücrenin birden fazla satırdan yayılması için, rowspanniteliği kullanın :

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Çıktısı;

See the Pen html tabloları rowspan by ArmyYazılım (@armyyazilim) on CodePen.

HTML Tablosu – Başlık Ekleme

Bir tablonun üstüne üst yazı eklemek için <caption>etiketi kullanın :

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Çıktısı;

See the Pen html tabloları caption by ArmyYazılım (@armyyazilim) on CodePen.

Not:<caption> etiketi  <table> etiketinden hemen sonra eklenmelidir .

Bir Tablo İçin Özel Bir Stil

Özel bir masa için özel bir stil tanımlamak id için, tabloya bir özellik ekleyin :

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Şimdi bu tablo için özel bir stil tanımlayabilirsiniz:

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

Çıktısı;

See the Pen table id by ArmyYazılım (@armyyazilim) on CodePen.

Ve daha fazla stil ekleyin:

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

Çıktısı;

See the Pen daha fazlası by ArmyYazılım (@armyyazilim) on CodePen.

Bölüm özeti

<table>Tablo tanımlamak için HTML öğesini kullanın

<tr>Bir tablo satırı tanımlamak için HTML öğesini kullanın

<td>Tablo verilerini tanımlamak için HTML öğesini kullanın

<th>Bir tablo başlığı tanımlamak için HTML öğesini kullanın

<caption>Tablonun üst genel başlığını tanımlamak için HTML öğesini kullanın

borderKenarlık tanımlamak için CSS özelliğini kullanın.

border-collapseHücre kenarlıklarını daraltmak için CSS özelliğini kullanın

paddingHücrelere dolgu eklemek için CSS özelliğini kullanın

text-alignHücre metnini hizalamak için CSS özelliğini kullanın

border-spacingHücreler arasındaki boşluğu ayarlamak için CSS özelliğini kullanın.

colspanBir hücrenin birçok sütuna yayılması için niteliği kullanın

rowspanBir hücreyi birçok satıra yaymak için niteliği kullanın

idBir tabloyu benzersiz bir şekilde tanımlamak için niteliği kullanın.

Etiketler	Açıklamalar
<table>	Bir tablo tanımlar
<th>	Tablodaki başlıklar hücresini tanımlar
<tr>	Tablodaki bir satırı tanımlar.
<td>	Tablodaki bir hücreyi tanımlar
<caption>	Tablonun genel başlığını tanımlar
<colgroup>	Biçimlendirme için bir tabloda bir veya daha fazla sütun grubunu belirtir.
<col>	Bir <colgroup> öğesindeki her sütun için sütun özelliklerini belirtir
<thead>	Başlık içeriğini bir tabloda gruplandırır
<tbody>	İçeriği bir tabloda gruplandırır
<tfoot>	Tablodaki altbilgi içeriğini gruplandırır

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …