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