W3.CSS jadvallar
Jadvallar
W3.CSS toza va moslashuvchan HTML jadvallarini yaratish uchun klasslarni taqdim etadi.
Jadvallarda yo‘l-yo‘l qatorlar, chegaralar, ranglar, hover effektlari va boshqa imkoniyatlar bo‘lishi mumkin.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mike | Ross | 35 |
Jadval klasslari
| Klass | Tavsif |
|---|---|
w3-table |
Oddiy jadval |
w3-striped |
Jadval qatorlarini yo‘l-yo‘l qiladi |
w3-bordered |
Jadval qatorlari orasiga chegara qo‘shadi |
w3-border |
Jadval atrofiga chegara qo‘shadi |
w3-table-all |
Yuqoridagi barcha klasslar birgalikda |
w3-hoverable |
Jadval qatorlariga hover effektini qo‘shadi |
w3-centered |
Jadval kontentini markazlashtiradi |
w3-responsive |
Kichik ekranlarda keng jadvallarni aylantiriladigan (scroll) qiladi |
Oddiy jadval
Oddiy jadval yaratish uchun w3-table klassidan foydalaning.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | $999 |
| Phone | Mobile | $699 |
| Tablet | Mobile | $499 |
| Monitor | Computers | $299 |
Misol
<table class="w3-table">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Computers</td>
<td>$999</td>
</tr>
<tr>
<td>Phone</td>
<td>Mobile</td>
<td>$699</td>
</tr>
<tr>
<td>Tablet</td>
<td>Mobile</td>
<td>$499</td>
</tr>
<tr>
<td>Monitor</td>
<td>Computers</td>
<td>$299</td>
</tr>
</table>
O‘zingiz sinab ko‘ring »
Yo‘l-yo‘l jadvallar
Qatorlarni navbatma-navbat turli rangda ko‘rsatish uchun w3-striped klassini qo‘shing.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Jadval chegaralari
w3-bordered klassi har bir jadval qatoriga pastki chegara qo‘shadi:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Rangli jadval sarlavhalari
Rangli sarlavha yaratish uchun jadval qatoriga istalgan W3.CSS rang klassini qo‘llang.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | $999 |
| Phone | Mobile | $699 |
| Tablet | Mobile | $499 |
| Monitor | Computers | $299 |
Misol
<table class="w3-table w3-bordered">
<tr class="w3-blue">
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
...
</table>
O‘zingiz sinab ko‘ring »
w3-bordered qatorlar orasiga chegara qo‘shadi.
w3-border jadval atrofiga chegara qo‘shadi.
Yo‘l-yo‘l, chegarali jadval
Yo‘l-yo‘l, chegarali jadval yaratish uchun w3-striped va w3-bordered klasslarini birlashtiring:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Jadval atrofidagi chegara
w3-border klassi jadval atrofida chegara ko‘rsatish uchun ishlatiladi:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Eslatma
w3-border klassi faqat jadvallar uchun emas. Uni istalgan HTML elementida ishlatish mumkin!
Jadval klasslarini birlashtirish
Kerakli uslubni yaratish uchun jadval klasslarini birlashtirish mumkin.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | $999 |
| Phone | Mobile | $699 |
| Tablet | Mobile | $499 |
| Monitor | Computers | $299 |
Misol
<table class="w3-table w3-striped w3-bordered w3-border">
...
</table>
O‘zingiz sinab ko‘ring »
Barchasini birlashtirish
w3-table-all klassi yuqoridagi barcha klasslarni o‘zida birlashtiradi:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Yo‘llar tartibini teskari qilish
Yo‘llar tartibini teskari qilish (och kulrang rangdan boshlash) uchun jadval sarlavhasi qatori atrofiga <thead> elementini qo‘shing. Shuningdek, jadval sarlavhasi qatori uchun rang belgilashingiz kerak:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
Misol
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
O‘zingiz sinab ko‘ring »
Hover effektli jadvallar
w3-hoverable klassi sichqoncha qator ustiga olib borilganda uni ajratib ko‘rsatadi.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | $999 |
| Phone | Mobile | $699 |
| Tablet | Mobile | $499 |
| Monitor | Computers | $299 |
Moslashuvchan jadvallar
Keng jadvallarni kichik ekranlarda ko‘rish qiyin bo‘lishi mumkin.
Zarur bo‘lganda gorizontal aylantirishga (scroll) ruxsat berish uchun jadvalni w3-responsive konteyneri ichiga joylashtiring.
Quyidagi jadvalda effektni ko‘rish uchun ekran o‘lchamini o‘zgartiring:
| First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Eve | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Misol
<div class="w3-responsive">
<table class="w3-table-all">
...
</table>
</div>
O‘zingiz sinab ko‘ring »
Joy yetarli bo‘lganda moslashuvchan jadval o‘zgarmay qoladi.
Kichikroq ekranlarda jadval sahifadan chiqib ketish o‘rniga gorizontal aylantiriladi.
Kartochka ko‘rinishidagi jadval
Jadval sahifada ajralib turishi uchun unga kartochka klassini qo‘shing.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | $999 |
| Phone | Mobile | $699 |
| Tablet | Mobile | $499 |
| Monitor | Computers | $299 |
Turli o‘lchamdagi jadvallar
Shrift o‘lchami klasslarini jadvallarda ham ishlatish mumkin.
| Klass | O‘lcham |
|---|---|
w3-tiny |
Juda kichik |
w3-small |
Kichik |
w3-large |
Katta |
w3-xlarge |
Juda katta |
w3-xxlarge |
Juda-juda katta |
w3-xxxlarge |
Eng katta |
w3-jumbo |
Ulkan (jumbo) |
Misollar
<table class="w3-table-all w3-tiny">
O‘zingiz sinab ko‘ring »
<table class="w3-table-all w3-small">
O‘zingiz sinab ko‘ring »
<table class="w3-table-all w3-large">
O‘zingiz sinab ko‘ring »
<table class="w3-table-all w3-xlarge">
O‘zingiz sinab ko‘ring »
<table class="w3-table-all w3-xxlarge">
O‘zingiz sinab ko‘ring »
<table class="w3-table-all w3-xxxlarge">
O‘zingiz sinab ko‘ring »
<table class="w3-table-all w3-jumbo">
O‘zingiz sinab ko‘ring »
Rangli jadval
Rangli jadval ko‘rsatish uchun istalgan w3-color klassidan foydalaning:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Jadvalning bitta ustunini o‘ngga tekislash
w3-right-align klassi ustun kontentini o‘ngga tekislaydi:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Misol
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
O‘zingiz sinab ko‘ring »
Bitta ustunni markazlashtirish
w3-center klassi ustun kontentini markazlashtiradi:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Misol
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
O‘zingiz sinab ko‘ring »
Jadval kontentini markazlashtirish
w3-centered klassi jadval kontentini markazlashtiradi:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Maxsus hover ranglari
Muayyan hover rangi kerak bo‘lsa, har bir <tr> elementiga istalgan w3-hover-color klassini qo‘shing:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Product | Price |
|---|---|
| Laptop | $999 |
| Phone | $699 |
| Tablet | $499 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!