Jadval strukturasi (table/tr/th/td), thead/tbody/tfoot, colspan/rowspan va jadvallarni layout uchun ishlatmaslik tamoyili — test va debugging mashqlari bilan.
Jadvallar — faqat jadvaliy (tabular) ma'lumot uchun mo'ljallangan, layout yaratish uchun emas.
index.htmlHTML<table><thead><tr><th>Ism</th><th>Yosh</th></tr></thead><tbody><tr><td>Abbos</td><td>26</td></tr></tbody></table>
⚠️ Common Mistake
Jadvallarni sahifa layout'ini yaratish uchun ishlatish (masalan bir necha ustunli dizayn) — bu 2000-yillar uslubi, hozir Flexbox/Grid ishlatiladi va semantik jihatdan noto'g'ri.
index.htmlHTML<table><thead><tr><th>Mahsulot</th><th>Narx</th></tr></thead><tbody><tr><td>Telefon</td><td>500$</td></tr></tbody><tfoot><tr><td>Jami</td><td>500$</td></tr></tfoot></table><table><tr><td colspan="2">Ikkita ustunni egallaydi</td></tr><tr><td rowspan="2">Ikkita qatorni egallaydi</td><td>A</td></tr><tr><td>B</td></tr></table>
Task: Ism, Yosh, Shahar ustunlariga ega 3 qatorli jadval yarating, to'g'ri thead/tbody bilan.
Task: Narxlar jadvali yarating, oxirida colspan yordamida "Jami" qatorini qo'shing.
index.htmlHTML<div class="table"><div class="row"><div class="cell">Ism</div><div class="cell">Yosh</div></div><div class="row"><div class="cell">Abbos</div><div class="cell">26</div></div></div>
Your Task: Bu "jadval" nega semantik jihatdan noto'g'ri?
<details> <summary>Solution</summary> `<div>` elementlari hech qanday jadval semantikasiga ega emas — ekran o'quvchi buni jadval sifatida aniqlay olmaydi, foydalanuvchi qator/ustun bo'ylab navigatsiya qila olmaydi. To'g'ri yechim — haqiqiy `<table>`, `<tr>`, `<td>` elementlaridan foydalanish. </details>Jadvallar — faqat jadvaliy ma'lumot uchun, layout uchun emas. <thead>/<tbody>/<tfoot> — jadvalni mantiqiy qismlarga bo'ladi. colspan/rowspan — katakchalarni birlashtiradi.
<th> — sarlavha, <td> — oddiy ma'lumotcolspan/rowspan — katakchalarni birlashtirish uchunindex.htmlHTML<table><thead><tr><th>...</th></tr></thead><tbody><tr><td>...</td></tr></tbody><tfoot><tr><td>...</td></tr></tfoot></table><td colspan="2">...</td><td rowspan="2">...</td>
Mavzu bo‘yicha tushunchalaringizni interaktiv test orqali sinovdan o‘tkazing va natijalarni bilib oling.
Darslik ichidagi interaktiv muharrirda berilgan barcha amaliy topshiriqlarni bajaring va avto-tekshiruvdan o‘ting.
Test Sinovi
Hali topshirilmagan (kamida 75% kerak)
Amaliy Laboratoriya
Laboratoriya muharririda testlarni topshiring
Dars sifati va mazmunini yaxshilash uchun o‘z haqqoniy bahoingizni qoldiring.
Mavzuni to‘liq o‘zlashtirish uchun test sinovi, amaliy kodlash va bog‘liq darslar
O‘z bilimingizni interaktiv test savollari orqali tekshiring va darhol xatolarni tahlil qiling.
Nazariyani real kod yozish bilan mustahkamlang, avtomatik testlardan o‘ting va XP to‘plang.
Kurs bo‘yicha keyingi va bog‘liq mavzular: