CSS ro'yxat va jadval stili: list-style, counter() va border-collapse

Qisqacha: Ro'yxat belgisini list-style-type va ::marker boshqaradi; list-style: none belgini olib tashlaydi, lekin Safari nav dan tashqaridagi bunday ro'yxatni ekran o'quvchiga "ro'yxat" deb aytmaydi. CSS hisoblagichlari (counter-reset, counter-increment, counter()) istalgan elementni avtomatik raqamlaydi. Jadvalda border-collapse: collapse qo'shaloq chiziqlarni bittaga birlashtiradi, zebra esa tbody tr:nth-child(even) bilan chiziladi.

Bu darsda

• Ro'yxat belgisining turi, joyi va rangini o'zgartirasiz; list-style: none ning Safari tuzog'ini bilasiz.
• CSS hisoblagichlari bilan bo'limlarni va "1.2" kabi ichma-ich raqamlarni yozasiz.
• @counter-style bilan o'zbek alifbosidagi raqamlashni yaratasiz.
• «Bahor» narxlar jadvalini chiziqlar, zebra, sarlavha va tekis ustunlar bilan bezaysiz.
• col, caption-side, table-layout va vertical-align ning imkoniyati va chegarasini bilasiz.

Oldin bilishingiz kerak: Ro'yxatlar, Jadval qismlari, Pseudo-elementlar, Tuzilma pseudo-klasslari.

1. Nega bu kerak?

Jadval qismlari darsida «Bahor» menyusining narxlar jadvalini yozgan edik: caption, thead, ikkita tbody, har guruhning sarlavhasi. HTML to'g'ri. Lekin brauzerda u shunday ko'rinadi:

<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>

Nimaga qarang: chiziq yo'q, kataklar bir-biriga yopishgan, "Osh" va "Lag'mon" o'rtaga tekislangan. Ko'z qatorlar bo'ylab adashadi: "35 000 so'm" qaysi taomniki?

Ro'yxatlar darsida ham ikki narsani CSS'ga qoldirgan edik: raqam ko'rinishi va menyu nuqtalarini yashirish. Bu dars — jadval va ro'yxatlarning "ko'rinish qismi". Xuddi daftar chizig'iga o'xshaydi: yozuv o'sha, lekin chiziqli daftarda tartibli ko'rinadi.

2. Ro'yxat belgisi

2.1 list-style-type — belgining turi

list-style-type — li oldidagi belgi (marker) qanday bo'lishi:

Ro'yxatlar darsida ol ning type atributini ko'rgan edik va "ko'rinish odatda CSS ishi" degan edik. Farq shunda: type ma'no uchun (matnda "b) bandiga qarang" deyilsa, harf o'zgarmasin), CSS — bezak uchun.

<style>
  ul, ol {
    font-family: system-ui, sans-serif;
    margin: 0 0 0.5rem;
  }
  .kvadrat { list-style-type: square; }
  .rim { list-style-type: upper-roman; }
  .chiziq { list-style-type: "— "; }
  li::marker { color: #2f6b3a; }
</style>
<ul class="kvadrat"><li>Osh</li><li>Lag'mon</li></ul>
<ol class="rim"><li>Nonushta</li><li>Tushlik</li></ol>
<ul class="chiziq"><li>Ko'k choy</li><li>Qora choy</li></ul>

Nimaga qarang: birinchi ro'yxatda kvadratlar, ikkinchisida rim raqamlari, uchinchisida uzun chiziqcha. Hammasi yashil — ::marker (Pseudo-elementlar) belgining rangini o'zgartirdi, matn esa qora qoldi. ::marker Baseline emas, lekin Safari ham color ni qo'llaydi — rang hamma joyda ishlaydi. Satr qiymatidagi bo'sh joy ("— ") belgini matndan ajratadi.

.kvadrat, .rim, .chiziq — faqat shu namoyish uchun. «Bahor» fayllarida ro'yxatlar teg va joylashuv bilan tanlanadi.

2.2 list-style-position va list-style-image

list-style-position — belgi qayerda turadi:

• outside (boshlang'ich) — matn qutisidan tashqarida, chap bo'shliqda. Ikkinchi qator matn tagidan boshlanadi.
• inside — matn ichida, birinchi harf kabi. Ikkinchi qator belgi tagidan boshlanadi.

Brauzer ul va ol ga chapdan 40 piksel ichki bo'shliq beradi (padding-inline-start) — outside belgi aynan shu joyda turadi. Chrome'da DevTools → Computed'da tekshirdik. padding ni nolga tushirsangiz, outside belgi ekran chetidan chiqib ketadi.

list-style-image — belgi o'rniga rasm: url("belgi.svg"). Lekin uning o'lchami va joyini boshqarib bo'lmaydi. Shuning uchun hozir rasmli belgini ::marker yoki ::before bilan chizishadi.

list-style — uchalasining qisqa yozuvi: list-style: square inside.

2.3 list-style: none va Safari tuzog'i

Menyu, kartalar ro'yxati, "non yo'li" — bularda belgi kerak emas. Odatiy yechim:

nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

Ro'yxatlar darsida ogohlantirgan edik: Safari bunday ro'yxatni ba'zan "ro'yxat emas" deb hisoblaydi. Endi aniqroq. MDN yozadi: Safari list-style: none li ul va ol ni accessibility daraxtida ro'yxat deb tanimaydi — agar u nav ichida bo'lmasa. WebKit (Safari dvigateli) jamoasi buni xato emas, ataylab qilingan qaror deydi: ular ko'rinmas belgili ro'yxat ko'pincha "ro'yxat" emas, oddiy tartib uchun ishlatiladi deb hisoblaydi.

Natija: Malika Safari va VoiceOver bilan «Bahor»ning "Bugungi taomlar" ro'yxatiga kelsa, "ro'yxat, 4 ta band" ni eshitmaydi.

Tuzatish yo'llari:

1. nav ichidagi ro'yxat — hech narsa qilish shart emas. Menyu va "non yo'li" xavfsiz.
2. Boshqa joyda — ul ga role="list". Rol — ARIA asoslari darsidan: elementning ekran o'quvchi uchun "kimligi".
3. ARIA qo'shib bo'lmasa — MDN'ning CSS yo'li: li::before ga bo'sh bo'lmagan content (masalan "— "). Bo'sh content: "" hisobga olinmaydi.

role="list" bilan bitta muammo bor. ul ning o'zi allaqachon ro'yxat, shuning uchun html-validate uni ortiqcha deydi. Tekshirdik (html-validate 11):

error  Redundant role "list" on <ul>  no-redundant-role

Tarjimasi: "<ul> da ortiqcha list roli". Validator Safari'ning bu xulqini bilmaydi. Qoidani aynan shu joyda, sababini yozib o'chirasiz:

<!-- [html-validate-disable-next no-redundant-role -- Safari] -->
<ul role="list">
  <li>Osh</li>
  <li>Lag'mon</li>
</ul>

-- dan keyingi matn — izoh: kodni o'qigan odam bu istisno nega kerakligini tushunadi. Tekshirdik: bu qator bilan html-validate xato bermaydi.

Maslahat: role="list" ni hamma ro'yxatga yozib chiqmang. Faqat belgisi olib tashlangan va nav dan tashqaridagi ro'yxatga. Belgi ko'rinib turgan ro'yxatda muammo yo'q.

2.4 Ta'rif ro'yxati: dl > div

Ro'yxatlar darsida dt va dd juftligini div ga o'rashga ruxsat borligini ko'rgan edik — "CSS bilan bezash uchun". Mana nega:

<style>
  dl {
    font-family: system-ui, sans-serif;
    max-width: 20rem;
  }
  dl > div {
    padding: 0.5rem 0;
    border-bottom: 1px solid #c9d6cf;
  }
  dt { font-weight: 700; color: #2f6b3a; }
  dd { margin-left: 0; }
</style>
<dl>
  <div>
    <dt>Narxi</dt>
    <dd>35 000 so'm</dd>
  </div>
  <div>
    <dt>Tayyorlanish vaqti</dt>
    <dd>2 soat</dd>
  </div>
</dl>

Nimaga qarang: har juftlik ostida chiziq — div ularni bitta "quti" qildi. dd ning brauzer beradigan 40 piksellik chap chekinishi olib tashlandi. div siz har juftlikni alohida chiziq bilan ajratib bo'lmasdi.

Tekshirib ko'ring: «Bahor» bosh sahifasidagi "Bugungi taomlar" ul ro'yxatiga list-style: none berdingiz. U main ichida. Safari'da nima bo'ladi va nima qilasiz?

3. CSS hisoblagichlar

3.1 counter-reset, counter-increment, counter()

ol raqamlarni o'zi qo'yadi. Lekin raqam li dan boshqa joyda kerak bo'lsa-chi? Masalan, «Bahor»ning "Choyxona qoidalari" sahifasida har h2 "1-qoida", "2-qoida" bo'lib raqamlansin. Yangi qoida qo'shilsa, raqamlar o'zi surilsin.

CSS hisoblagich (counter) — CSS ichidagi sanoq. Xuddi navbat raqami beruvchi apparat: kim kirsa, raqam bittaga oshadi. Uch qadam:

1. counter-reset: qoida — "qoida" nomli hisoblagichni nolga qo'y.
2. counter-increment: qoida — har shu elementda bittaga oshir.
3. content: counter(qoida) — qiymatni ::before yoki ::after da ko'rsat.

<style>
  main {
    font-family: system-ui, sans-serif;
    counter-reset: qoida;
  }
  h2 {
    font-size: 1.125rem;
    margin: 0.75rem 0 0.25rem;
    counter-increment: qoida;
  }
  h2::before {
    content: counter(qoida) "-qoida. ";
    color: #b4461a;
  }
  p { margin: 0; }
</style>
<main>
  <h2>Stolni oldindan band qiling</h2>
  <p>Juma va shanba kunlari joy tez tugaydi.</p>
  <h2>Bron 30 daqiqa saqlanadi</h2>
  <p>Kechiksangiz, qo'ng'iroq qiling.</p>
  <h2>Chekish faqat hovlida</h2>
  <p>Ichkarida chekilmaydi.</p>
</main>

Nimaga qarang: sarlavhalar oldida qizg'ish "1-qoida.", "2-qoida.", "3-qoida." — HTML'da raqam yo'q. content da hisoblagich va matn ketma-ket yozildi. O'rtadagi qoidani o'chirsangiz, raqamlar o'zi qayta tartiblanadi.

Nomni o'zingiz tanlaysiz — qoida, bolim, qadam. Bitta elementda bir necha hisoblagich bo'lishi mumkin: counter-reset: bolim qadam.

3.2 counters() — ichma-ich raqam

Shartnoma va qoidalarda "1.2" kabi raqam kerak: birinchi bo'limning ikkinchi bandi. counters() — ichma-ich ro'yxatlardagi hamma darajani ajratgich bilan birlashtiradi:

<style>
  ol {
    font-family: system-ui, sans-serif;
    counter-reset: band;
    list-style: none;
    padding-left: 1.25rem;
  }
  li { counter-increment: band; }
  li::before {
    content: counters(band, ".") ". ";
    color: #2f6b3a;
    font-weight: 700;
  }
</style>
<ol>
  <li>Ish vaqti
    <ol>
      <li>Har kuni 7:00 dan 23:00 gacha</li>
      <li>Juma kuni to'y oshi 11:00 da</li>
    </ol>
  </li>
  <li>Bron
    <ol>
      <li>Telefon yoki sayt orqali</li>
    </ol>
  </li>
</ol>

Nimaga qarang: tashqi bandlar "1.", "2.", ichkilari "1.1.", "1.2.", "2.1.". Sirni counter-reset ochadi: har ol hisoblagichning yangi nusxasini yaratadi. counters(band, ".") tashqaridan ichkariga hamma nusxani nuqta bilan qo'shadi. Bitta nusxa kerak bo'lsa — counter(), hammasi kerak bo'lsa — counters().

flowchart TD
  A["Tashqi ol — band nusxasi 1"] --> B["Tashqi li: 1 → 1."]
  B --> C["Ichki ol — band nusxasi 2"]
  C --> D["Ichki li: 1 va 1 → 1.1."]
  C --> E["Ichki li: 1 va 2 → 1.2."]

Nimaga qarang: ichki li o'z nusxasini (1 yoki 2) tashqi nusxa (1) bilan birlashtirdi — shunday qilib "1.2." chiqdi.

Bu yerda list-style: none bor, lekin raqam ::before da matn bo'lib turibdi. «Safari tuzog'i» bo'limidagi MDN yo'li shu: bo'sh bo'lmagan content Safari'da ro'yxat ma'nosini qaytaradi.

3.3 Qo'shimcha imkoniyatlar

• Uslub: counter(qoida, upper-roman) — ikkinchi argument list-style-type qiymati: "I-qoida", "II-qoida".
• Qadam: counter-increment: qoida 10 — o'ntadan oshiradi. Manfiy son kamaytiradi.
• counter-set: qoida 5 — hisoblagichni aynan 5 ga qo'yadi, yangi nusxa yaratmaydi. Ro'yxatning o'rtasidan raqamni "sakratish" uchun.
• list-item — brauzerning o'z hisoblagichi, har li da ishlaydi. ol ning start va reversed atributlarini ham hisobga oladi. Raqam ko'rinishini o'zgartirish uchun uni qayta yaratish shart emas: li::marker { content: counter(list-item) ") "; } — "1)", "2)".

Diqqat: ::before dagi raqam — matn, uni ekran o'quvchi o'qiydi (Pseudo-elementlar). Bu yaxshi: "1-qoida" ma'lumot. Lekin raqam ma'no tashisa (hujjatda "2.1-bandga qarang" deyilsa), uni HTML'da yozing — CSS o'chsa ham qolsin.

Tekshirib ko'ring: "Choyxona qoidalari" misolidagi main dan counter-reset: qoida qatorini o'chirsangiz nima bo'ladi?

4. @counter-style — o'z raqamlash tizimingiz

lower-alpha ingliz alifbosi bilan sanaydi: a, b, c, d. O'zbek hujjatlarida esa bandlar o'zbek alifbosi tartibida: a, b, d, e... @counter-style — yangi list-style-type yaratadigan @-qoida:

<style>
  @counter-style ozbek-lotin {
    system: alphabetic;
    symbols: a b d e f g h i j k l m n o p q r s t u v x y z
      "o'" "g'" sh ch ng;
    suffix: ") ";
  }
  ol {
    font-family: system-ui, sans-serif;
    list-style: ozbek-lotin;
  }
</style>
<ol>
  <li>Ism va familiya</li>
  <li>Telefon raqami</li>
  <li>Kelish sanasi</li>
</ol>
<ol start="25">
  <li>Oxirgi harflar</li>
  <li>tartibi</li>
  <li>shunday</li>
  <li>davom etadi</li>
  <li>va qaytadan</li>
  <li>boshlanadi</li>
</ol>

Nimaga qarang: birinchi ro'yxat "a)", "b)", "d)" — "c" yo'q. Ikkinchisi 25-banddan boshlanadi: "o')", "g')", "sh)", "ch)", "ng)", keyin "aa)". Chrome'da tekshirdik.

@counter-style ichidagi sozlamalar deskriptor (descriptor) deyiladi — oddiy qoidadagi xususiyatlar kabi. Uchta asosiysi:

• system — sanash usuli. alphabetic — harflar tugasa, ikki harfli bo'ladi (aa, ab). cyclic — belgilar aylanib takrorlanadi. numeric — o'z raqamlari bilan o'nlik tizim. extends decimal — tayyor uslubni olib, faqat bir qismini o'zgartirish.
• symbols — belgilar. Apostrofli harflar qo'shtirnoqda: "o'".
• suffix — belgidan keyingi matn (boshlang'ichi ". "), prefix — oldingisi.

Qisqaroq misol — extends bilan faqat qo'shimchani almashtirish:

@counter-style qavsli {
  system: extends decimal;
  suffix: ") ";
}

Baseline: Baseline ma'lumotiga ko'ra, @counter-style @-qoidasining o'zi 2023-yil sentabrdan beri to'rt asosiy brauzerda bor. Lekin u to'liq Baseline hisoblanmaydi — sababi symbols deskriptori. MDN ma'lumotida u Chrome va Firefox'da "qisman": belgi sifatida rasm (url()) ishlamaydi. Matnli belgilar — bizning harflar kabi — hamma asosiy brauzerda ishlaydi. speak-as deskriptori (ekran o'quvchi belgini qanday o'qishi) esa Safari'da yo'q. Tushunmagan brauzer list-style dagi nomni tashlab ketadi va oddiy raqamlarni ko'rsatadi.

5. Jadvallar stili

5.1 border-collapse — chiziqlar birlashadimi

Jadval kataklariga chiziq beramiz. Brauzerning boshlang'ich qiymati border-collapse: separate — har katak o'z chizig'i bilan, kataklar orasida 2 piksel (border-spacing). Natija — qo'shaloq chiziqlar:

<style>
  table {
    font-family: system-ui, sans-serif;
    margin-bottom: 1rem;
  }
  th, td {
    padding: 0.25rem 0.5rem;
    border: 1px solid #2f6b3a;
  }
  .bir { border-collapse: collapse; }
</style>
<table>
  <tr><th scope="row">Osh</th><td>35 000 so'm</td></tr>
  <tr><th scope="row">Manti</th><td>30 000 so'm</td></tr>
</table>
<table class="bir">
  <tr><th scope="row">Osh</th><td>35 000 so'm</td></tr>
  <tr><th scope="row">Manti</th><td>30 000 so'm</td></tr>
</table>

Nimaga qarang: birinchi jadvalda har katak alohida ramkada, orasida oq tirqish — "katak ichida katak". Ikkinchisida (collapse) qo'shni chiziqlar bittaga qo'shildi.

• separate + border-spacing: 0.5rem — kataklar alohida "kartochka" bo'lsin desangiz. Bu rejimda tr ga chiziq berib bo'lmaydi.
• collapse — deyarli har doim kerak bo'ladigan qiymat. Asosiy selektorlar darsida tr + tr chizig'i uchun aynan shuni yozgan edik: collapse rejimida tr ham chiziq oladi.

5.2 Chiziqlar "janjali": hidden va none

collapse rejimida ikki katakning umumiy chegarasi bitta. Ikkalasi turli chiziq so'rasa, qaysi biri yutadi? Qoida (qisqasi): hidden har doim yutadi va chiziqni o'chiradi; none har doim yutqazadi; qolganlardan qalinrog'i yutadi. Chegara va soyalar darsida "none va hidden farqi jadvalda" degan edik — mana:

td:first-child {
  border-right: hidden; /* qo'shnining chap chizig'i ham o'chadi */
}

Chrome'da tekshirdik: hidden bilan ikki katak orasidagi chiziq butunlay yo'qoldi, garchi qo'shni katakda border-left bo'lsa ham. none bilan qo'shnining chizig'i qoldi.

5.3 Kataklar, sarlavha va caption

• padding — brauzer katakka atigi 1 piksel beradi. 0.5rem 0.75rem — ko'zga qulay.
• th tekislash — brauzer th ni qalin va o'rtaga qo'yadi. Qator sarlavhalari (scope="row") chapda o'qiladi: text-align: start. Raqamli ustunning sarlavhasi esa raqamlar bilan birga o'ngda. Jadval asoslari darsidagi qoida: sarlavha — th, qalinlik — CSS.
• Raqamlar — o'ngga tekislanadi (text-align: end) va Variable shriftlar darsidagi tabular-nums bilan: minglar minglar ostida.
• caption-side — jadval nomi qayerda: top (boshlang'ich) yoki bottom. Brauzer uni o'rtaga qo'yadi — text-align: start bilan chapga.
• vertical-align — katak ichidagi matn balandlik bo'yicha qayerda: top, middle (boshlang'ich), bottom, baseline. Qator balandligi darsida aytgandik: blokda ishlamaydi, katakda — ishlaydi. Bir katakda ikki qatorli tavsif bo'lsa, qo'shni narxni top ga ko'tarish chiroyli.

5.4 Zebra va hover

Tuzilma pseudo-klasslari darsida zebra qoidasini qisqa ko'rgan edik: tbody tr:nth-child(even). Endi uni haqiqiy jadvalda qo'llaymiz. Ikki nozik joy:

• Hisob har tbody ichida qaytadan boshlanadi. «Bahor» jadvalida ikkita tbody bor — har biri o'z zebrasi bilan.
• Guruh sarlavhasi qatori (scope="rowgroup") ham tr — u birinchi bo'lib sanaladi. Unga alohida fon beramiz, u zebradan ajralib turadi.

Sichqoncha bilan qator ustiga kelinganda uni yoritish — tbody tr:hover. Telefonda hover yo'q, shuning uchun u faqat qo'shimcha.

5.5 table-layout: fixed

Boshlang'ich table-layout: auto da brauzer ustun enini mazmunga qarab hisoblaydi: avval hamma kataklarni o'qiydi, keyin enini tanlaydi. Uzun taom nomi ustunni kengaytiradi, katta jadvalda hisob sekin.

table-layout: fixed bilan brauzer ustunlar enini birinchi qatordan (yoki col dan) oladi va mazmunga qaramaydi:

table {
  table-layout: fixed;
  width: 100%;
}
thead th:first-child {
  width: 40%;
}

• Jadvalga width shart — usiz fixed ishlamaydi.
• Ustunlar eni oldindan ma'lum: katta jadval tezroq chiziladi, yangi qator kelganda ustunlar "sakramaydi".
• Katakka sig'magan matn o'raladi. Uzun URL bo'lsa — Matnni o'rash darsidagi overflow-wrap: anywhere.

5.6 col — ustunga faqat to'rt narsa

Jadval qismlari darsida colgroup va col ni yozgan edik va "ularga faqat fon, ramka, kenglik va visibility ishlaydi" degan edik. Aniqrog'i: background, border (faqat collapse rejimida), width va visibility: collapse. Rang, shrift, tekislash — yo'q: kataklar col ning bolasi emas, ular tr ning bolasi. Ular col dan hech narsa meros olmaydi.

col[span] {
  background-color: #fffaf0;
}

O'sha darsdagi jadvalda raqamli ustunlar span="3" li col da edi — Atribut selektorlari bilan uni class'siz topdik. Lekin ehtiyot bo'ling: fonlar qatlam-qatlam chiziladi — jadval, ustun guruhi, ustun, qator guruhi, qator, katak. Zebra qatorining foni ustun fonining ustidan tushadi va uni yopadi.

5.7 «Bahor» narxlar jadvali — hammasi birga

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-matn: #1f2a24;
  }
  .jadval-orami {
    overflow-x: auto;
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
  }
  table {
    border-collapse: collapse;
    width: 100%;
    min-width: 22rem;
  }
  caption {
    caption-side: top;
    text-align: start;
    font-weight: 700;
    padding-bottom: 0.5rem;
  }
  th, td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #c9d6cf;
    text-align: start;
  }
  thead th {
    border-bottom: 2px solid var(--rang-asosiy);
  }
  thead th + th,
  td {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  th[scope="rowgroup"] {
    color: var(--rang-urgu);
    background-color: #fffaf0;
  }
  tbody tr:nth-child(even) {
    background-color: #eef4ef;
  }
  tbody tr:hover {
    background-color: #e0ece3;
  }
</style>
<div class="jadval-orami" role="region"
     aria-label="Menyu narxlari" tabindex="0">
  <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>
      <tr><th scope="row">Manti</th>
        <td>17 000 so'm</td><td>30 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>
</div>

Nimaga qarang:

• Chiziqlar faqat gorizontal va ingichka — ko'z qator bo'ylab yuradi. Sarlavha ostida qalinroq yashil chiziq.
• Taom nomlari chapda, narxlar va ularning sarlavhalari o'ngda. Raqamlar bir-birining ostida — tabular-nums.
• "Issiq taomlar" va "Salatlar" qizg'ish, qaymoq fonda. "Osh", "Manti" va "Achchiq-chuchuk" — och yashil, "Lag'mon" — oq. Har tbody da hisob qaytadan boshlandi, guruh sarlavhasi esa birinchi (toq) bo'lib sanaldi — shuning uchun har guruhning birinchi taomi juft.
• Telefon tugmasini bosing: 360 pikselda jadval min-width: 22rem dan torroq joyga tushdi va .jadval-orami ichida suriladi, sahifa esa joyida (Overflow).
• td dagi white-space: nowrap — "35 000 so'm" ikkiga bo'linmaydi (Matnni o'rash).

aria-label — o'ram nomi. Accessible va responsive jadvallar darsida uni aria-labelledby va caption ning id si bilan bog'lagan edik. Bu yerda qisqalik uchun nom to'g'ridan-to'g'ri yozildi.

5.8 Tor ekranda: jadval kartochkaga aylansinmi?

Accessible jadvallar darsida "CSS bilan telefonda har qatorni alohida blok qilib ko'rsatish mumkin" degan edik. G'oya: table, tr, td ga display: block — har qator kartochka bo'lib, ustma-ust tushadi.

Ehtiyot bo'ling. MDN ogohlantiradi: ba'zi brauzerlarda table ning display ini o'zgartirish uning accessibility daraxtidagi ko'rinishini buzadi — ekran o'quvchi uni jadval deb o'qimay qo'yadi. Chrome'da tekshirdik: Chrome 154 da display: block li jadval hali ham jadval sifatida uzatildi. Lekin boshqa brauzerlarda bunga kafolat yo'q. Bu naqshni ekran eniga qarab yoqish uchun media query kerak — uni Media queries darsida o'rganamiz va o'sha yerda xavfsiz variantini ko'ramiz. Hozircha eng ishonchli yo'l — .jadval-orami bilan skroll.

Tekshirib ko'ring: col ga text-align: end berdingiz, lekin narxlar o'ngga o'tmadi. Nega?

6. Ko'p uchraydigan xatolar

6.1 list-style: none, lekin chapda bo'shliq qoldi

Belgi yo'qoldi, matn esa baribir 40 piksel ichkaridan boshlanadi. Sabab — brauzerning padding-inline-start: 40px i. Tuzatish: padding-left: 0 (va kerak bo'lsa margin: 0).

6.2 list-style: none va Safari

Belgisiz ro'yxat nav dan tashqarida — Safari'da ekran o'quvchi uni ro'yxat deb aytmaydi. Tuzatish: role="list" + html-validate izohi, yoki bo'sh bo'lmagan ::before.

6.3 Jadvalda qo'shaloq chiziqlar

Kataklarga border berildi, border-collapse esa unutildi — har katak alohida ramkada, orasida tirqish. Tuzatish: table { border-collapse: collapse; }.

6.4 tr ga chiziq chizilmadi

tr { border-bottom: ... } — hech narsa bo'lmadi. separate rejimida qator chegara olmaydi. Tuzatish: border-collapse: collapse yoki chiziqni kataklarga bering.

6.5 table-layout: fixed ishlamayapti

Jadvalda width yo'q — brauzer auto ga qaytdi. Tuzatish: width: 100% (yoki aniq en).

6.6 Hisoblagich 1 dan boshlanmadi

Ikkinchi bo'limdagi bandlar "4" dan boshlandi — counter-reset faqat main da yozilgan, har bo'lim uchun emas. Yoki aksincha: counter-reset umuman yo'q va raqamlar kutilmagan joyda 1 ga qaytdi (hisoblagichlar bo'limidagi savol). Tuzatish: hisoblagichni aynan qayerdan sanash kerak bo'lsa, o'sha o'ramda (main, section, ol) nolga qo'ying.

7. Mashqlar

1-mashq (oson): Ish tartibi ro'yxati

«Bahor»ning "Oshpaz taxtasi"da tayyorlash qadamlari ol da. Raqamlar yashil (#2f6b3a) va qalin bo'lsin, raqamdan keyin nuqta emas, qavs: "1)", "2)". HTML'ni o'zgartirmang.

Ishora: «Qo'shimcha imkoniyatlar» dagi list-item hisoblagichi va ::marker ning content i. Yoki @counter-style bo'limidagi extends.

ol li::marker {
  content: counter(list-item) ") ";
  color: #2f6b3a;
  font-weight: 700;
}

@counter-style qavsli {
  system: extends decimal;
  suffix: ") ";
}
ol {
  list-style: qavsli;
}
ol li::marker {
  color: #2f6b3a;
  font-weight: 700;
}

2-mashq (o'rta): Ichimliklar narxlari

«Bahor» menyusiga kichik jadval qo'shildi — "Ichimliklar narxlari": thead da "Ichimlik" va "Narxi", tbody da qatorlar. Uni bezang:

1. Chiziqlar birlashsin, faqat qatorlar orasida ingichka chiziq (#c9d6cf).
2. Kataklarda 0.5rem 0.75rem bo'shliq, qator sarlavhalari chapda.
3. Narxlar o'ngda, raqamlar bir-birining ostida.
4. Jadval nomi pastda va chapda.

Ishora: «border-collapse» va «Kataklar, sarlavha va caption» bo'limlari.

<style>
  table {
    font-family: system-ui, sans-serif;
    border-collapse: collapse;
  }
  caption {
    caption-side: bottom;
    text-align: start;
    padding-top: 0.5rem;
    color: #5b6660;
  }
  th, td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #c9d6cf;
  }
  th { text-align: start; }
  td {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
</style>
<table>
  <caption>Ichimliklar narxlari</caption>
  <thead>
    <tr>
      <th scope="col">Ichimlik</th>
      <th scope="col">Narxi</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Ko'k choy</th><td>5 000 so'm</td></tr>
    <tr><th scope="row">Kompot</th><td>12 000 so'm</td></tr>
  </tbody>
</table>

3-mashq (qiyin): Choyxona qoidalari hujjati

«Bahor»ning "Choyxona qoidalari" sahifasi: har section da h2 va ichida ol. Kerakli ko'rinish:

• h2 lar: 1-bo'lim. Bron, 2-bo'lim. To'lov.
• Har bo'lim ichidagi bandlar: "1.1", "1.2", keyingi bo'limda "2.1" — bo'lim raqami bilan.
• Belgilar ::before da, ol ning o'z raqamlari yo'q.

<section>
  <h2>Bron</h2>
  <ol>
    <li>Stol 30 daqiqa saqlanadi.</li>
    <li>Bekor qilish — telefon orqali.</li>
  </ol>
</section>
<section>
  <h2>To'lov</h2>
  <ol>
    <li>Naqd, Click yoki Payme.</li>
  </ol>
</section>

Ishora: ikkita hisoblagich kerak — biri bo'limlar uchun (main da nolga), biri bandlar uchun (har ol da nolga). Band raqami ikkala hisoblagichdan yig'iladi: counter(bolim) "." counter(band). Nega bu yerda counters() emas, ikki counter()?

<style>
  main {
    font-family: system-ui, sans-serif;
    counter-reset: bolim;
  }
  section h2 {
    font-size: 1.125rem;
    counter-increment: bolim;
  }
  section h2::before {
    content: counter(bolim) "-bo'lim. ";
    color: #b4461a;
  }
  section ol {
    counter-reset: band;
    list-style: none;
    padding-left: 0;
  }
  section li { counter-increment: band; }
  section li::before {
    content: counter(bolim) "." counter(band) " ";
    color: #2f6b3a;
    font-weight: 700;
  }
</style>
<main>
  <section>
    <h2>Bron</h2>
    <ol>
      <li>Stol 30 daqiqa saqlanadi.</li>
      <li>Bekor qilish — telefon orqali.</li>
    </ol>
  </section>
  <section>
    <h2>To'lov</h2>
    <ol>
      <li>Naqd, Click yoki Payme.</li>
    </ol>
  </section>
</main>

4-mashq: Portfolio qadami — menyu, non yo'li va o'qish rejasi

Portfoliongizda uch joy CSS kutyapti: asosiy menyu (ul — nuqtalar bilan), loyiha sahifasidagi "non yo'li" (ol — raqamlar bilan) va "Men haqimda" sahifasidagi "O'qish rejam" jadvali.

1. Ikkala nav dagi ro'yxatlardan belgi va chap bo'shliqni olib tashlang.
2. Non yo'lining bandlari bir qatorda tursin, orasida / belgisi — ekran o'quvchi uni o'qimasin.
3. O'qish rejasi jadvali: chiziqlar birlashsin, qatorlar orasida ingichka chiziq, kataklarda bo'shliq, sarlavhalar chapda, caption chapda.
4. Safari tuzog'ini tekshiring: role="list" kerakmi?

Ishora: «Safari tuzog'i», «border-collapse» va «Kataklar, sarlavha va caption» bo'limlari. Bandlarni qatorga — display darsidagi inline. Ko'rinmas ajratgich — Pseudo-elementlar dagi content: "/" / "". Chiziq rangi — --rang-chegara.

nav ul,
nav ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

nav[aria-label="Non yo'li"] li {
  display: inline;
}

nav[aria-label="Non yo'li"] li + li::before {
  content: "/" / "";
  margin-inline: 0.5em;
  color: var(--rang-ikkinchi);
}

main table {
  border-collapse: collapse;
}

main caption {
  text-align: start;
  font-weight: bold;
  padding-bottom: 0.5rem;
}

main th,
main td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rang-chegara);
  text-align: start;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  a { color: #1f6f4a; }
  nav ol {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1rem;
  }
  nav[aria-label="Non yo'li"] li { display: inline; }
  nav[aria-label="Non yo'li"] li + li::before {
    content: "/" / "";
    margin-inline: 0.5em;
    color: #5b6660;
  }
  table { border-collapse: collapse; }
  caption {
    text-align: start;
    font-weight: bold;
    padding-bottom: 0.5rem;
  }
  th, td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #c9d6cf;
    text-align: start;
  }
</style>
<nav aria-label="Non yo'li">
  <ol>
    <li><a href="../../">Bosh sahifa</a></li>
    <li><a href="../">Loyihalar</a></li>
    <li><a href="./" aria-current="page">Choyxona «Bahor»</a></li>
  </ol>
</nav>
<table>
  <caption>2026-yilgi o'qish rejasi</caption>
  <thead>
    <tr>
      <th scope="col">Oy</th>
      <th scope="col">Mavzu</th>
      <th scope="col">Holat</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sentabr</th><td>HTML</td><td>Tugadi</td></tr>
    <tr><th scope="row">Oktabr</th><td>CSS</td><td>Boshlandi</td></tr>
  </tbody>
</table>

8. Real ishda

• Menyu va navigatsiya — deyarli har saytda nav ul { list-style: none; padding: 0; }. nav ichida bo'lgani uchun Safari muammosi yo'q. Kartalar ro'yxatida (main ichida) esa role="list" ni ko'p kompaniyalarning reset faylida ko'rasiz.
• Hujjatlar va shartnomalar — "1.2.3" raqamlash, counters(). Bank, sug'urta, davlat xizmatlari saytlarida uchraydi.
• Admin panel va hisobotlar — katta jadvallar: table-layout: fixed, zebra, tabular-nums, skroll o'rami.
• Email xatlar — hozir ham jadval asosida quriladi. border-collapse va kataklar padding i u yerda ko'p kerak bo'ladi (HTML email'larni stillash).
• Intervyuda so'raladi: "border-collapse nima qiladi?", "CSS'da avtomatik raqamlash qanday qilinadi?", "list-style: none accessibility'ga qanday ta'sir qiladi?".

Xulosa

• list-style-type belgi turini (satr ham bo'ladi), list-style-position joyini, ::marker rangini beradi; list-style: none dan keyin padding-left: 0.
• Safari nav dan tashqaridagi belgisiz ro'yxatni ro'yxat deb tanimaydi — role="list" (html-validate izohi bilan) yoki bo'sh bo'lmagan ::before.
• Hisoblagich: counter-reset → counter-increment → counter(); ichma-ich — counters(nom, "."); @counter-style — o'z tizimingiz (o'zbek alifbosi ham).
• Jadval: border-collapse: collapse, katakka padding, th va caption ni text-align: start bilan chapga, raqamlarni o'ngga va tabular-nums.
• Zebra — tbody tr:nth-child(even), har tbody da qaytadan; table-layout: fixed + width — oldindan ma'lum ustunlar.
• col ga faqat fon, chegara, kenglik, visibility; display: block bilan jadvalni "kartochka" qilish accessibility'ni buzishi mumkin.

Keyingi dars: Normal oqim, formatting context va float — CSS'siz ham elementlar qanday joylashadi va layout darslarining poydevori.

Manbalar

• MDN: "list-style" (Accessibility bo'limi), "list-style-type", "::marker", "Using CSS counters", "@counter-style", "border-collapse", "table-layout", "caption-side", "display" (Tables, Accessibility) — developer.mozilla.org
• WebKit bug 170179 — list-style: none va ro'yxat semantikasi (ataylab qilingan qaror) — bugs.webkit.org
• W3C: "CSS Lists and Counters Module Level 3", "CSS Counter Styles Level 3", "CSS 2.2 — Tables" (chegara konflikti) — w3.org/TR
• html-validate: "no-redundant-role" qoidasi va inline direktivalar — html-validate.org
• web-features (Baseline ma'lumotlari): "counter-style", "counter-set", "marker", "table" — github.com/web-platform-dx/web-features