<td>
Misol
Ikki qator va to‘rtta jadval katagidan iborat oddiy HTML jadval:
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<td> tegi HTML jadvaldagi standart ma’lumot 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)
<td> elementlaridagi matn standart holatda oddiy va chapga tekislangan bo‘ladi.
<th> elementlaridagi matn standart holatda qalin va markazga tekislangan bo‘ladi.
Brauzerlarda qo‘llab-quvvatlash
| Element | |||||
|---|---|---|---|---|---|
| <td> | Ha | Ha | Ha | Ha | Ha |
Atributlar
| Atribut | Qiymat | Tavsif |
|---|---|---|
| colspan | number | Katak egallashi kerak bo‘lgan ustunlar sonini belgilaydi |
| headers | header_id | Katak bog‘liq bo‘lgan bir yoki bir nechta sarlavha katagini belgilaydi |
| rowspan | number | Katak egallashi kerak bo‘lgan qatorlar sonini o‘rnatadi |
Global atributlar
<td> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<td> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
<td> ichidagi kontentni tekislash (CSS yordamida):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td style="text-align:right">$100</td>
</tr>
<tr>
<td>February</td>
<td style="text-align:right">$80</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval katagiga fon rangi (background-color) qo‘shish (CSS yordamida):
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="background-color:#FF0000">January</td>
<td style="background-color:#00FF00">$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval katagining balandligini o‘rnatish (CSS yordamida):
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="height:100px">January</td>
<td style="height:100px">$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval katagida so‘zlar keyingi qatorga ko‘chirilmasligini belgilash (CSS yordamida):
<table>
<tr>
<th>Poem</th>
</tr>
<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
<td> ichidagi kontentni vertikal tekislash (CSS yordamida):
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">January</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Misol
Jadval katagining kengligini o‘rnatish (CSS yordamida):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="width:70%">January</td>
<td style="width:30%">$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: TableData obyekti
CSS darsligi: Jadvallarni bezash
Standart CSS sozlamalari
Ko‘pchilik brauzerlar <td> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:
td {
display: table-cell;
vertical-align: inherit;
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!