HTML jadval qismlari: thead, tbody, tfoot va colspan, rowspan bilan birlashtirish

Qisqacha: Jadval uch qismga bo'linadi: thead — sarlavha qatorlari, tbody — asosiy ma'lumot (bir nechta bo'lishi mumkin), tfoot — xulosa, masalan jami summa. Katak bir nechta ustunni egallasa colspan, bir nechta qatorni egallasa rowspan atributi yoziladi. colgroup va col esa butun ustunni belgilaydi — asosan CSS uchun.

Bu darsda

• thead, tbody va tfoot bilan jadvalni qismlarga bo'lasiz.
• colspan va rowspan bilan kataklarni birlashtirasiz.
• "Katak xaritasi" yordamida birlashgan jadvalni xatosiz yozasiz.
• Bir nechta tbody bilan qatorlarni guruhlarga ajratasiz.
• colgroup va col nima uchun kerakligini bilasiz.

Oldin bilishingiz kerak: Jadval asoslari.

1. Nega bu kerak?

Choyxonada buyurtma cheki shunday ko'rinadi:

Taom        Soni   Narxi         Summa
Osh         2      35 000 so'm   70 000 so'm
Lag'mon     1      28 000 so'm   28 000 so'm
Ko'k choy   2      5 000 so'm    10 000 so'm
Jami                             108 000 so'm

O'tgan darsda o'rgangan teglar bilan buni yozish qiyin. Ikki muammo bor:

1. Qatorlar bir xil emas. Birinchisi — sarlavha, oxirgisi — xulosa, o'rtadagilar — ma'lumot. HTML buni qanday bilsin?
2. "Jami" qatorida faqat ikkita qiymat bor, jadvalda esa to'rtta ustun. "Jami" so'zi uch ustun kengligida turishi kerak.

Birinchisini jadval qismlari hal qiladi, ikkinchisini — kataklarni birlashtirish.

2. Jadvalning uch qismi

2.1 thead — sarlavha qismi

thead (table head — jadval boshi) — ustun sarlavhalari turgan qatorlar. O'tgan darsda sarlavha qatorini tbody ichiga yozgan edik — endi uning to'g'ri joyi:

<table>
  <caption>Buyurtma № 57</caption>
  <thead>
    <tr>
      <th scope="col">Taom</th>
      <th scope="col">Soni</th>
      <th scope="col">Narxi</th>
      <th scope="col">Summa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Osh</th>
      <td>2</td>
      <td>35 000 so'm</td>
      <td>70 000 so'm</td>
    </tr>
  </tbody>
</table>

Brauzerda hech narsa o'zgarmadi. O'zgarish — ma'noda: endi brauzer, ekran o'quvchi va CSS qaysi qator sarlavha ekanini aniq biladi.

2.2 tfoot — xulosa qismi

tfoot (table foot — jadval oxiri) — xulosa qatorlari: jami summa, o'rtacha qiymat, izoh. U tbody dan keyin yoziladi:

<tfoot>
  <tr>
    <th scope="row">Jami</th>
    <td>108 000 so'm</td>
  </tr>
</tfoot>

Hozircha "Jami" qatorida ikkita katak — to'rtta ustunga yetmaydi. Buni 3-bo'limda tuzatamiz.

Jadval ichidagi qat'iy tartib:

Maslahat: Eski maqolalarda tfoot ni tbody dan oldin yozishni ko'rasiz. Bu HTML 4 qoidasi edi — bugun u xato. html-validate: "Element must be used before in this context" ("Bu yerda tbody tfoot dan oldin ishlatilishi kerak").

2.3 Nega qismlarga bo'lish kerak

• Ma'no. Ekran o'quvchi va boshqa vositalar sarlavha va xulosa qatorlarini ma'lumotdan ajratadi.
• Chop etish. Uzun jadval bir necha varaqqa chiqsa, Chrome va Firefox thead ni har bir varaq boshida takrorlaydi. Qog'ozdagi hisobotda har sahifada ustun nomlari ko'rinib turadi.
• CSS. Sarlavha va jami qatorlarini alohida bezash oson. Uzun jadvalni skroll qilganda thead ni tepada "yopishtirib" qo'yish ham mumkin — CSS qismida.
• JavaScript. Jadvalni narx bo'yicha saralashda faqat tbody qatorlari aralashtiriladi. Sarlavha va jami joyida qoladi.

Parser darsini eslang: tbody ni yozmasangiz, brauzer uni o'zi qo'shadi. thead va tfoot esa hech qachon avtomatik paydo bo'lmaydi — ularni faqat siz yozasiz.

Bo'sh joyni to'ldiring: jami summa turgan qator qaysi qism ichida bo'ladi?

3. colspan — bir nechta ustunni egallash

"Jami" katagi uchta ustun kengligida bo'lishi kerak. Buning uchun colspan (column span — ustunlar bo'ylab cho'zilish) atributi bor:

<tfoot>
  <tr>
    <th scope="row" colspan="3">Jami</th>
    <td>108 000 so'm</td>
  </tr>
</tfoot>

colspan="3" — "bu katak uchta ustun joyini egallaydi". Qatorda endi ikkita element, lekin ular to'rtta ustunni to'ldiradi: 3 + 1 = 4.

Bu Excel'dagi "Merge cells" ("kataklarni birlashtirish") tugmasiga o'xshaydi. Faqat HTML'da birlashgan kataklarning bittasi yoziladi, qolganlari umuman yozilmaydi.

Asosiy qoida: har qatorda colspan lar yig'indisi ustunlar soniga teng bo'lsin. Oddiy katakning colspan i — 1.

Tekshirib ko'ring: Jadvalda 5 ta ustun bor. Qatorda <td colspan="2"> va yana ikkita oddiy td. Qator to'liqmi?

4. rowspan — bir nechta qatorni egallash

4.1 Misol: haftalik tadbirlar

Choyxonada juma kuni ikkita tadbir bor. "Juma" so'zini ikki marta yozish o'rniga, katakni ikki qator bo'ylab cho'zamiz — rowspan (row span — qatorlar bo'ylab cho'zilish):

<tr>
  <th scope="row" rowspan="2">Juma</th>
  <td>11:00</td>
  <td>Juma oshi</td>
</tr>
<tr>
  <td>19:00</td>
  <td>Maqom kechasi</td>
</tr>

E'tibor bering: ikkinchi qatorda kataklar bittaga kam. Uning birinchi ustunini yuqoridagi "Juma" katagi allaqachon egallab turibdi. Ikkinchi qatorga "Juma" uchun bo'sh katak yozsangiz, qator bitta ustunga uzayib ketadi. Bu — rowspan dagi eng ko'p uchraydigan xato.

scope="row" va rowspan="2" birga ishlaydi: "Juma" ikkala qatorning sarlavhasi bo'ladi.

4.2 Katak xaritasi

Birlashgan kataklar ko'paysa, adashish oson. Yordam beradigan usul — kod yozishdan oldin katak xaritasini chizish. Har bir katakka qator va ustun raqami bilan qarang:

         1-ustun     2-ustun    3-ustun
1-qator  Kun         Vaqt       Tadbir
2-qator  Dushanba    19:00      Kitobxonlik kechasi
3-qator  Juma ┐      11:00      Juma oshi
4-qator       ┘      19:00      Maqom kechasi
5-qator  Yakshanba   Tadbir yo'q ────────────┐

• 3–4 qatorlar: "Juma" — rowspan="2". 4-qatorda kod faqat ikkita katakdan iborat.
• 5-qator: "Tadbir yo'q" ikkita ustunni egallaydi — colspan="2".

Endi kodni yozamiz:

<table>
  <caption>Haftalik tadbirlar</caption>
  <thead>
    <tr>
      <th scope="col">Kun</th>
      <th scope="col">Vaqt</th>
      <th scope="col">Tadbir</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Dushanba</th>
      <td>19:00</td>
      <td>Kitobxonlik kechasi</td>
    </tr>
    <tr>
      <th scope="row" rowspan="2">Juma</th>
      <td>11:00</td>
      <td>Juma oshi</td>
    </tr>
    <tr>
      <td>19:00</td>
      <td>Maqom kechasi</td>
    </tr>
    <tr>
      <th scope="row">Yakshanba</th>
      <td colspan="2">Tadbir yo'q — oilaviy kun</td>
    </tr>
  </tbody>
</table>

Tekshirish usuli: har bir qator uchun "o'z kataklari (colspan bilan) + yuqoridan tushgan rowspan kataklar" ni sanang. Hamma qatorda 3 chiqishi kerak:

4.3 Chegaralar va maxsus qiymat

• colspan — 1 dan 1000 gacha, rowspan — 0 dan 65534 gacha. Kattaroq son yozsangiz, brauzer uni shu chegaraga qisqartiradi.
• rowspan="0" — maxsus qiymat: "shu qator guruhining (tbody) oxirigacha". Standartda bor, lekin kam ishlatiladi. Aniq son yozing — kod o'qigan odamga tushunarliroq.
• rowspan qator guruhidan chiqolmaydi: tbody dagi katak tfoot ga "tushib" o'tmaydi.

Bo'sh joyni to'ldiring: katakni ikki qator bo'ylab cho'zadigan atribut —

5. Bir nechta tbody — qatorlarni guruhlash

Menyuda taomlar guruhlarga bo'lingan: issiq taomlar, salatlar. Ularni ikkita alohida jadval qilish mumkin. Lekin ustunlar bir xil bo'lsa ("Yarim porsiya", "To'liq porsiya"), bitta jadvalda bir nechta tbody qulayroq:

<table>
  <caption>Menyu narxlari</caption>
  <thead>
    <tr>
      <th scope="col">Taom</th>
      <th scope="col">Yarim porsiya</th>
      <th scope="col">To'liq porsiya</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" colspan="3">Issiq taomlar</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>
  </tbody>
  <tbody>
    <tr>
      <th scope="rowgroup" colspan="3">Salatlar</th>
    </tr>
    <tr>
      <th scope="row">Achchiq-chuchuk</th>
      <td>7 000 so'm</td>
      <td>12 000 so'm</td>
    </tr>
  </tbody>
</table>

• Har bir tbody — bitta guruh. thead bitta, butun jadvalga umumiy.
• Guruh nomi — colspan="3" bilan butun qator kengligidagi th.
• scope="rowgroup" — "men butun qator guruhining sarlavhasiman". Shunda "Osh" narxini o'qiganda ekran o'quvchi "Issiq taomlar" ni ham bog'lay oladi. scope ning bu qiymatini Accessible jadvallar darsida chuqurroq ko'ramiz.

Bir nechta tbody CSS va JavaScript uchun ham foydali: har bir guruhni alohida bezash yoki "Salatlar" ni bir bosishda yashirish mumkin.

Tekshirib ko'ring: Jadvalda nechta thead va nechta tbody bo'lishi mumkin?

6. colgroup va col — ustunni belgilash

O'tgan darsda aytgan edik: HTML'da ustun uchun teg yo'q. Aslida bittasi bor — faqat u kontent emas, ustunning tavsifi.

<table>
  <caption>Buyurtma № 57</caption>
  <colgroup>
    <col class="taom-ustuni">
    <col span="3" class="son-ustunlari">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Taom</th>
      <th scope="col">Soni</th>
      <th scope="col">Narxi</th>
      <th scope="col">Summa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Osh</th>
      <td>2</td>
      <td>35 000 so'm</td>
      <td>70 000 so'm</td>
    </tr>
  </tbody>
</table>

• colgroup (column group — ustunlar guruhi) — caption dan keyin, thead dan oldin turadi.
• col (column — ustun) — bitta ustunni ifodalaydi. U bo'sh element: yopuvchi tegi yo'q, ichida hech narsa bo'lmaydi.
• span="3" — bitta col ketma-ket uchta ustunni ifodalaydi.

Brauzerda yana hech narsa o'zgarmadi. Unda nega kerak?

1. CSS uchun. Butun ustunga fon rangi yoki kenglik berish — har bir katakka alohida class yozish shart emas. Lekin col ga faqat bir necha CSS xususiyati ishlaydi: fon, ramka, kenglik va visibility. Buni CSS'da jadvallar stili darsida ko'rasiz.
2. Ustunlar guruhi uchun. Bir nechta ustunni ma'no bo'yicha guruhlash — masalan, "Tushlik" va "Kechki ovqat" ostidagi ustunlar. Bu scope="colgroup" bilan ishlaydi — keyingi darsda.

Kichik jadvallarda colgroup ko'pincha umuman yozilmaydi — bu normal.

7. Ko'p uchraydigan xatolar

7.1 rowspan dan keyin ortiqcha katak

<tr>
  <th scope="row" rowspan="2">Juma</th>
  <td>11:00</td>
  <td>Juma oshi</td>
</tr>
<tr>
  <td></td>
  <td>19:00</td>
  <td>Maqom kechasi</td>
</tr>

Ikkinchi qatordagi bo'sh td — "Juma" ning joyini "to'ldirish" uchun. Lekin u joy band! Nu Checker:

Warning: A table row was 4 columns wide and exceeded the column count established by the first row (3).

Tarjimasi: "Jadval qatori 4 ustun kengligida bo'ldi va birinchi qator belgilagan ustunlar sonidan (3) oshib ketdi." Brauzerda "Maqom kechasi" jadval tashqarisidagi to'rtinchi ustunga chiqib qoladi. Tuzatish: bo'sh td ni o'chiring.

7.2 colspan yig'indisi noto'g'ri

Chekdan "Narxi" ustuni olib tashlandi — endi jadvalda 3 ta ustun. "Jami" qatori esa eskicha qoldi: colspan="3" va yana bitta td, jami 4. Nu Checker yana 7.1-dagi "exceeded" ("oshib ketdi") xabarini beradi. Yig'indi kam bo'lsa — "less than" ("kamroq") so'zli xabar chiqadi. Tuzatish: ustunlar soni o'zgarganda hamma colspan larni qayta sanang: bu yerda colspan="2". Katak xaritasi (4.2-bo'lim) shunday xatolarni oldindan ko'rsatadi.

7.3 Qismlar tartibi buzilgan

thead ni tbody dan keyin yoki tfoot ni tbody dan oldin yozish. html-validate:

Element <thead> must be used before <tbody> in this context

Tarjimasi: "Bu yerda thead tbody dan oldin ishlatilishi kerak." Nu Checker esa "Element “thead” not allowed as child of element “table” in this context" deydi. Tuzatish: tartib — caption, colgroup, thead, tbody, tfoot.

7.4 Chiroy uchun birlashtirish

Ikki taomning narxi bir xil (35 000 so'm) — ularni rowspan bilan bitta katakka birlashtirish. Ko'rinishi ixcham, lekin ma'no buziladi: saralashda bu kataklar ajralmaydi, ekran o'quvchi esa ikkinchi taom narxini "topa olmay" qolishi mumkin. Tuzatish: birlashtirish faqat ma'noda bitta bo'lgan narsa uchun ("Juma" — ikki tadbirning bitta kuni). Bir xil qiymatlar — takrorlanadi.

8. Mashqlar

1-mashq (oson): Atribut va teglar

1. Katak uchta ustunni egallashi uchun atribut:
2. Ustun sarlavhalari turadigan qism:
3. Jadvalda nechta tfoot bo'lishi mumkin (ko'pi bilan)?

2-mashq (o'rta): Oshpazlar navbatchiligi

Katak xaritasini chizing, keyin jadvalni yozing. Nomi — "Oshpazlar navbatchiligi". Ustunlar: "Kun", "Smena", "Oshpaz".

• Dushanba: ertalab — Rustam aka, kechqurun — Sherzod.
• Seshanba: ertalab — Sherzod, kechqurun — Rustam aka.
• Chorshanba: butun kun — Kamola (smena katagi ham, oshpaz katagi ham bitta: "Butun kun: Kamola").

          Kun         Smena        Oshpaz
          Dushanba ┐  Ertalab      Rustam aka
                   ┘  Kechqurun    Sherzod
          Seshanba ┐  Ertalab      Sherzod
                   ┘  Kechqurun    Rustam aka
          Chorshanba  Butun kun: Kamola ──────┐

<table>
  <caption>Oshpazlar navbatchiligi</caption>
  <thead>
    <tr>
      <th scope="col">Kun</th>
      <th scope="col">Smena</th>
      <th scope="col">Oshpaz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" rowspan="2">Dushanba</th>
      <td>Ertalab</td>
      <td>Rustam aka</td>
    </tr>
    <tr>
      <td>Kechqurun</td>
      <td>Sherzod</td>
    </tr>
    <tr>
      <th scope="row" rowspan="2">Seshanba</th>
      <td>Ertalab</td>
      <td>Sherzod</td>
    </tr>
    <tr>
      <td>Kechqurun</td>
      <td>Rustam aka</td>
    </tr>
    <tr>
      <th scope="row">Chorshanba</th>
      <td colspan="2">Butun kun: Kamola</td>
    </tr>
  </tbody>
</table>

3-mashq (qiyin): To'liq chek

Choyxona cheki jadvalini yozing:

1. caption: "Buyurtma № 58".
2. colgroup: birinchi ustun alohida, qolgan uchtasi bitta col da (span).
3. thead: Taom, Soni, Narxi, Summa.
4. tbody: osh — 2 × 35 000, lag'mon — 1 × 28 000, ko'k choy — 2 × 5 000.
5. tfoot — ikki qator: "Xizmat haqi (10%)" va "Jami". Ikkalasining nomi uch ustun kengligida.
6. Summalarni o'zingiz hisoblang. npx html-validate — jim bo'lsin.

<table>
  <caption>Buyurtma № 58</caption>
  <colgroup>
    <col>
    <col span="3">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Taom</th>
      <th scope="col">Soni</th>
      <th scope="col">Narxi</th>
      <th scope="col">Summa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Osh</th>
      <td>2</td>
      <td>35 000 so'm</td>
      <td>70 000 so'm</td>
    </tr>
    <tr>
      <th scope="row">Lag'mon</th>
      <td>1</td>
      <td>28 000 so'm</td>
      <td>28 000 so'm</td>
    </tr>
    <tr>
      <th scope="row">Ko'k choy</th>
      <td>2</td>
      <td>5 000 so'm</td>
      <td>10 000 so'm</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="3">Xizmat haqi (10%)</th>
      <td>10 800 so'm</td>
    </tr>
    <tr>
      <th scope="row" colspan="3">Jami</th>
      <td>118 800 so'm</td>
    </tr>
  </tfoot>
</table>

9. Real ishda

• Hisobotlar va hisob-fakturalar. Buxgalteriya hisobotlari, oylik vedomostlari, onlayn do'kon hisob-fakturalari — hammasida thead va "Jami" tfoot i bor. Ko'p kompaniyalar PDF chek va hisob-fakturani aynan HTML jadvaldan yasaydi.
• Admin panellar. Uzun ro'yxatlarda thead skroll paytida tepada qotib turadi — bu thead + CSS. Saralash kutubxonalari esa faqat tbody ni qayta tartiblaydi.
• Excel'dan ko'chirish. Birlashgan kataklar (Merge cells) bor Excel jadvalini HTML'ga o'tkazsangiz, ular aynan colspan va rowspan ga aylanadi. Katak xaritasi usuli bunday jadvallarni tekshirishda juda asqotadi.
• Intervyuda "thead, tbody, tfoot nima uchun kerak?" savoliga faqat "ko'rinish uchun" deyish zaif. Kuchli javob: ma'no, chop etishda sarlavhaning takrorlanishi, CSS va JavaScript uchun aniq qismlar.

Xulosa

• Jadval qismlari: thead (sarlavha), tbody (ma'lumot, bir nechta bo'lishi mumkin), tfoot (xulosa); tartib — caption, colgroup, thead, tbody, tfoot.
• colspan — katak bir nechta ustunni, rowspan — bir nechta qatorni egallaydi.
• rowspan dan keyingi qatorlarda kataklar kamroq yoziladi — joy band.
• Har qatorda "o'z kataklari + yuqoridan tushganlar" ustunlar soniga teng bo'lsin; katak xaritasi xatodan saqlaydi.
• colgroup va col — ustunlarni tavsiflaydi: CSS va ustunlar guruhi uchun.
• Birlashtirish — faqat ma'no uchun, chiroy uchun emas.

Keyingi dars: Accessible va responsive jadvallar — scope ning barcha qiymatlari, headers, murakkab sarlavhalar va jadvalni telefonga moslash.

Manbalar

• MDN: "HTML table advanced features and accessibility", <thead>, <tfoot>, <col> — developer.mozilla.org
• WHATWG HTML: "Tabular data" va "Processing model" — html.spec.whatwg.org