7.1 <caption> Teqi
<caption>, <thead>, <tbody> və <tfoot> teqləri HTML-də cədvəllərin strukturlaşdırılmasını və semantik işarələməsini yaxşılaşdırmaq üçün istifadə olunur. Bu teqlər məlumatları təşkil etməyə kömək edir, cədvəlləri həm istifadəçilər, həm də axtarış sistemləri üçün daha anlaşılan və sadə edir.
<caption> Teqi
<caption> teqi cədvələ başlıq əlavə etmək üçün istifadə olunur. Bu, cədvəlin məzmununu təsvir etməyə kömək edir və onu istifadəçilər üçün daha aydın, axtarış sistemləri üçün isə daha əlçatan edir.
Sintaksis:
<table>
<caption>Cədvəlin Başlığı</caption>
<!-- Cədvəlin məzmunu -->
</table>
Nümunə:
<table>
<caption>Cədvəlin Başlığı</caption>
<tr>
<th>Ad</th>
<th>Qiymət</th>
</tr>
<tr>
<td>İvan</td>
<td>90</td>
</tr>
<tr>
<td>Mariya</td>
<td>85</td>
</tr>
</table>
7.2 <thead> tag-i
<thead> tag-i cədvəl başlıqları sıralarını qruplaşdırmaq üçün istifadə olunur. Bu, cədvəlin başlığını onun əsas məzmunundan məntiqi olaraq ayırmağa kömək edir.
Sintaksis:
<table>
<thead>
<tr>
<th>Başlıq 1</th>
<th>Başlıq 2</th>
</tr>
</thead>
<!-- Cədvəlin məzmunu -->
</table>
Nümunə:
<table>
<thead>
<tr>
<th>Ad</th>
<th>Qiymət</th>
</tr>
</thead>
<tbody>
<tr>
<td>İvan</td>
<td>90</td>
</tr>
<tr>
<td>Mariya</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 <tbody> Tagı
<tbody> tagı cədvəlin əsas hissəsinin məzmununu qruplaşdırmaq üçün istifadə olunur. Bu, əsas məzmunu cədvəlin başlıq və "alt" hissəsindən ayırmağa kömək edir.
Syntax:
<table>
<thead>
<tr>
<th>Başlıq 1</th>
<th>Başlıq 2</th>
</tr>
</thead>
<tbody>
<!-- Cədvəlin məzmunu -->
</tbody>
</table>
Nümunə:
<table>
<thead>
<tr>
<th>Ad</th>
<th>Qiymət</th>
</tr>
</thead>
<tbody>
<tr>
<td>İvan</td>
<td>90</td>
</tr>
<tr>
<td>Mariya</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 <tfoot> teqi
<tfoot> teqi cədvəlin “alt hissə” (aşağı) xətləri qruplaşdırmaq üçün istifadə olunur. O, adətən yekun və ya ümumi məlumatı əhatə edir.
Sintaksis:
<table>
<thead>
<tr>
<th>Başlıq 1</th>
<th>Başlıq 2</th>
</tr>
</thead>
<tbody>
<!-- Cədvəlin məzmunu -->
</tbody>
<tfoot>
<tr>
<td>Yekun 1</td>
<td>Yekun 2</td>
</tr>
</tfoot>
</table>
Tam nümunə:
<table>
<thead>
<tr>
<th>Ad</th>
<th>Qiymət</th>
</tr>
</thead>
<tbody>
<tr>
<td>İvan</td>
<td>90</td>
</tr>
<tr>
<td>Mariya</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Orta bal</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Bunu yadda saxlamaq, əslində, çox sadədir:
Cədvəl strukturunun izahı
<table>: bütün cədvəl üçün xarici konteyner<caption>: cədvəl başlığı, hansı ki, onun məzmununu təsvir etməyə kömək edir<thead>: cədvəl başlıq xətləri qruplaşdırır<tbody>: cədvəlin əsas məzmununu qruplaşdırır<tfoot>: cədvəlin alt hissə xətləri qruplaşdırır
Materialı möhkəmləndiririk
Gəlin öyrəndiyimiz bütün tag-larla bir cədvəl yaradaq və onu stilizə edək.
<table>
<caption>İmtahan Nəticələri</caption>
<thead>
<tr>
<th>Ad</th>
<th>Qiymət</th>
</tr>
</thead>
<tbody>
<tr>
<td>İvan</td>
<td>91</td>
</tr>
<tr>
<td>Mariya</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Orta Bal</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION