<table>
Misol
Ikki ustun va ikki qatordan iborat oddiy HTML jadval:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<table> tegi HTML jadvalni belgilaydi.
HTML jadval bitta <table> elementi hamda bir yoki bir nechta <tr>, <th> va <td> elementlaridan iborat.
<tr> elementi jadval qatorini, <th> elementi jadval sarlavhasini, <td> elementi esa jadval katagini belgilaydi.
HTML jadval <caption>, <colgroup>, <thead>, <tfoot> va <tbody> elementlarini ham o‘z ichiga olishi mumkin.
Brauzerlarda qo‘llab-quvvatlash
| Element | |||||
|---|---|---|---|---|---|
| <table> | Ha | Ha | Ha | Ha | Ha |
Global atributlar
<table> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<table> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
Jadvalga birlashtirilgan (collapsed) chegaralar qo‘shish (CSS yordamida):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<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>
</body>
</html>
O‘zingiz sinab ko‘ring »
Misol
Jadvalni o‘ngga tekislash (CSS yordamida):
<table style="float:right">
<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
Jadvalni markazga tekislash (CSS yordamida):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
<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
Jadvalga fon rangi (background-color) qo‘shish (CSS yordamida):
<table style="background-color:#00FF00">
<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
Jadvalga ichki chekinish (padding) qo‘shish (CSS yordamida):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
O‘zingiz sinab ko‘ring »
Misol
Jadval kengligini o‘rnatish (CSS yordamida):
<table style="width:400px">
<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
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: Table obyekti
CSS darsligi: Jadvallarni bezash
Standart CSS sozlamalari
Ko‘pchilik brauzerlar <table> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:
Misol
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!