HTML jadval asoslari: table, tr, th, td va caption

Qisqacha: HTML jadval (table) — qator va ustunlardan iborat ma'lumot uchun: narxlar, dars jadvali, hisobot. Jadval qatorlarga (tr) bo'linadi, qatorlar esa kataklarga: sarlavha katagi (th) va oddiy katak (td). Jadvalning nomi caption bilan yoziladi. Jadval faqat ma'lumot uchun — sahifani ustunlarga bo'lish (layout) uchun emas.

Bu darsda

• Ma'lumotga jadval kerakmi yoki ro'yxat — bitta savol bilan ajratasiz.
• table, tr, td bilan birinchi jadvalni yozasiz.
• th va scope bilan ustun va qator sarlavhalarini belgilaysiz.
• caption bilan jadvalga nom berasiz.
• Nega sahifa joylashuvi jadval bilan qilinmasligini tushuntira olasiz.

Oldin bilishingiz kerak: Semantik HTML nima va nega kerak, Brauzer HTML'ni qanday tahlil qiladi.

1. Nega bu kerak?

Choyxona menyusida hozircha oddiy ro'yxat bor: "Osh — 35 000 so'm". Endi Rustam aka yarim porsiya ham sota boshladi. Ro'yxatda bu shunday ko'rinadi:

• Osh: yarim porsiya — 20 000 so'm, to'liq porsiya — 35 000 so'm.
• Lag'mon: yarim porsiya — 16 000 so'm, to'liq porsiya — 28 000 so'm.
• Manti: yarim porsiya — 17 000 so'm, to'liq porsiya — 30 000 so'm.

O'qisa bo'ladi, lekin ko'z har qatorda "yarim" va "to'liq" so'zlarini qidirib charchaydi. Mana shu ma'lumot jadvalda:

Endi "mantining to'liq porsiyasi qancha?" degan savolga bir qarashda javob topasiz: "Manti" qatori va "To'liq porsiya" ustuni kesishgan joy.

Maktabdagi dars jadvalini eslang: tepada kunlar, chapda soatlar. "Seshanba, 3-soat" — bitta katak. Bu dars shunday ma'lumotni HTML'da belgilashni o'rgatadi.

2. Qachon jadval kerak?

2.1 Bitta savol

Ma'lumotga qarab o'zingizga savol bering:

"Katakdagi qiymatni tushuntirish uchun uning qatorini ham, ustunini ham aytishim kerakmi?"

"35 000 so'm" o'zi hech narsa demaydi. "Bu — osh (qator), to'liq porsiya (ustun) narxi" desangiz, ma'no paydo bo'ladi. Javob "ha" bo'lsa — jadval.

2.2 Misollarda

dl — ta'rif ro'yxati: har bir band "nom — qiymat" juftligi. Ikki ustunli "jadval" ko'pincha aslida shu.

Tekshirib ko'ring: Taksi xizmati saytida: "Tarif", "1 km narxi", "Kutish (daqiqasiga)" — va uchta tarif: Start, Komfort, Biznes. Jadval kerakmi?

3. Birinchi jadval: table, tr, td

3.1 Qatorma-qator

<table>
  <tr>
    <td>Osh</td>
    <td>20 000 so'm</td>
    <td>35 000 so'm</td>
  </tr>
  <tr>
    <td>Lag'mon</td>
    <td>16 000 so'm</td>
    <td>28 000 so'm</td>
  </tr>
</table>

Uchta teg:

• table — butun jadval.
• tr (table row — jadval qatori) — bitta qator.
• td (table data — ma'lumot katagi) — bitta katak.

Diqqat qiling: ustun uchun alohida teg yo'q. Ustunlar kataklar tartibidan o'zi hosil bo'ladi. Har qatordagi birinchi td — 1-ustun, ikkinchisi — 2-ustun. Xuddi daftar varag'ini qatorma-qator to'ldirgandek: yozgan tartibingiz ustunni belgilaydi.

Shuning uchun asosiy qoida: har qatorda kataklar soni bir xil bo'lsin. Kataklarni birlashtirish yo'lini keyingi darsda ko'ramiz.

3.2 Brauzerda qanday ko'rinadi

Osh       20 000 so'm   35 000 so'm
Lag'mon   16 000 so'm   28 000 so'm

Ustunlar tekislangan, lekin chiziqlar yo'q. Ramka, rang va kataklar orasidagi masofa — CSS ishi. Jadvalni chiroyli qilishni CSS'da jadvallar stili darsida o'rganamiz.

Hozir kataklarni ko'rish uchun DevTools'dan foydalaning: Elements panelida td ustiga sichqonchani olib boring — brauzer katakni ekranda bo'yab ko'rsatadi.

Maslahat: Eski darsliklarda <table border="1"> ni uchratasiz — bu ramka chizadi. Atribut eskirgan: Nu Checker "The “border” attribute on the “table” element is obsolete" ("table dagi border atributi eskirgan") deb ogohlantiradi. Ko'rinish — CSS ishi.

3.3 tbody — linter talabi

Yuqoridagi jadvalni npx html-validate bilan tekshirsangiz, shunday xabar chiqadi:

2:3  error  Prefer to wrap <tr> elements in <tbody>  prefer-tbody

Tarjimasi: "tr elementlarini tbody ga o'rash afzal." Parser darsida ko'rgan edik: brauzer tbody ni baribir o'zi qo'shadi. Kod va DOM bir xil bo'lishi uchun uni o'zimiz yozamiz:

<table>
  <tbody>
    <tr>
      <td>Osh</td>
      <td>20 000 so'm</td>
      <td>35 000 so'm</td>
    </tr>
  </tbody>
</table>

tbody (table body — jadval tanasi) — ma'lumot qatorlari guruhi. Jadvalning boshqa qismlarini (thead, tfoot) keyingi darsda o'rganamiz. Shu darsdan boshlab har bir jadvalda tbody yozamiz.

Bo'sh joyni to'ldiring: jadval qatori qaysi teg bilan yoziladi?

4. th — sarlavha katagi

4.1 Ustun sarlavhalari

Jadvalimizga begona odam qaraydi: "20 000 so'm — nimaning narxi?" Ustunlarga nom kerak. Buning uchun birinchi qatorga th (table header — sarlavha katagi) qo'yamiz:

<table>
  <tbody>
    <tr>
      <th>Taom</th>
      <th>Yarim porsiya</th>
      <th>To'liq porsiya</th>
    </tr>
    <tr>
      <td>Osh</td>
      <td>20 000 so'm</td>
      <td>35 000 so'm</td>
    </tr>
  </tbody>
</table>

Brauzer th ni qalin va markazda ko'rsatadi. Lekin bu asosiy farq emas — asosiysi ma'no.

Ekran o'quvchi th ni "sarlavha" deb biladi. Foydalanuvchi jadval bo'ylab yurganda, har bir katak bilan birga uning sarlavhasini ham aytadi. Masalan: "To'liq porsiya, 35 000 so'm". Ko'zi ojiz foydalanuvchi uchun bu — ustun tepasiga qarash imkoniyati.

<td><b>Taom</b></td> — ko'rinishi o'xshash, lekin ekran o'quvchi uchun bu oddiy katak. Sarlavha bog'lanishi yo'qoladi.

4.2 Qator sarlavhalari

Taom nomi ham sarlavha: "Osh" qatoridagi hamma narx oshga tegishli. Shuning uchun har qatorning birinchi katagi ham th bo'ladi:

<tr>
  <th>Osh</th>
  <td>20 000 so'm</td>
  <td>35 000 so'm</td>
</tr>

Endi har bir narxning ikkita sarlavhasi bor: qatorniki ("Osh") va ustunniki ("To'liq porsiya"). Ekran o'quvchi taxminan shunday o'qiydi: "Osh, To'liq porsiya, 35 000 so'm".

4.3 scope — sarlavha qaysi tomonga qaraydi

Jadvalni npx html-validate bilan tekshiring. Endi har bir th uchun shunday xato chiqadi:

12:8  error  <th> element must have a valid scope attribute: row, col, rowgroup or colgroup  wcag/h63

Tarjimasi: "th elementida to'g'ri scope atributi bo'lishi shart: row, col, rowgroup yoki colgroup." wcag/h63 — accessibility qoidalari to'plamidan.

Nega endi? Sarlavhalar faqat birinchi qatorda bo'lsa, hammasi ustun sarlavhasi ekani aniq. Birinchi ustunda ham th paydo bo'lgach, jadval murakkablashdi: qaysi th qaysi tomonga qaraydi? Brauzer buni joylashuvga qarab taxmin qiladi, linter esa taxminga ishonmaydi va aniq aytishni so'raydi.

scope ("qamrov") — sarlavha qaysi kataklarga tegishli:

• scope="col" — "men pastdagi ustunning sarlavhasiman".
• scope="row" — "men o'ngdagi qatorning sarlavhasiman".

<tr>
  <th scope="col">Taom</th>
  <th scope="col">Yarim porsiya</th>
  <th scope="col">To'liq porsiya</th>
</tr>
<tr>
  <th scope="row">Osh</th>
  <td>20 000 so'm</td>
  <td>35 000 so'm</td>
</tr>

Qolgan ikki qiymat (rowgroup, colgroup) va murakkab jadvallar — Accessible jadvallar darsida. Hozircha qoida: ham qator, ham ustun sarlavhasi bor jadvalda har bir th ga scope yozamiz.

4.4 Chap yuqori burchak

Bizda chap yuqori katak — "Taom". U taom nomlari ustunining sarlavhasi, shuning uchun th.

Ba'zan u katakka yozadigan narsa bo'lmaydi — masalan, dars jadvalida kunlar va soatlar kesishgan burchak. Bo'sh sarlavha hech narsani nomlamaydi, shuning uchun bo'sh burchakni td qilgan ma'qul.

Tekshirib ko'ring: Nega sarlavha katagini <td><strong>...</strong></td> bilan yozish yetarli emas?

5. caption — jadval nomi

Jadvalga nom kerak: "Bu nima haqidagi jadval?" Buning uchun caption (jadval nomi) bor:

<table>
  <caption>Bugungi narxlar</caption>
  <tbody>
    <tr>
      <th scope="col">Taom</th>
      <th scope="col">Yarim porsiya</th>
      <th scope="col">To'liq porsiya</th>
    </tr>
    <tr>
      <th scope="row">Osh</th>
      <td>20 000 so'm</td>
      <td>35 000 so'm</td>
    </tr>
    <tr>
      <th scope="row">Lag'mon</th>
      <td>16 000 so'm</td>
      <td>28 000 so'm</td>
    </tr>
    <tr>
      <th scope="row">Manti</th>
      <td>17 000 so'm</td>
      <td>30 000 so'm</td>
    </tr>
  </tbody>
</table>

Qoidalar:

• caption — table ning birinchi bolasi. Boshqa joyda turolmaydi.
• Brauzer uni jadval tepasida, markazda ko'rsatadi.
• Ekran o'quvchi jadvalga kirganda avval nomini aytadi. Masalan: "Bugungi narxlar, jadval, 4 qator, 3 ustun". Foydalanuvchi jadvalni o'qishga arziydimi — darhol biladi.

caption yoki jadval ustidagi sarlavha (h2)? Ular turli ishni qiladi:

• h2 — sahifa mundarijasining qismi. Ekran o'quvchi sarlavhalar bo'yicha sakrab, uni topadi.
• caption — jadvalning o'z nomi. U jadvalga bog'langan.

Ikkalasi birga ham bo'lishi mumkin: section sarlavhasi "Menyu", ichida jadval nomi "Issiq taomlar narxi". Faqat bir xil matnni ikki marta yozmang — ekran o'quvchi foydalanuvchisi uni ikki marta eshitadi.

Parser darsidagi mashqni eslang: jadval ichida adashgan "Bugungi narxlar" matni jadvaldan tashqariga chiqib ketgan edi. To'g'ri yechim — aynan caption.

Bo'sh joyni to'ldiring: caption jadvalning nechanchi bolasi bo'lishi kerak?

6. Katak ichida nima bo'ladi?

td ichida deyarli hamma narsa bo'lishi mumkin: matn, havola, rasm, ro'yxat, time:

<tr>
  <th scope="row"><a href="menyu/#osh">Osh</a></th>
  <td>35 000 so'm</td>
  <td><time datetime="11:00">11:00</time> dan</td>
</tr>

th ichida ham matn va havola bo'ladi, lekin header, footer, sarlavha (h1–h6) va section kabi bo'lim teglari bo'lmaydi. Bu — kontent modeli: sarlavha katagi o'zi sarlavha, uning ichida yana bir sarlavha ortiqcha.

Yana ikki qoida:

• Jadval ichida jadval — HTML ruxsat beradi, lekin deyarli har doim yomon g'oya. Ekran o'quvchi foydalanuvchisi qaysi jadvalda turganini yo'qotadi. Ikki alohida jadval qiling.
• Bo'sh katak. Ma'lumot yo'q bo'lsa, katakni bo'sh qoldirish mumkin — ekran o'quvchi "bo'sh" deydi. Lekin bo'shliqning ma'nosi bo'lsa, so'z bilan yozing: "Tugadi", "Yo'q". Aks holda o'quvchi "unutib qo'yishganmi?" deb o'ylaydi.

7. Jadval bilan sahifa joylashuvi: eski xato

7.1 Tarix

1990–2000 yillarda CSS zaif edi. Sahifani ustunlarga bo'lishning deyarli yagona yo'li — jadval edi. Butun sahifa bitta katta jadval bo'lardi: chap katakda menyu, o'ng katakda kontent. Bu layout-jadval (layout table) deyiladi:

<table>
  <tbody>
    <tr>
      <td>
        <a href="./">Bosh sahifa</a><br>
        <a href="menyu/">Menyu</a>
      </td>
      <td>
        <h1>Choyxona «Bahor»</h1>
        <p>1998-yildan beri Chilonzorda.</p>
      </td>
    </tr>
  </tbody>
</table>

Validator bu kodda xato topmaydi — grammatika to'g'ri. Xato — ma'noda.

7.2 Nega bu yomon

• Ekran o'quvchi yolg'on eshitadi. "Jadval, 1 qator, 2 ustun" — foydalanuvchi ma'lumot kutadi, u yerda esa menyu va matn.
• Telefonda buziladi. Jadval ustunlari ekranga siqiladi. CSS bilan qurilgan joylashuv esa tor ekranda ustunlarni bir-birining ostiga tushiradi.
• Landmarklar yo'q. Menyu nav emas, asosiy kontent main emas.
• O'zgartirish qiyin. Real saytlarda jadval ichida jadval, uning ichida yana jadval bo'lardi. Bitta blokni ko'chirish — butun tuzilmani qayta yozish.
• Asosiy qoida buzilgan. HTML nima darsidagi qoida: HTML — ma'no, CSS — ko'rinish.

To'g'ri yo'l — landmarklar va CSS. Ustunli joylashuvni Flexbox va Grid bilan CSS qismida qurasiz.

7.3 Yagona istisno: HTML email

Gmail va Outlook kabi pochta dasturlari zamonaviy CSS'ning ko'p qismini tushunmaydi. Shuning uchun email xatlar hali ham jadval bilan quriladi. Bunday jadvalga role="presentation" qo'shiladi — "bu jadval emas, faqat joylashuv" degani. Ekran o'quvchi uni jadval deb e'lon qilmaydi. Batafsil — CSS qismidagi HTML email'larni stillash darsida.

8. Ko'p uchraydigan xatolar

8.1 tr siz katak

<table>
  <td>Osh</td>
  <td>35 000 so'm</td>
</table>

Nu Checker:

Error: “td” start tag in table body.

Tarjimasi: "Jadval tanasida td ning ochuvchi tegi." Ya'ni katak qatorsiz turibdi. Parser jimgina tbody va tr qo'shadi, lekin validator xato deydi. html-validate'da: <td> element is not permitted as content under <table>. Tuzatish: har bir katak tr ichida, tr esa tbody ichida.

8.2 caption noto'g'ri joyda

caption ni jadval oxiriga yozish (Word'dagi rasm izohi kabi). html-validate:

Element <caption> must be used before <tr> in this context

Tarjimasi: "caption elementi bu yerda tr dan oldin ishlatilishi kerak." Tuzatish: caption — table ochilgandan keyingi birinchi qator.

8.3 Kataklar soni har xil

Bir qatorda uchta katak, keyingisida ikkita. Nu Checker ogohlantiradi:

Warning: A table row was 2 columns wide, which is less than the column count established by the first row (3).

Tarjimasi: "Jadval qatori 2 ustun kengligida — bu birinchi qator belgilagan ustunlar sonidan (3) kam." Brauzerda qator oxirida "teshik" qoladi. Tuzatish: yetishmagan katakni qo'shing (bo'sh bo'lsa ham) yoki kataklarni birlashtiring.

8.4 Kataklardan tashqaridagi matn

tr ichida, lekin katak tashqarisida matn: <tr>Osh <td>35 000</td></tr>. Nu Checker: "Misplaced non-space characters inside a table." ("Jadval ichida noto'g'ri joylashgan matn belgilari.") Parser bu matnni jadvaldan oldinga chiqarib yuboradi. Tuzatish: matn faqat td, th yoki caption ichida.

8.5 Qalin td sarlavha o'rnida

Validator jim turadi, lekin ekran o'quvchi uchun jadval sarlavhasiz qoladi. Tuzatish: sarlavha — th, qalinlik — CSS.

9. Mashqlar

1-mashq (oson): Tegni ayting

1. Sarlavha katagi:
2. Oddiy ma'lumot katagi:
3. Jadval nomi:

2-mashq (o'rta): Yetkazib berish jadvali

Choyxona har kuni 7:00 dan 23:00 gacha ochiq, lekin osh yetkazib berish xizmati boshqa vaqtda ishlaydi: dushanbadan jumagacha 10:00–22:00, shanba 11:00–23:00, yakshanba 11:00–21:00. Jadval yozing: nomi "Yetkazib berish vaqti", ustunlar — "Kunlar", "Boshlanadi", "Tugaydi". Kunlar — qator sarlavhalari. tbody va scope ni unutmang (sarlavhalar ikki tomonda bor).

<table>
  <caption>Yetkazib berish vaqti</caption>
  <tbody>
    <tr>
      <th scope="col">Kunlar</th>
      <th scope="col">Boshlanadi</th>
      <th scope="col">Tugaydi</th>
    </tr>
    <tr>
      <th scope="row">Dushanba–juma</th>
      <td>10:00</td>
      <td>22:00</td>
    </tr>
    <tr>
      <th scope="row">Shanba</th>
      <td>11:00</td>
      <td>23:00</td>
    </tr>
    <tr>
      <th scope="row">Yakshanba</th>
      <td>11:00</td>
      <td>21:00</td>
    </tr>
  </tbody>
</table>

3-mashq (qiyin): Menyu sahifasi

1. Quyidagi to'rt ma'lumot uchun to'g'ri tegni tanlang (table, ul yoki dl):
   • a) Choy turlari: ko'k choy, qora choy, limonli choy.
   • b) Uchta taomning yarim va to'liq porsiya narxlari.
   • c) "Manzil — Chilonzor", "Telefon — +998 90 000 00 00".
   • d) Uchta ichimlikning 0,5 litr va 1 litr narxlari.
2. menyu/index.html da "Narxlar" bo'limini (section, h2) yarating. Unda b) va d) uchun ikkita jadval bo'lsin — har birida caption, ustun va qator sarlavhalari.
3. Bitta taom tugagan bo'lsin — katakka buni so'z bilan yozing.
4. npx html-validate menyu/index.html — jim bo'lsin.

<section>
  <h2>Narxlar</h2>

  <table>
    <caption>Issiq taomlar</caption>
    <tbody>
      <tr>
        <th scope="col">Taom</th>
        <th scope="col">Yarim porsiya</th>
        <th scope="col">To'liq porsiya</th>
      </tr>
      <tr>
        <th scope="row">Osh</th>
        <td>20 000 so'm</td>
        <td>35 000 so'm</td>
      </tr>
      <tr>
        <th scope="row">Lag'mon</th>
        <td>16 000 so'm</td>
        <td>28 000 so'm</td>
      </tr>
      <tr>
        <th scope="row">Manti</th>
        <td>Bugun tugadi</td>
        <td>Bugun tugadi</td>
      </tr>
    </tbody>
  </table>

  <table>
    <caption>Ichimliklar</caption>
    <tbody>
      <tr>
        <th scope="col">Ichimlik</th>
        <th scope="col">0,5 litr</th>
        <th scope="col">1 litr</th>
      </tr>
      <tr>
        <th scope="row">Kompot</th>
        <td>6 000 so'm</td>
        <td>10 000 so'm</td>
      </tr>
      <tr>
        <th scope="row">Ayron</th>
        <td>7 000 so'm</td>
        <td>12 000 so'm</td>
      </tr>
      <tr>
        <th scope="row">Limonad</th>
        <td>8 000 so'm</td>
        <td>14 000 so'm</td>
      </tr>
    </tbody>
  </table>
</section>

10. Real ishda

• Admin panellar. Buyurtmalar, mijozlar, to'lovlar ro'yxati — deyarli har doim jadval. Click yoki Payme'ning shaxsiy kabinetidagi to'lovlar tarixi ham aslida jadval.
• Jadval kutubxonalari. React loyihalarida saralash va sahifalash uchun TanStack Table yoki AG Grid kabi kutubxonalar ishlatiladi (kursda keyinroq). Ular ham oxir-oqibat aynan table, tr, th, td ni yaratadi.
• Excel bilan do'stlik. To'g'ri HTML jadvalni brauzerdan nusxalab Excel yoki Google Sheets'ga joylasangiz, kataklar o'z joyiga tushadi. div lar bilan "chizilgan" jadval bilan bu ishlamaydi.
• Intervyu savoli: "Sahifa joylashuvini jadval bilan qilish mumkinmi?" Kuchli javob: "Yo'q — jadval ma'lumot uchun; joylashuv CSS'da. Istisno — HTML email, u yerda role="presentation" qo'yiladi."

Xulosa

• Jadval — qator va ustunli ma'lumot uchun: katak ma'nosi qatori va ustunidan kelib chiqsa.
• table → tbody → tr → td/th; ustun uchun teg yo'q — u kataklar tartibidan hosil bo'ladi.
• th — sarlavha katagi: ekran o'quvchi uni har bir tegishli katak bilan birga aytadi; ikki tomonlama sarlavhada scope="col" va scope="row".
• caption — jadval nomi, table ning birinchi bolasi.
• Chiziq va ranglar — CSS ishi; border atributi eskirgan.
• Jadval bilan sahifa joylashuvi — eski xato; istisno faqat HTML email.

Keyingi dars: Jadval qismlari va kataklarni birlashtirish — thead, tbody, tfoot, hamda colspan va rowspan bilan birlashgan kataklar.

Manbalar

• MDN: "HTML table basics" va <table> — developer.mozilla.org
• W3C WAI: "Tables Tutorial" — w3.org/WAI/tutorials/tables
• WHATWG HTML: "Tabular data" — html.spec.whatwg.org