Jadvallar — table, tr, td, th, thead, tbody, colspan, rowspan
Muammodan boshlaylik
Dasturchi sifatida ko'pincha jadval ko'rinishidagi ma'lumotlar bilan ishlaysiz — narxlar, jadvallar, hisobotlar, solishtirmalar. Ko'pchilik bu ma'lumotlarni div va span bilan yasaydi. Lekin bu yondashuv noto'g'ri: ekran o'quvchi dasturlar jadvalni tushunmaydi, qidiruv ham ma'lumotni jadval sifatida idrok etmaydi.
HTML da buning uchun maxsus teglar bor. Bu darsda ularni to'g'ri ishlatishni o'rganamiz.
Jadval qanday tuzilgan?
Jadval — bu satrlar va ustunlar kesishmasidan hosil bo'lgan kataklar to'plami. HTML da jadval yuqoridan pastga, chapdan o'ngga quriladi: avval birinchi satr, uning ichida kataklar, keyin ikkinchi satr va hokazo.
Oddiy 3 satr, 3 ustunli jadval:
<table>
<tr>
<td>1-satr, 1-ustun</td>
<td>1-satr, 2-ustun</td>
<td>1-satr, 3-ustun</td>
</tr>
<tr>
<td>2-satr, 1-ustun</td>
<td>2-satr, 2-ustun</td>
<td>2-satr, 3-ustun</td>
</tr>
<tr>
<td>3-satr, 1-ustun</td>
<td>3-satr, 2-ustun</td>
<td>3-satr, 3-ustun</td>
</tr>
</table>
Uchta asosiy teg:
<table>— jadvalni boshlovchi va yopuvchi qobiq<tr>(table row) — bir satr<td>(table data) — satr ichidagi bitta kataк
th — sarlavha katagi
<th> (table header) — sarlavha katagi. <td> dan farqi: matn qalin va markazlashgan holda ko'rsatiladi, ekran o'quvchi dastur esa uni "bu sarlavha" deb alohida e'lon qiladi.
<table>
<tr>
<th>Ism</th>
<th>Yosh</th>
<th>Shahar</th>
</tr>
<tr>
<td>Jasur</td>
<td>24</td>
<td>Toshkent</td>
</tr>
<tr>
<td>Malika</td>
<td>22</td>
<td>Samarqand</td>
</tr>
</table>
<th> faqat ustun sarlavhasi uchun emas — satr sarlavhasi uchun ham ishlatiladi. scope atributi bilan qaysi yo'nalish ekanini aniqlashtirish mumkin:
<tr>
<th scope="col">Mahsulot</th> <!-- ustun sarlavhasi -->
<th scope="col">Narx</th>
</tr>
<tr>
<th scope="row">Telefon</th> <!-- satr sarlavhasi -->
<td>5 000 000 so'm</td>
</tr>
thead, tbody, tfoot — jadval bo'limlari
Katta jadvalda qayerda sarlavha, qayerda asosiy ma'lumot, qayerda yig'indi borligini aniq ajratish kerak. Buning uchun uchta bo'lim tegi bor.
<table>
<thead>
<!-- Sarlavha satrlari -->
</thead>
<tbody>
<!-- Asosiy ma'lumotlar -->
</tbody>
<tfoot>
<!-- Yig'indi, jami, xulosa -->
</tfoot>
</table>
Nima uchun bularni yozish kerak?
Agar jadval juda uzun bo'lsa va foydalanuvchi scroll qilsa — brauzer <thead> ni ekranning tepasida, <tfoot> ni pastida "muzlatib" qo'yishi mumkin. Foydalanuvchi qaysi ustun ekanini unutmaydi.
Ekran o'quvchi dasturlar <thead> ichidagi <th> larni har bir <td> dan oldin e'lon qiladi — "Ism: Jasur, Yosh: 24" kabi. Bu ko'zi ojiz foydalanuvchi uchun juda muhim.
<table>
<thead>
<tr>
<th scope="col">Mahsulot</th>
<th scope="col">Soni</th>
<th scope="col">Narxi</th>
<th scope="col">Jami</th>
</tr>
</thead>
<tbody>
<tr>
<td>Noutbuk</td>
<td>2</td>
<td>8 000 000 so'm</td>
<td>16 000 000 so'm</td>
</tr>
<tr>
<td>Sichqoncha</td>
<td>5</td>
<td>150 000 so'm</td>
<td>750 000 so'm</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Umumiy jami</td>
<td>16 750 000 so'm</td>
</tr>
</tfoot>
</table>
colspan — gorizontal birlashtirish
colspan — bir katak nechta ustunni egallashini belgilaydi.
Tasavvur qiling: jadvalda "Aloqa ma'lumotlari" degan sarlavha bor, uning ostida esa "Telefon" va "Email" — ikkita ustun. "Aloqa ma'lumotlari" katagi bu ikkala ustunni qamrab olishi kerak.
<table>
<thead>
<tr>
<th rowspan="2">Ism</th>
<th colspan="2">Aloqa ma'lumotlari</th> <!-- 2 ustunni egallaydi -->
</tr>
<tr>
<!-- "Ism" bu yerda yo'q — u yuqorida rowspan bilan 2 satrni egallagan -->
<th>Telefon</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jasur</td>
<td>+998 90 123 45 67</td>
<td>jasur@example.com</td>
</tr>
</tbody>
</table>
Soddaroq misol — tfoot da jami yig'indisi:
<tfoot>
<tr>
<td colspan="3">Umumiy jami:</td> <!-- birinchi 3 ustunni birlashtirdi -->
<td>16 750 000 so'm</td>
</tr>
</tfoot>
rowspan — vertikal birlashtirish
rowspan — bir katak nechta satrni egallashini belgilaydi.
Tasavvur qiling: dars jadvalida Dushanba kuni 3 ta dars bor, lekin "Dushanba" so'zi 3 marta takrorlanishi o'rniga bitta kataкda 3 satrni egallashi kerak.
<table>
<thead>
<tr>
<th>Kun</th>
<th>Vaqt</th>
<th>Fan</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Dushanba</td> <!-- 3 satrni egallaydi -->
<td>08:00</td>
<td>Matematika</td>
</tr>
<tr>
<!-- "Dushanba" katagi yo'q — u yuqorida rowspan bilan band -->
<td>10:00</td>
<td>Fizika</td>
</tr>
<tr>
<!-- "Dushanba" katagi yo'q -->
<td>12:00</td>
<td>Kimyo</td>
</tr>
<tr>
<td rowspan="2">Seshanba</td>
<td>09:00</td>
<td>Tarix</td>
</tr>
<tr>
<td>11:00</td>
<td>Adabiyot</td>
</tr>
</tbody>
</table>
colspan va rowspan birgalikda
<table>
<tr>
<th colspan="2" rowspan="2">Burchak</th> <!-- 2 ustun, 2 satr -->
<th>A ustun</th>
<th>B ustun</th>
</tr>
<tr>
<th>C ustun</th>
<th>D ustun</th>
</tr>
</table>
caption — jadval sarlavhasi
<caption> — jadvalning nomini bildiruvchi teg. U <table> ichida eng birinchi yoziladi.
<table>
<caption>2024-yil 1-chorak savdo hisoboti</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Ekran o'quvchi dasturlar <caption> ni jadvaldan oldin o'qiydi — foydalanuvchi jadvalga kirishdan oldin uning mavzusini tushunadi. SEO uchun ham foydali.
To'liq jadval namunasi
<table>
<caption>Dasturlash kurslari narxlari — 2024</caption>
<thead>
<tr>
<th scope="col">Kurs</th>
<th scope="col">Davomiyligi</th>
<th scope="col">Narxi</th>
<th scope="col">Holati</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML va CSS</td>
<td>3 oy</td>
<td>500 000 so'm</td>
<td>Mavjud</td>
</tr>
<tr>
<td>JavaScript</td>
<td>4 oy</td>
<td>700 000 so'm</td>
<td>Mavjud</td>
</tr>
<tr>
<td>React</td>
<td>3 oy</td>
<td>800 000 so'm</td>
<td>To'lgan</td>
</tr>
<tr>
<td>Node.js</td>
<td>4 oy</td>
<td>750 000 so'm</td>
<td>Mavjud</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Barcha kurslar uchun to'lov</td>
<td>2 750 000 so'm</td>
</tr>
</tfoot>
</table>
Tez-tez uchraydigan xatolar
colspan va rowspan da kataklarni noto'g'ri hisoblash
<!-- Xato — 3 ustunli jadvalda colspan="4" — jadval buziladi -->
<tfoot>
<tr>
<td colspan="4">Jami</td>
<td>100 000 so'm</td>
</tr>
</tfoot>
<!-- To'g'ri — 3 ustunli jadvalda colspan="3" -->
<tfoot>
<tr>
<td colspan="3">Jami</td>
<td>100 000 so'm</td>
</tr>
</tfoot>
colspan va rowspan qiymatlarining yig'indisi jadvaldagi haqiqiy ustun yoki satr sonidan oshmasligi kerak. Oshsa — brauzer jadvalni noto'g'ri chizadi.
Jadval o'rniga div ishlatish
<!-- Xato — bu jadval ko'rinishidagi div, lekin semantik emas -->
<div class="table">
<div class="row">
<div class="cell">Ism</div>
<div class="cell">Yosh</div>
</div>
</div>
<!-- To'g'ri — haqiqiy ma'lumotlar jadvali uchun table ishlatiladi -->
<table>
<tr>
<th>Ism</th>
<th>Yosh</th>
</tr>
</table>
Jadval ko'rinishidagi dizayn uchun CSS display: grid yoki display: flex ishlatiladi. <table> esa faqat haqiqiy jadval ma'lumotlari — solishtirmalar, hisobotlar, dars jadvallari uchun.
thead, tbody, tfoot siz jadval
<!-- Xato — tuzilma yo'q, ekran o'quvchi satrlarni ajrata olmaydi -->
<table>
<tr>
<th>Mahsulot</th>
<th>Narx</th>
</tr>
<tr>
<td>Noutbuk</td>
<td>8 000 000</td>
</tr>
</table>
<!-- To'g'ri — aniq tuzilma bilan -->
<table>
<thead>
<tr>
<th scope="col">Mahsulot</th>
<th scope="col">Narx</th>
</tr>
</thead>
<tbody>
<tr>
<td>Noutbuk</td>
<td>8 000 000</td>
</tr>
</tbody>
</table>
Xulosa
<table> — haqiqiy jadval ma'lumotlari uchun ishlatiladi. Dizayn maqsadida jadval yasash noto'g'ri.
Asosiy teglar: <table> — qobiq, <tr> — satr, <td> — kataк, <th> — sarlavha katagi.
Bo'limlar: <thead> sarlavha satrlar, <tbody> asosiy ma'lumotlar, <tfoot> yig'indi uchun. Ekran o'quvchi va brauzer uchun muhim.
colspan — katak nechta ustunni egallashini belgilaydi. rowspan — nechta satrni egallashini.
caption — jadval nomini bildiradi. Ekran o'quvchi uni birinchi o'qiydi.
Keyingi dars
8-dars: Blok va inline elementlar — div, span va ularning farqi