# HTML jadvallar (table, tr, td)

> HTML jadvalini table, caption, thead, tbody, tr, th va td bilan semantik tuzing; scope, colspan va accessibility qoidalarini jonli misolda o'rganing.

Manba: https://learncode.uz/html-css/jadvallar/
Sana: 2026-05-18

Narxlar taqqoslanishi, dars jadvali yoki statistik hisobotda ma'lumotning
qator va ustunlari o'zaro bog'langan bo'ladi. Bunday **jadval ma'lumoti**
HTML'da `<table>` bilan belgilanadi. Jadvalni to'g'ri tuzish nafaqat ko'rinish,
balki kataklar orasidagi munosabatni tushunish uchun ham muhim.

Bu dars yakunida siz jadval qatori, sarlavha va ma'lumot katagini tuzasiz;
`caption`, `thead`, `tbody` va `scope` vazifasini bilasiz; bir nechta katakni
birlashtirasiz va jadvalni qachon ishlatmaslik kerakligini tushunasiz.

## Jadvalning asosiy tuzilishi

`<table>` butun jadvalni, `<tr>` bitta qatorni, `<th>` sarlavha katagini,
`<td>` esa oddiy ma'lumot katagini bildiradi:

```html
<table>
  <tr>
    <th>Mahsulot</th>
    <th>Narx</th>
  </tr>
  <tr>
    <td>Olma</td>
    <td>8 000 so'm</td>
  </tr>
</table>
```

HTML ustun uchun alohida teg talab qilmaydi. Ustunlar har qatordagi
kataklarning bir xil tartibidan hosil bo'ladi. Shu sababli oddiy jadvalning
har qatorida mos miqdordagi katak bo'lishi kerak.

## Jadval qismlarini nomlash

Kattaroq jadvalni mantiqiy qismlarga ajrating:

- `<caption>` — jadvalning ko'rinadigan nomi yoki qisqa tavsifi;
- `<thead>` — ustun sarlavhalari joylashgan qism;
- `<tbody>` — asosiy ma'lumot qatorlari;
- `<tfoot>` — jami yoki yakuniy qatorlar uchun ixtiyoriy qism.

```html
<table>
  <caption>Avgust oyidagi kurslar</caption>
  <thead>
    <tr>
      <th scope="col">Kurs</th>
      <th scope="col">Darslar</th>
      <th scope="col">Holat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML va CSS</td>
      <td>20</td>
      <td>Ochiq</td>
    </tr>
  </tbody>
</table>
```

Bu elementlar majburiy emas, ammo kodni o'qish, CSS bilan bezash va yordamchi
texnologiyalar jadvalni tushunishi uchun juda foydali.

> **scope nimani bildiradi?**
>
> `scope="col"` sarlavha butun ustunga, `scope="row"` esa butun qatorga tegishli
> ekanini bildiradi. Ekran o'quvchi ma'lumot katagini o'qiganda unga tegishli
> sarlavhani ham ayta oladi.

## Jonli jadval natijasi

Previewdagi CSS faqat chegara va bo'shliqlarni ko'rinarli qiladi; jadvalning
ma'noli tuzilishi HTML'da saqlanadi.

```html
<table>
  <caption>Frontend kurslari</caption>
  <thead>
    <tr>
      <th scope="col">Kurs</th>
      <th scope="col">Dars soni</th>
      <th scope="col">Daraja</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML va CSS</th>
      <td>20</td>
      <td>Boshlang'ich</td>
    </tr>
    <tr>
      <th scope="row">JavaScript</th>
      <td>32</td>
      <td>O'rta</td>
    </tr>
  </tbody>
</table>
```

```css
table {
  width: 100%;
  border-collapse: collapse;
}
caption {
  margin-bottom: 10px;
  font-weight: 700;
}
th, td {
  padding: 10px;
  border: 1px solid #cbd5e1;
  text-align: left;
}
thead {
  background: #eef2ff;
}
```

## Kataklarni birlashtirish

`colspan` katakni bir nechta ustun, `rowspan` esa bir nechta qator bo'ylab
yoyadi:

```html
<tr>
  <th colspan="2">Bog'lanish ma'lumotlari</th>
</tr>
<tr>
  <td>Email</td>
  <td>salom@example.com</td>
</tr>
```

Birlashtirishdan keyin qatorlardagi umumiy ustunlar soni mos kelishi kerak.
Murakkab `rowspan` va `colspan` jadvallarni ekran o'quvchi bilan tushunish
qiyinlashishi mumkin, shuning uchun tuzilmani imkon qadar sodda saqlang.

## Jadval va layout boshqa narsalar

`<table>` faqat qator va ustun munosabatiga ega ma'lumot uchun ishlatiladi.
Sahifaning menyu, yon panel va asosiy kontentini joylashtirish uchun jadval
ishlatmang. Bunday layout [Flexbox](https://learncode.uz/html-css/flexbox) yoki
[Grid](https://learncode.uz/html-css/grid) bilan quriladi.

> **Faqat tashqi ko'rinishga aldanmang**
>
> Ikki element yonma-yon ko'rinishi uni jadval qilmaydi. Ustun sarlavhasini
> ma'lumot kataklari bilan mantiqan bog'lay olsangiz, jadval mos bo'lishi mumkin.
> Aks holda semantik HTML va CSS layout tanlang.

## Amaliy mashq

Uch kunlik dars jadvali yarating: `Kun`, `Mavzu`, `Davomiyligi` ustunlari,
`caption`, `thead`, `tbody` va tegishli `scope` atributlari bo'lsin. So'ng
bitta yakuniy qatorni `colspan` bilan birlashtiring.

## Qisqacha xulosa

- `<table>` jadvalni, `<tr>` qatorni yaratadi.
- `<th>` sarlavha, `<td>` ma'lumot katagidir.
- `caption`, `thead`, `tbody` va `tfoot` tuzilmani aniqlashtiradi.
- `scope` sarlavha va ma'lumot munosabatini accessible qiladi.
- `colspan` va `rowspan` kataklarni birlashtiradi.

Keyingi darsda [forma asoslari](https://learncode.uz/html-css/forma-asoslari) orqali
foydalanuvchidan ma'lumot olishni boshlaymiz.