<th>
Misol
Uch qator, ikkita sarlavha katagi va to‘rtta ma’lumot katagidan iborat oddiy HTML jadval:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<th> tegi HTML jadvaldagi sarlavha katagini belgilaydi.
HTML jadvalda ikki turdagi kataklar bor:
- Sarlavha kataklari — sarlavha ma’lumotlarini o‘z ichiga oladi (
<th>elementi bilan yaratiladi) - Ma’lumot kataklari — ma’lumotlarni o‘z ichiga oladi (<td> elementi bilan yaratiladi)
<th> elementlaridagi matn standart holatda qalin va markazga tekislangan bo‘ladi.
<td> elementlaridagi matn standart holatda oddiy va chapga tekislangan bo‘ladi.
Brauzerlarda qo‘llab-quvvatlash
| Element | |||||
|---|---|---|---|---|---|
| <th> | Ha | Ha | Ha | Ha | Ha |
Atributlar
| Atribut | Qiymat | Tavsif |
|---|---|---|
| abbr | text | Sarlavha katagidagi kontentning qisqartirilgan variantini belgilaydi |
| colspan | number | Sarlavha katagi egallashi kerak bo‘lgan ustunlar sonini belgilaydi |
| headers | header_id | Katak bog‘liq bo‘lgan bir yoki bir nechta sarlavha katagini belgilaydi |
| rowspan | number | Sarlavha katagi egallashi kerak bo‘lgan qatorlar sonini belgilaydi |
| scope | col colgroup row rowgroup |
Sarlavha katagi ustun, qator yoki ustunlar yoki qatorlar guruhi uchun sarlavha ekanligini belgilaydi |
Global atributlar
<th> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<th> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
<th> ichidagi kontentni tekislash (CSS yordamida):
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:left">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval sarlavha katagiga fon rangi (background-color) qo‘shish (CSS yordamida):
<table>
<tr>
<th style="background-color:#FF0000">Month</th>
<th style="background-color:#00FF00">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval sarlavha katagining balandligini o‘rnatish (CSS yordamida):
<table>
<tr>
<th style="height:100px">Month</th>
<th style="height:100px">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval sarlavha katagida so‘zlar keyingi qatorga ko‘chirilmasligini belgilash (CSS yordamida):
<table>
<tr>
<th>Month</th>
<th style="white-space:nowrap">My Savings for a new car</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
<th> ichidagi kontentni vertikal tekislash (CSS yordamida):
<table style="width:50%;">
<tr style="height:100px">
<th style="vertical-align:bottom">Month</th>
<th style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval sarlavha katagining kengligini o‘rnatish (CSS yordamida):
<table style="width:100%">
<tr>
<th style="width:70%">Month</th>
<th style="width:30%">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval sarlavhalarini yaratish:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Sarlavhali (caption) jadval yaratish:
<table>
<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>$80</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Bir nechta qator yoki ustunni egallaydigan jadval kataklarini belgilash:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
HTML darsligi: HTML jadvallar
HTML DOM ma’lumotnomasi: TableHeader obyekti
CSS darsligi: Jadvallarni bezash
Standart CSS sozlamalari
Ko‘pchilik brauzerlar <th> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!