HTML'da jadval va ro'yxatlarni qanday to'g'ri belgilash kerak?

Savol

Jadvalning to'g'ri semantik belgilanishi (thead, tbody, scopega ega th) qanday ko'rinadi va uchta ro'yxat turi — <ul>, <ol> va <dl> — bir-biridan nimasi bilan farq qiladi?

Qisqa javob

Jadval shapkani (<thead>) va tanani (<tbody>) ajratishi kerak, sarlavha katakchalari esa ular nimaga tegishli ekanligini (ustunga yoki qatorga) ko'rsatuvchi scope atributiga ega <th> tegi bo'lishi kerak — bu skrinriderlar uchun juda muhim. Ro'yxatlardan: <ul> — markerli (tartib muhim emas), <ol> — raqamlangan (tartib muhim), <dl> — ta'riflar ro'yxati (<dt>/<dd> orqali termin/tavsif juftliklari).

Batafsil javob

Jadvallar:

• <table> — konteyner. <caption> (birinchi bola element) — jadvalning izohi/nomi, u ham vizual, ham accessibility uchun foydali.
• <thead> — ustun sarlavhalarining qatori (qatorlari).
• <tbody> — asosiy ma'lumotlar; mantiqiy guruhlash uchun bir nechta <tbody> bo'lishi mumkin.
• <tfoot> — yakuniy qator (summalar, jami natijalar).
• Sarlavha katakchalari uchun <td> o'rniga <th> — bu shunchaki qalin matn emas, semantik marker: skrinrider ma'lumot katakchalari bo'ylab harakatlanayotganda mos sarlavhani e'lon qiladi.
• scope="col" — <th> butun ustunning sarlavhasi; scope="row" — butun qatorning sarlavhasi. scope bo'lmasa, skrinrider murakkab jadvallarda ma'lumot katakchasini kerakli sarlavha bilan bir ma'noda bog'lay olmaydi.
• Birlashtirilgan katakchalari bo'lgan murakkab jadvallar uchun aniq bog'lash uchun scope o'rniga id/headers ishlatiladi.

Ro'yxatlar:

• <ul> (unordered list) — markerli ro'yxat, elementlar tartibi ma'no tashimaganda (xususiyatlar, teglar, menyu havolalari ro'yxati).
• <ol> (ordered list) — raqamlangan ro'yxat, tartib muhim bo'lganda (yo'riqnoma qadamlari, reyting). start va reversed atributlarini qo'llab-quvvatlaydi.
• <dl> (description list) — "termin — tavsif" juftliklari ro'yxati: <dt> (term) va <dd> (description). Glossariylar, FAQ, metama'lumotlar (masalan, mahsulot xususiyatlari) uchun mos.
• Ro'yxatlarni ko'p darajali tuzilma (masalan, navigatsiya daraxti) uchun bir-birining ichiga joylashtirish mumkin (<li> ichida <ul>).
• <ul>/<ol>ning yagona to'g'ri bevosita bolalari — <li>; <ul> ichida bevosita matn noto'g'ri.

Misol

<table>
  <caption>Tarif narxlari</caption>
  <thead>
    <tr>
      <th scope="col">Tarif</th>
      <th scope="col">Narx</th>
      <th scope="col">So'rovlar limiti</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Basic</th>
      <td>0 $</td>
      <td>1 000</td>
    </tr>
    <tr>
      <th scope="row">Pro</th>
      <td>19 $</td>
      <td>50 000</td>
    </tr>
  </tbody>
</table>

<!-- markerli ro'yxat -->
<ul>
  <li>Tez boshlash</li>
  <li>TypeScript qo'llab-quvvatlash</li>
</ul>

<!-- raqamlangan ro'yxat -->
<ol>
  <li>Bog'liqliklarni o'rnating</li>
  <li>Konfigni sozlang</li>
  <li>Dev-serverni ishga tushiring</li>
</ol>

<!-- ta'riflar ro'yxati -->
<dl>
  <dt>SSR</dt>
  <dd>Sahifani mijozga yuborishdan oldin serverda rendering qilish.</dd>
  <dt>SSG</dt>
  <dd>Build vaqtida statik sahifalarni generatsiya qilish.</dd>
</dl>

Qo'shimcha savollar

• Murakkab jadvallar uchun scope bilan id/headers bog'lanishi o'rtasida qanday farq bor?
• <li> ichida ikkita <span>ga ega oddiy <ul> o'rniga qachon <dl> ishlatgan ma'qul?
• Jadvallar semantikani yo'qotmasdan mobil ekranlarga qanday moslashtiriladi?