Tarkibga o'tish

04 β€” Jadvallar

⬅️ Oldingi: 03 β€” Havolalar va media Β· 🏠 README Β· Keyingi: 05 β€” Formalar ➑️

Bu bobda: ma'lumot jadvallari: table, qator, ustun va birlashtirish.

Tasavvur qil: sinfdoshlaringning ismi, yoshi va shahri ro'yxatini yozyapsan. Buni daftarga qanday tushirasan? Albatta β€” jadval chizib. Yuqoriga sarlavhalarni (Ism, Yosh, Shahar), keyin har bir o'quvchiga bitta qator yozasan. Web sahifada ham xuddi shu narsa kerak bo'ladi, va HTML buni <table> yorlig'i bilan beradi.

Bu bobda jadvallarni eng oddiy 2x2 katakdan boshlab, birlashgan yacheykalar, sarlavha guruhlari va skrin-riderlar uchun moslashtirilgan "mukammal" jadvalgacha bosqichma-bosqich o'rganamiz. Eng muhimi β€” nega har bir element kerakligini tushunamiz, shunda yodlash emas, bilib ishlatadigan bo'lasan.

4.1 Jadval nima va u qachon kerak?

Jadval (table) β€” bu ma'lumotni qatorlar (rows) va ustunlar (columns) ko'rinishida tartibga soluvchi struktura. Ikkalasining kesishuvi yacheyka (cell) deyiladi.

Jadvalning bosh qoidasi bitta:

πŸ“Œ Jadval faqat tabular data (ikki o'lchovli ma'lumot) uchun. Ya'ni har bir qiymat ham bir qatorga, ham bir ustunga tegishli bo'lsa.

Jadvalga mos keladigan misollar: - Mahsulotlar narxi: har qatorda mahsulot, ustunlarda nom / narx / miqdor. - Dars jadvali: qatorlar β€” soatlar, ustunlar β€” hafta kunlari. - Moliyaviy hisobot: oylar va daromad/xarajat.

Jadvalga mos kelmaydigan misollar: - Bitta ro'yxat (faqat ismlar) β€” bu uchun <ul> yoki <ol> to'g'riroq. - Bitta xatboshi matn β€” bu <p>.

"Layout uchun jadval ishlatma" β€” nega?

Yillar oldin (taxminan 1998–2008) dasturchilar butun sahifa ko'rinishini (chap menyu, o'rtada kontent, o'ngda reklama) jadvallar bilan yasashgan. Bugun bu katta xato hisoblanadi. Sabablarini bilib qo'y, chunki bu eng muhim "nega"lardan biri:

  1. Ma'no buziladi (semantika). <table> brauzer va yordamchi texnologiyalarga "bu ikki o'lchovli ma'lumot" deb aytadi. Agar sen u bilan tugmalar va logotipni joylashtirsang, skrin-rider (ko'rlar uchun ovozli o'qigich) "5 ustunli jadval, 1-qator, 1-ustun" deb adashtiruvchi narsalarni o'qiydi. Foydalanuvchi sahifada nima borligini tushunolmaydi.

  2. Moslashuvchanlik yo'q (responsive). Jadval qatorlari telefon ekranida bukila olmaydi. Layout jadval bilan qurilsa, kichik ekranda hammasi siqilib, o'qib bo'lmaydigan holga keladi.

  3. Tuzatish qiyin. Layout jadvallari ichma-ich joylashgan o'nlab <tr>/<td> ga aylanadi β€” keyinchalik o'zgartirish azobga aylanadi.

πŸ’‘ Yodda tut: Sahifa ko'rinishi (joylashuv) uchun CSS (Flexbox, Grid β€” keyingi boblarda) bor. <table> esa faqat ma'lumot uchun. Bu ikkisini aralashtirma.

⚠️ Oddiy tekshiruv: "Bu ma'lumotni Excel jadvaliga joylab, ustun sarlavhalari mantiqan to'g'ri chiqar miydi?" Agar ha β€” <table> to'g'ri tanlov. Agar yo'q β€” boshqa element kerak.

4.2 Eng oddiy jadval: table, tr, td, th

Jadval to'rt asosiy yorliqdan quriladi. Ularni esda saqlash uchun ingliz so'zlarini bilib qo'yamiz:

Yorliq Inglizcha Vazifasi
<table> table Butun jadvalni o'rab turadi (idish).
<tr> table row Bitta qator (gorizontal chiziq).
<td> table data Oddiy yacheyka (ma'lumot katagi).
<th> table header Sarlavha yacheyka (ustun/qator nomi).

Tartibni eslab qol: <table> ichida <tr> (qatorlar) bo'ladi, har bir <tr> ichida esa <td> yoki <th> (yacheykalar) bo'ladi. Bu ichma-ich (nested) tuzilma.

Mana eng oddiy jadval β€” 3 ustun, 3 qator:

<table>
  <tr>
    <th>Ism</th>
    <th>Yosh</th>
    <th>Shahar</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
    <td>Buxoro</td>
  </tr>
  <tr>
    <td>Lola</td>
    <td>30</td>
    <td>Toshkent</td>
  </tr>
</table>

Natija: brauzer 3 qatorli jadval chizadi. Birinchi qatordagi <th> matnlari odatda qalin (bold) va markazlangan ko'rinadi (bu brauzerning standart uslubi), <td> esa oddiy va chapga tekislangan.

πŸ“Œ Diqqat: standart holatda jadvalda chiziqlar (border) ko'rinmaydi! Yacheykalar bir-biriga yopishib turadi. Chiziqlarni biz keyinroq (4.9) CSS bilan qo'shamiz. Hozircha strukturaga e'tibor ber.

<th> va <td> β€” farqi shunchaki ko'rinishda emas

Yangi boshlovchilar ko'pincha "<th> shunchaki qalin <td>-ku, har joyda <td> ishlataveraman" deb o'ylaydi. Bu xato. Farq ma'noda:

  • <th> brauzer va skrin-riderga "bu sarlavha, qolgan yacheykalarni tavsiflaydi" deb aytadi.
  • <td> esa oddiy ma'lumot.

Skrin-rider <td> ni o'qiganda, unga tegishli <th> ni ham aytadi: masalan "Yosh: 25". Agar sarlavhalarni <td> qilib qo'ysang, ko'r foydalanuvchi "25" sonining nimaga tegishli ekanini bilolmaydi. Shuning uchun sarlavhalar doim <th> bo'lishi shart.

πŸ’‘ <th> ni faqat yuqori qatordagina emas, chap ustunda ham ishlatish mumkin (masalan har qatorning "ismi" β€” bu qatorning sarlavhasi). Bu haqda 4.5 da gaplashamiz.

4.3 Jadval anatomiyasi: caption, thead, tbody, tfoot

Yuqoridagi oddiy jadval ishlaydi, lekin "professional" jadvalning yana to'rtta qismi bor. Ular jadvalni mantiqiy bo'laklarga ajratadi:

Jadval anatomiyasi: caption, thead, tbody, tfoot va th/td yacheykalar

Element Vazifasi
<caption> Jadvalning nomi/sarlavhasi (butun jadval nima haqida ekani).
<thead> Jadval boshi β€” sarlavha qatori(lari) shu yerda.
<tbody> Jadval tanasi β€” asosiy ma'lumot qatorlari.
<tfoot> Jadval oyog'i β€” yakuniy qator (masalan "Jami").

<caption> β€” jadvalga nom berish

<caption> <table> ning ENG BIRINCHI bolasi bo'lishi shart. U jadval ustida nom sifatida ko'rinadi:

<table>
  <caption>2026-yil o'quvchilar ro'yxati</caption>
  <tr>
    <th>Ism</th>
    <th>Yosh</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
  </tr>
</table>

Natija: jadval ustida "2026-yil o'quvchilar ro'yxati" matni chiqadi.

Nega kerak? Skrin-rider foydalanuvchisi jadvalga kirganda darhol "Bu jadval nima haqida?" deb eshitadi. Sarlavhasiz jadval β€” bu nomsiz papka kabi. <caption> ni <h3> bilan almashtirish mumkin emas, chunki <caption> jadval bilan bog'langan (skrin-rider buni jadval nomi deb biladi).

<thead>, <tbody>, <tfoot> β€” qatorlarni guruhlash

Bu uchta element qatorlarni mantiqiy guruhlarga ajratadi:

<table>
  <caption>Oylik byudjet</caption>
  <thead>
    <tr>
      <th>Modda</th>
      <th>Summa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ovqat</td>
      <td>1 200 000</td>
    </tr>
    <tr>
      <td>Transport</td>
      <td>300 000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Jami</th>
      <td>1 500 000</td>
    </tr>
  </tfoot>
</table>

Nega bu guruhlar foydali?

  1. CSS bilan bezash oson. "Faqat sarlavhaga kulrang fon ber" desang, thead { ... } deb bitta joyga yozasan β€” har bir <th> ni alohida belgilamaysan.

  2. Uzun jadvalni chop etish. Agar jadval bir necha sahifaga cho'zilsa, brauzer <thead> ni har bir sahifa tepasida takrorlaydi, shunda ustun nomlari ko'zdan qochmaydi.

  3. Aniqlik. Kod o'qiganga jadvalning qaysi qismi sarlavha, qaysi qismi ma'lumot ekani darhol ko'rinadi.

πŸ“Œ Qiziq nuqta β€” tartib: HTML kodida tartib caption β†’ thead β†’ tbody β†’ tfoot bo'lishi tavsiya etiladi. Agar <tfoot> ni <tbody> dan oldin yozsang ham, brauzer uni baribir pastda ko'rsatadi β€” chunki tfoot ning ma'nosi "oyoq" bo'lib, joylashuvi mazmuni bilan belgilanadi. Lekin chalkashmaslik uchun mantiqiy tartibda yoz.

πŸ’‘ <thead>/<tbody>/<tfoot> ichida ham <tr> bo'ladi β€” bu guruhlar <tr> ni o'rab turuvchi qo'shimcha qatlam, xolos. <tbody> ichida bir nechta <tr> bo'lishi mumkin (odatda shunday).

4.4 Yacheykalarni birlashtirish: colspan va rowspan

Ba'zan bitta yacheyka bir nechta ustun yoki qatorni egallashi kerak bo'ladi. Masalan, ikkita ustunning umumiy sarlavhasi, yoki bir necha qator uchun bitta umumiy katak. Buning uchun ikkita atribut bor:

  • colspan="N" β€” yacheyka N ta ustunni gorizontal egallaydi (column span).
  • rowspan="N" β€” yacheyka N ta qatorni vertikal egallaydi (row span).

colspan va rowspan: yacheykalarni gorizontal va vertikal birlashtirish

colspan β€” gorizontal birlashtirish

<table>
  <tr>
    <th colspan="2">Shaxsiy ma'lumot</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25 yosh</td>
  </tr>
</table>

Natija: birinchi qatorda "Shaxsiy ma'lumot" matni ikkala ustun ustidan cho'zilib turadi. Pastda esa ikkita alohida yacheyka.

E'tibor ber: birinchi <tr> ichida atigi bitta <th> bor, lekin u colspan="2" tufayli ikkita ustun enini egallaydi. Agar adashib u yerga yana bitta yacheyka qo'shsang, jadval 3 ustun keng bo'lib ketadi.

rowspan β€” vertikal birlashtirish

<table>
  <tr>
    <td rowspan="2">Toshkent</td>
    <td>Ali</td>
  </tr>
  <tr>
    <td>Lola</td>
  </tr>
</table>

Natija: "Toshkent" yacheykasi ikkita qator balandligini egallaydi. Uning yonida birinchi qatorda "Ali", ikkinchi qatorda "Lola" bo'ladi.

⚠️ Eng ko'p uchraydigan xato: ikkinchi <tr> ga e'tibor ber β€” unda faqat bitta <td> bor ("Lola")! Chunki chap ustunni "Toshkent" yacheykasi rowspan bilan allaqachon egallab turibdi. Agar bu yerga ham ikkita <td> yozsang, jadval qiyshayib, ortiqcha katak paydo bo'ladi.

πŸ’‘ Oltin qoida: rowspan="N" qo'ygan yacheykadan keyingi N-1 ta qatorda β€” o'sha ustun uchun yacheyka YOZMA. Birlashgan yacheyka o'sha joyni o'zi to'ldiradi.

Ikkalasini birga ishlatish

Murakkab jadvallarda colspan va rowspan birga kelishi mumkin. Mana misol β€” fan bo'yicha imtihon natijasi:

<table>
  <caption>Imtihon natijalari</caption>
  <thead>
    <tr>
      <th rowspan="2">Talaba</th>
      <th colspan="2">Imtihon</th>
    </tr>
    <tr>
      <th>Yozma</th>
      <th>Og'zaki</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ali</td>
      <td>85</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

Natija: "Talaba" sarlavhasi ikki qator balandlikda (rowspan="2"), "Imtihon" esa ikki ustun kengligida (colspan="2") bo'lib, uning ostida "Yozma" va "Og'zaki" pastki sarlavhalari joylashadi. Bu β€” ikki darajali (ichma-ich) sarlavha tuzilmasi.

πŸ“Œ Hisoblash maslahati: chalkashib ketmaslik uchun jadvalni qog'ozda chizib ol. Har bir katakni belgila, qaysilari birlashganini ko'rsat, keyin kodga ko'chir. Tajriba ortgach buni xayolan qila olasan.

4.5 Accessibility (kirish imkoniyati): th scope

Endi jadvalni nafaqat ko'rinadigan, balki ko'rlar ham foydalana oladigan qilamiz. Bu β€” "expert" darajaning birinchi bosqichi va ko'pincha unutiladigan, lekin juda muhim mavzu.

Muammo shunda: oddiy <th> skrin-riderga "bu sarlavha" deydi, lekin qaysi yo'nalishdagi sarlavha ekanini aytmaydi. Ustunning sarlavhasimi yoki qatorning? scope atributi aynan shuni aniqlaydi:

  • scope="col" β€” bu <th> ustun sarlavhasi (pastdagi butun ustunga tegishli).
  • scope="row" β€” bu <th> qator sarlavhasi (o'ngdagi butun qatorga tegishli).

th scope: scope=col ustun yo'nalishi, scope=row qator yo'nalishi

<table>
  <caption>O'quvchilar</caption>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Yosh</th>
      <th scope="col">Shahar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ali</th>
      <td>25</td>
      <td>Buxoro</td>
    </tr>
    <tr>
      <th scope="row">Lola</th>
      <td>30</td>
      <td>Toshkent</td>
    </tr>
  </tbody>
</table>

Nega bu ajoyib? Skrin-rider "30" yacheykasini o'qiganda, uning ustun sarlavhasi ("Yosh") va qator sarlavhasi ("Lola") ni topib, "Lola, Yosh: 30" deb o'qiydi. Foydalanuvchi har bir sonning aniq ma'nosini biladi β€” ko'zlari bilan jadvalni "ko'rmasa" ham.

E'tibor ber: chap yuqori burchakdagi bo'sh katak <td></td> qoldirildi (u na ustun, na qator sarlavhasi β€” shunchaki bo'sh burchak).

πŸ’‘ Soddagina qoida: har bir oddiy jadvalda yuqori qatordagi <th> larga scope="col", chap ustundagi <th> larga scope="row" qo'y. Bu deyarli barcha jadvallar uchun yetarli va jadvalingni to'liq accessible qiladi.

4.6 Murakkab jadvallar uchun: headers va id bog'lash

scope oddiy jadvallar uchun mukammal. Ammo jadval murakkab bo'lsa β€” masalan birlashgan, ikki darajali sarlavhalar bo'lsa β€” scope ba'zan yetarli aniq bog'lay olmaydi. Bunday holatlar uchun eng kuchli usul bor: har bir yacheykani uning sarlavhalari bilan id orqali aniq bog'lash.

Ishlash tartibi: 1. Har bir sarlavha <th> ga noyob id ber. 2. Har bir ma'lumot <td> da headers atributiga o'sha id larni (bo'shliq bilan ajratib) yoz.

<table>
  <caption>Mahsulot narxlari</caption>
  <tr>
    <th id="mahsulot">Mahsulot</th>
    <th id="narx">Narx</th>
  </tr>
  <tr>
    <td headers="mahsulot">Olma</td>
    <td headers="narx">12 000</td>
  </tr>
  <tr>
    <td headers="mahsulot">Non</td>
    <td headers="narx">4 000</td>
  </tr>
</table>

Bir yacheyka bir nechta sarlavhaga bog'lansa, headers ichiga bir nechta id ni bo'shliq bilan yozasan:

<td headers="imtihon yozma">85</td>

Bu "85 β€” Imtihon, Yozma" degani.

πŸ“Œ scope ni qachon, headers/id ni qachon ishlatish kerak?

Holat Tavsiya
Oddiy jadval (bir qator/ustun sarlavha) scope="col" / scope="row"
Murakkab, birlashgan, ko'p darajali sarlavhalar headers + id

⚠️ headers/id ko'proq yozishni talab qiladi va id lar butun sahifada noyob bo'lishi shart. Shuning uchun keraksiz joyda ishlatma β€” oddiy jadvalga scope yetarli. "Eng oddiy yetarli usulni tanla" tamoyiliga amal qil.

4.7 Ustunlarni guruhlash: colgroup va col

Hozirgacha biz qatorlarni (tr, thead/tbody) boshqardik. Lekin ba'zan butun ustunga xususiyat bermoqchi bo'lamiz β€” masalan ikkinchi ustunni och fon bilan ajratib ko'rsatish. HTML da yacheykalar qatorma-qator yoziladi, "ustun" degan to'g'ridan-to'g'ri element yo'q. Shu bois ustunlar uchun maxsus <colgroup> va <col> mavjud.

  • <colgroup> β€” ustunlar guruhini e'lon qiladi (<table> ichida, <caption> dan keyin, <thead> dan oldin).
  • <col> β€” bitta ustunni ifodalaydi (yopiluvchi yorliq kerak emas).
<table>
  <caption>Narxlar jadvali</caption>
  <colgroup>
    <col>
    <col style="background-color: #f8fafc;">
    <col span="2" style="background-color: #fef3c7;">
  </colgroup>
  <thead>
    <tr>
      <th>Mahsulot</th>
      <th>Narx</th>
      <th>Soni</th>
      <th>Jami</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Olma</td>
      <td>12 000</td>
      <td>3</td>
      <td>36 000</td>
    </tr>
  </tbody>
</table>

Natija: ikkinchi ustun ("Narx") och kulrang fonli, uchinchi va to'rtinchi ustunlar ("Soni", "Jami") sariq fonli bo'ladi. <col span="2"> bitta <col> bilan ikki ustunni qamrab oldi.

Nega foydali? Butun ustunga uslub bermoqchi bo'lsang, har bir <td> ga alohida class qo'shish o'rniga bitta <col> yetadi β€” kod qisqaradi.

⚠️ Muhim cheklov: <col> ga faqat cheklangan CSS xususiyatlar ta'sir qiladi: background, border, width, visibility. Masalan color (matn rangi) yoki font-weight <col> orqali ishlamaydi β€” chunki matn yacheykaga (<td>) tegishli, ustunga emas. Bu narsalar uchun yacheykalarning o'ziga uslub berish kerak.

πŸ’‘ <col> eng ko'p ishlatiladigan joyi β€” ustun kengligini (width) belgilash: <col style="width: 40%;">.

4.8 To'liq, "to'g'ri qurilgan" jadval namunasi

Endi o'rganganlarimizning hammasini bitta puxta jadvalga jamlaymiz. Bu β€” sen real loyihada yozishing kerak bo'lgan "etalon" jadval:

<table>
  <caption>2026-yil yarim yillik savdo hisoboti</caption>

  <colgroup>
    <col>
    <col span="2">
  </colgroup>

  <thead>
    <tr>
      <th scope="col">Hudud</th>
      <th scope="col">1-chorak</th>
      <th scope="col">2-chorak</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Toshkent</th>
      <td>4 500</td>
      <td>5 200</td>
    </tr>
    <tr>
      <th scope="row">Samarqand</th>
      <td>3 100</td>
      <td>3 400</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Jami</th>
      <td>7 600</td>
      <td>8 600</td>
    </tr>
  </tfoot>
</table>

Bu jadval nimasi bilan yaxshi? - <caption> β€” jadvalning aniq nomi bor. - <thead>/<tbody>/<tfoot> β€” mantiqiy bo'laklarga ajratilgan. - scope="col" va scope="row" β€” har bir son qaysi hudud va qaysi chorakka oid ekani skrin-riderga aniq. - <tfoot> dagi "Jami" β€” yakuniy hisob alohida ajratilgan.

πŸ“Œ Mana shu skelet β€” deyarli har qanday ma'lumot jadvali uchun ishlaydi. Yangi jadval yozayotganda shu namunadan boshla, keyin ustun/qatorlarni o'zingnikiga moslab o'zgartir.

4.9 Jadvalni CSS bilan bezashga kirish (oldindan eslatma)

Yuqorida aytib o'tdik: standart jadvalda chiziqlar ko'rinmaydi va yacheykalar bir-biriga yopishadi. Buni CSS hal qiladi. To'liq bezashni keyingi CSS boblarida o'rganamiz, lekin eng zarur ikki narsani hozir ko'rib qo'yamiz, chunki ularsiz jadval xunuk ko'rinadi.

<style>
  table {
    border-collapse: collapse; /* eng muhim qator β€” pastga qara */
    width: 100%;
  }
  th, td {
    border: 1px solid #94a3b8; /* har yacheykaga chiziq */
    padding: 8px 12px;          /* ichki bo'shliq */
    text-align: left;
  }
  thead {
    background-color: #dbeafe;  /* sarlavhaga fon */
  }
</style>

border-collapse β€” nega bu eng muhim qator?

Standart holatda har bir yacheyka o'zining alohida chizig'iga ega. Natijada ikki qo'shni yacheyka orasida ikkita chiziq paydo bo'ladi (biri u yacheykadan, biri bu yacheykadan) β€” qo'sh chiziqli, eski ko'rinishdagi jadval chiqadi.

border-collapse: collapse; brauzerga "qo'shni chiziqlarni bitta qilib birlashtir" deydi. Natijada toza, bir piksellik chiziqli zamonaviy jadval hosil bo'ladi.

πŸ’‘ Amaliyotda jadval bezayotganda deyarli har doim border-collapse: collapse; dan boshlanadi. Buni "jadval CSS ining birinchi qadami" deb yodda tut.

padding esa yacheyka ichidagi matnni chetidan biroz uzoqlashtiradi β€” matn chiziqqa yopishib turmaydi, o'qish qulay bo'ladi.

⚠️ Diqqat: chiroyli ko'rinish uchun chiziqni <table> ga emas, balki <th> va <td> ga ber. Faqat <table> ga border bersang, ichki yacheykalar orasida chiziq bo'lmaydi β€” atrofidagina ramka chiqadi.

Qolgani β€” ranglar, zebra (qator-ma-qator turli fon), :hover effektlari va responsive jadvallar β€” CSS boblarida batafsil. Hozircha jadvalning strukturasini mukammal qurishni o'rganib oldik; ko'rinish β€” keyingi qadam.

Xulosa

  • <table> faqat tabular data (ikki o'lchovli ma'lumot) uchun; layout uchun emas (CSS Flexbox/Grid bor).
  • Asosiy yorliqlar: <table> (idish), <tr> (qator), <td> (ma'lumot), <th> (sarlavha).
  • Struktura: <caption> (nom), <thead>/<tbody>/<tfoot> (bosh/tana/oyoq) jadvalni mantiqiy bo'laklaydi.
  • colspan β€” gorizontal, rowspan β€” vertikal birlashtirish; birlashgan qatorda ortiqcha yacheyka yozma.
  • Accessibility: oddiy jadvalga scope="col"/scope="row", murakkabga headers+id.
  • <colgroup>/<col> β€” butun ustunga (fon, kenglik) uslub berish uchun.
  • CSS bezashda border-collapse: collapse; dan boshla.

Mashqlar

Quyidagi mashqlarni tartib bilan bajar. Har birida avval o'zing urinib ko'r, keyin yechimni och.

Mashq 1 β€” Eng oddiy jadval

3 ustunli (Ism, Yosh, Kasb) va 2 ta ma'lumot qatori bo'lgan jadval yoz. Yuqori qator <th> lardan iborat bo'lsin.

Yechim 
<table>
  <tr>
    <th>Ism</th>
    <th>Yosh</th>
    <th>Kasb</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
    <td>Dasturchi</td>
  </tr>
  <tr>
    <td>Lola</td>
    <td>30</td>
    <td>Shifokor</td>
  </tr>
</table>

Mashq 2 β€” caption qo'shish

1-mashqdagi jadvalga "Xodimlar ro'yxati" degan <caption> qo'sh. U <table> ning birinchi bolasi bo'lishini unutma.

Yechim 
<table>
  <caption>Xodimlar ro'yxati</caption>
  <tr>
    <th>Ism</th>
    <th>Yosh</th>
    <th>Kasb</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
    <td>Dasturchi</td>
  </tr>
</table>

<caption> har doim <table> ichidagi eng birinchi element bo'lishi shart.

Mashq 3 β€” thead/tbody/tfoot bilan struktura

Quyidagi byudjet jadvalini to'liq strukturali (caption + thead + tbody + tfoot) holda yoz: nom "Oylik byudjet"; sarlavhalar "Modda" va "Summa"; tana qatorlari: Ovqat β€” 1 200 000, Transport β€” 300 000; oyoq qatori: Jami β€” 1 500 000.

Yechim 
<table>
  <caption>Oylik byudjet</caption>
  <thead>
    <tr>
      <th>Modda</th>
      <th>Summa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ovqat</td>
      <td>1 200 000</td>
    </tr>
    <tr>
      <td>Transport</td>
      <td>300 000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Jami</th>
      <td>1 500 000</td>
    </tr>
  </tfoot>
</table>

Mashq 4 β€” colspan bilan umumiy sarlavha

Ikki ustunli ("Telefon", "Email") jadval yoz, lekin ularning ustida bitta umumiy "Bog'lanish" sarlavhasi colspan bilan ikkala ustunni qamrasin.

Yechim 
<table>
  <tr>
    <th colspan="2">Bog'lanish</th>
  </tr>
  <tr>
    <th>Telefon</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>+998 90 123 45 67</td>
    <td>ali@example.com</td>
  </tr>
</table>

Birinchi qatorda atigi bitta <th> borligiga e'tibor ber β€” colspan="2" uni ikki ustunga cho'zadi.

Mashq 5 β€” rowspan bilan birlashtirish

Shahar bo'yicha guruhlangan jadval yoz: "Toshkent" yacheykasi rowspan="2" bilan ikki qatorni egallasin, yonida Ali va Lola bo'lsin.

Yechim 
<table>
  <tr>
    <th>Shahar</th>
    <th>Ism</th>
  </tr>
  <tr>
    <td rowspan="2">Toshkent</td>
    <td>Ali</td>
  </tr>
  <tr>
    <td>Lola</td>
  </tr>
</table>

Ikkinchi ma'lumot qatorida (Lola) faqat bitta <td> borligiga diqqat qil β€” chap ustunni "Toshkent" allaqachon egallab turibdi.

Mashq 6 β€” scope bilan accessibility

Quyidagi jadvalni accessible qil: yuqori qator <th> lariga scope="col", har qatorning birinchi (ism) yacheykasini <th scope="row"> qil.

<table>
  <tr><th>Ism</th><th>Yosh</th></tr>
  <tr><td>Ali</td><td>25</td></tr>
</table>
Yechim 
<table>
  <thead>
    <tr>
      <th scope="col">Ism</th>
      <th scope="col">Yosh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ali</th>
      <td>25</td>
    </tr>
  </tbody>
</table>

Endi skrin-rider "25" ni "Ali, Yosh: 25" deb o'qiydi. Ism yacheykasi <td> dan <th scope="row"> ga aylanganiga e'tibor ber.

Mashq 7 β€” colgroup bilan ustunni ajratish

Uch ustunli (Mahsulot, Narx, Soni) jadval yoz va <colgroup>/<col> yordamida o'rtadagi "Narx" ustuniga sariq (#fef3c7) fon ber.

Yechim 
<table>
  <caption>Mahsulotlar</caption>
  <colgroup>
    <col>
    <col style="background-color: #fef3c7;">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Mahsulot</th>
      <th scope="col">Narx</th>
      <th scope="col">Soni</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Olma</td>
      <td>12 000</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<colgroup> ichidagi ikkinchi <col> o'rtadagi ustunga mos keladi va faqat unga fon beradi.

Mashq 8 β€” To'liq jadval (yakuniy sinov)

Quyidagi shartlarning HAMMASIga javob beradigan bitta jadval yoz: 1. <caption> "Sinf natijalari". 2. <thead> da ikki darajali sarlavha: "Talaba" (rowspan="2") va "Imtihon" (colspan="2"), uning ostida "Yozma" va "Og'zaki". 3. <tbody> da kamida bitta talaba (ism <th scope="row">, ikkita baho <td>). 4. CSS bilan border-collapse: collapse; va yacheykalarga chiziq qo'sh.

Yechim 
<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #94a3b8;
    padding: 8px 12px;
    text-align: center;
  }
  thead {
    background-color: #dbeafe;
  }
</style>

<table>
  <caption>Sinf natijalari</caption>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Talaba</th>
      <th colspan="2" scope="colgroup">Imtihon</th>
    </tr>
    <tr>
      <th scope="col">Yozma</th>
      <th scope="col">Og'zaki</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ali</th>
      <td>85</td>
      <td>90</td>
    </tr>
    <tr>
      <th scope="row">Lola</th>
      <td>78</td>
      <td>88</td>
    </tr>
  </tbody>
</table>

Bu yechim bobning deyarli barcha tushunchalarini birlashtiradi: caption, thead/tbody, ikki darajali sarlavha (rowspan+colspan), scope, va asosiy CSS (border-collapse). "Imtihon" sarlavhasiga scope="colgroup" berildi β€” chunki u bir nechta ustunni qamragan guruh sarlavhasi.

⬅️ Oldingi: 03 β€” Havolalar va media Β· 🏠 README Β· Keyingi: 05 β€” Formalar ➑️