Tablo ile İlgili Etiketler

Tablo ile İlgili Etiketler

Bu makalede tablo ile ilgili etiketleri açıklıyoruz.

Bu, tabloların ve tablo başlıklarının HTML'de nasıl tanımlanacağını örneklerle açıklıyor.

YouTube Video

Tablo ile İlgili Etiketler

<table> Etiketi

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>
Header 1 Header 2
Data 1 Data 2
  • <table> etiketi, verileri satır ve sütunlarda düzenleyip görüntülemek için bir tablo oluşturur.

    <table> etiketi, verileri görsel olarak düzenler ve birden fazla satır ve sütundan oluşan tablolar oluşturur. Satırlar <tr> etiketiyle, başlık hücreleri <th> etiketiyle ve veri hücreleri <td> etiketiyle tanımlanır.

  • Tablonun stilini ve düzenini CSS kullanarak özelleştirebilirsiniz.

<tr> Etiketi

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>
  • <tr> etiketi, bir tablodaki satırları tanımlamak için kullanılır.

    <tr> etiketi, bir tablodaki her satırı oluşturmak için kullanılır ve hücreler (<td> veya <th>) içerir.

  • Her bir satır birden fazla hücre içerebilir ve bu da tablonun genel yapısını oluşturur.

<th> ve <td> Etiketleri

1<th>Header 1</th>
2<td>Data 1</td>
  • <th> etiketi, bir tablonun başlık hücresini tanımlar. Genellikle başlık satırlarında kullanılır; hücrelerin içeriği kalın ve ortalanmış bir şekilde görüntülenir.
  • <td> etiketi, standart bir tablo veri hücresini tanımlar ve genel tablo verilerini görüntüler.

colspan ve rowspan Öznitelikleri

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>
Header 1 Header 2
Spanning Cell
Spanning Cell Data 1
Data 2

colspan ve rowspan, tablo hücrelerinin birden fazla sütun veya satıra yayıldığı durumlarda kullanılan özniteliklerdir.

  • colspan niteliği, bir hücrenin birden fazla sütunu kapsamasına olanak tanır.
  • rowspan özniteliği, bir hücrenin birden fazla satırı kapsamasına olanak tanır.

<thead>, <tbody>, <tfoot> Etiketleri

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
Footer 1 Footer 2
  • <thead> etiketi, bir tablonun başlık kısmını tanımlamak için kullanılır. Genellikle sütun başlıklarını içerir.

    <thead> etiketi, tablonun üst kısmında bulunur ve sütun başlıklarını tanımlar. Bu, veri bölümlerinin net bir şekilde ayrılmasına yardımcı olur.

  • <tbody> etiketi, tablonun gövde kısmını tanımlar. Veri satırlarını içerir.

    <tbody> etiketi, tablonun ana veri bölümünü içerir. <thead> ve <tfoot> etiketleri arasında yer alan satırları içerir.

  • <tfoot> etiketi, toplamları veya notları içeren tablonun alt kısmını tanımlar.

    <tfoot> etiketi, tablonun sonunda bulunur ve toplamları veya diğer açıklamaları göstermek için kullanılır. Büyük veri setleri için özetler veya toplamlar gösterirken özellikle faydalıdır.

<caption> ve <colgroup> Etiketleri

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>
Sample Table Caption
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
  • <caption> etiketi, tablonun içeriğini netleştirmek için bir başlık ekler. Genellikle tablonun üst kısmına yerleştirilir ve tablonun genel içeriğini özetlemek için kullanılır.

  • <colgroup> etiketi, tabloda sütunları gruplar ve stil veya düzen uygulamak için kullanılır. <col> etiketi ile belirli sütunlar için arka plan renklerini veya genişliklerini belirtebilirsiniz.

Tablo örneği

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>
Table Title
Header 1 Header 2 Header 3 Header 4
Data 11 Data 12 Data 13 Data 14
Data 21 Data 22 Data 23 Data 24
Table Footer Title Table Footer Summary
  • <table> etiketi, verileri satır ve sütunlar halinde görüntüleyen bir tablo oluşturmak için kullanılır.

  • <thead> etiketi, tablonun başlık satırlarını gruplar. Genellikle başlık olarak kullanılan <th> etiketlerini içerir.

  • <tbody> etiketi, tablonun ana içeriğini gruplar. Genellikle <td> etiketlerinden oluşan veri satırlarını içerir.

  • <tfoot> etiketi, tablonun altbilgi satırlarını gruplar. Toplamlar veya notlar görüntülemek için uygundur.

  • <colgroup> etiketi, bir tablonun sütunlarını gruplar ve bunlara toplu olarak stil uygulamak için kullanılır.

  • <caption> etiketi, tabloya bir başlık veya açıklama ekler ve kullanıcıların tablonun içeriğini anlamasını kolaylaştırır.

  • colspan niteliği, bir hücrenin birden fazla sütunu kapsamasına olanak tanır.

  • rowspan özniteliği, bir hücrenin birden fazla satırı kapsamasına olanak tanır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video