Jadvallar - HTML va CSS | Softromeda Edu

Jadval - ikki o'lchamli ma'lumot uchun mo'ljallangan: narxlar ro'yxati, jadval, statistika, taqqoslash.

Eng oddiy jadval #

HTML

<table>
    <tr>
        <th>Til</th>
        <th>Yil</th>
        <th>Muallif</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>1991</td>
        <td>Guido van Rossum</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>1995</td>
        <td>Brendan Eich</td>
    </tr>
</table>

Teg	To'liq nomi	Vazifasi
`<table>`	table	Butun jadval
`<tr>`	table row	Qator
`<th>`	table header	Sarlavha katagi
`<td>`	table data	Oddiy katak

<th> va <td> farqi

<th> brauzerda qalin va markazlashgan ko'rinadi, lekin asosiysi bu emas. Ekran o'quvchilari <th> ni ustun nomi sifatida o'qiydi: "Til: Python, Yil: 1991". Bu jadvalni ko'zi ojiz foydalanuvchi uchun tushunarli qiladi.

To'liq tuzilma #

Katta jadvallar uchun uch qism ishlatiladi:

HTML

<table>
    <caption>Dasturlash tillari va ularning yaratilish yili</caption>

    <thead>
        <tr>
            <th>Til</th>
            <th>Yil</th>
            <th>Asosiy sohasi</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Python</td>
            <td>1991</td>
            <td>Sun'iy intellekt, tahlil</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>1995</td>
            <td>Veb dasturlash</td>
        </tr>
        <tr>
            <td>PHP</td>
            <td>1995</td>
            <td>Veb backend</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="3">Jami: 3 ta til</td>
        </tr>
    </tfoot>
</table>

thead sarlavha, tbody asosiy ma'lumot, tfoot yakuniy qator

Nima uchun <thead> va <tbody> kerak?

Chop etishda - uzun jadval bir necha varaqqa bo'linsa, <thead> har bir varaqda takrorlanadi.
CSS uchun - tbody tr:nth-child(even) bilan faqat ma'lumot qatorlarini bo'yash mumkin.
JavaScript uchun - saralash va filtrlashda faqat <tbody> bilan ishlanadi.
Semantika - qaysi qism nima ekani aniq.

Katakchalarni birlashtirish #

HTML

<table>
    <thead>
        <tr>
            <th rowspan="2">Talaba</th>
            <th colspan="3">Baholar</th>
        </tr>
        <tr>
            <th>Python</th>
            <th>HTML</th>
            <th>SQL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Husanboy</td>
            <td>85</td>
            <td>92</td>
            <td>78</td>
        </tr>
        <tr>
            <td>Sardor</td>
            <td>70</td>
            <td>65</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

colspan gorizontal, rowspan vertikal birlashtiradi

Birlashtirilgan katak sonini to'g'ri hisoblang

colspan="3" yozsangiz, o'sha qatorda uchta katak o'rniga bitta yozasiz. Adashsangiz jadval buzilib ketadi.

Tekshirish usuli: har bir qatordagi kataklar soni + birlashtirishlar = ustunlar soni.

Ustunlarni guruhlash #

<colgroup> butun ustunga uslub berish imkonini beradi:

HTML

<table>
    <colgroup>
        <col style="background: #f8fafc;">
        <col span="2" style="background: #eff6ff;">
    </colgroup>
    <thead>
        <tr><th>Mahsulot</th><th>Narx</th><th>Soni</th></tr>
    </thead>
    <tbody>
        <tr><td>Klaviatura</td><td>185 000</td><td>2</td></tr>
        <tr><td>Sichqoncha</td><td>95 000</td><td>5</td></tr>
    </tbody>
</table>

Kirish imkoniyati (accessibility) #

Murakkab jadvallarda scope va headers atributlari kerak:

HTML

<table>
    <caption>2026-yil savdo hisoboti</caption>
    <thead>
        <tr>
            <th scope="col">Oy</th>
            <th scope="col">Savdo</th>
            <th scope="col">Foyda</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Yanvar</th>
            <td>12 500 000</td>
            <td>2 100 000</td>
        </tr>
        <tr>
            <th scope="row">Fevral</th>
            <td>15 200 000</td>
            <td>2 800 000</td>
        </tr>
    </tbody>
</table>

`scope` qiymati	Ma'nosi
`col`	Bu katak butun ustun sarlavhasi
`row`	Bu katak butun qator sarlavhasi
`colgroup`	Bir nechta ustun sarlavhasi
`rowgroup`	Bir nechta qator sarlavhasi

<caption> ni unutmang

<caption> - jadvalning nomi. U <table> ning birinchi bolasi bo'lishi kerak. Ekran o'quvchisi jadvalga yetganda avval shu nomni o'qiydi va foydalanuvchi jadval nima haqda ekanini biladi.

Jadvalni CSS bilan bezash #

Brauzerning standart jadvali xunuk ko'rinadi. Minimal bezak:

CSS

table {
    width: 100%;
    border-collapse: collapse;     /* chegaralarni birlashtiradi */
    font-size: 0.95rem;
}

caption {
    caption-side: top;
    padding: 0.5rem;
    font-weight: bold;
    text-align: left;
}

th, td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

thead th {
    background: #f8fafc;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
}

tbody tr:hover {
    background: #f8fafc;
}

/* Raqamlarni o'ngga tekislash */
td.raqam {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

border-collapse: collapse

Standart holatda har bir katakning o'z chegarasi bo'ladi va ular ikki chiziq bo'lib ko'rinadi. collapse ularni bittaga birlashtiradi - jadval ancha toza ko'rinadi.

Mobil qurilmalar uchun #

Keng jadval telefon ekraniga sig'maydi. Yechim - gorizontal aylantirish:

HTML

<div class="jadval-orash">
    <table>
        <!-- ... -->
    </table>
</div>

CSS

.jadval-orash {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.jadval-orash table {
    min-width: 600px;      /* jadval siqilib ketmasin */
}

Ushbu darslikdagi barcha jadvallar aynan shunday o'ralgan - telefonda ko'ring va surib ko'ring.

Jadvalni qachon ishlatmaslik kerak? #

Jadval bilan sahifa tuzilmasini qurmang

1990-yillarda saytlar <table> bilan tuzilardi - CSS hali kuchsiz edi. Bugun bu jiddiy xato:

HTML

<!-- ESKI VA NOTO'G'RI -->
<table>
    <tr>
        <td>Menyu</td>
        <td>Asosiy mazmun</td>
    </tr>
</table>

Muammolari:

Ekran o'quvchisi buni ma'lumot jadvali deb o'qiydi
Telefonda moslashmaydi
Kod og'ir va o'qish qiyin
SEO uchun yomon

Tuzilma uchun Flexbox (13-bo'lim) yoki Grid (14-bo'lim) ishlating.

Jadval mos	Jadval mos emas
Narxlar ro'yxati	Sahifa tuzilmasi
Dars jadvali	Menyu
Statistika	Rasm galereyasi
Taqqoslash	Kartochkalar to'plami
Moliyaviy hisobot	Forma joylashuvi

To'liq amaliy misol #

HTML

<div class="jadval-orash">
    <table class="narxlar">
        <caption>Kompyuter aksessuarlari narxlari (2026-yil sentabr)</caption>

        <thead>
            <tr>
                <th scope="col">Mahsulot</th>
                <th scope="col">Brend</th>
                <th scope="col" class="raqam">Narx (so'm)</th>
                <th scope="col" class="raqam">Soni</th>
                <th scope="col" class="raqam">Jami</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th scope="row">Klaviatura</th>
                <td>Logitech</td>
                <td class="raqam">185&nbsp;000</td>
                <td class="raqam">2</td>
                <td class="raqam">370&nbsp;000</td>
            </tr>
            <tr>
                <th scope="row">Sichqoncha</th>
                <td>A4Tech</td>
                <td class="raqam">95&nbsp;000</td>
                <td class="raqam">5</td>
                <td class="raqam">475&nbsp;000</td>
            </tr>
            <tr>
                <th scope="row">Monitor</th>
                <td>Samsung</td>
                <td class="raqam">2&nbsp;450&nbsp;000</td>
                <td class="raqam">1</td>
                <td class="raqam">2&nbsp;450&nbsp;000</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <th scope="row" colspan="4">JAMI</th>
                <td class="raqam"><strong>3&nbsp;295&nbsp;000</strong></td>
            </tr>
        </tfoot>
    </table>
</div>

Amaliy topshiriq

O'zingizning haftalik dars jadvalingizni HTML jadval sifatida yozing. Birinchi ustun - vaqt, qolganlari - hafta kunlari.
Tushlik tanaffusini colspan bilan butun qatorga yoying.
Ketma-ket ikki para bo'ladigan fanni rowspan bilan birlashtiring.
<caption>, <thead>, <tbody> va scope atributlarini to'g'ri ishlating.
CSS bilan bezang: border-collapse, qator ustiga kelganda fon o'zgarishi.
overflow-x: auto bilan o'rang va telefon o'lchamida tekshiring.

Xulosa #

Jadval faqat ikki o'lchamli ma'lumot uchun; sahifa tuzilmasi uchun emas.
Tuzilma: <table> → <caption>, <thead>, <tbody>, <tfoot> → <tr> → <th>/<td>.
<th> sarlavha katagi; scope="col" yoki scope="row" bilan ma'nosini aniqlashtiring.
colspan gorizontal, rowspan vertikal birlashtiradi.
border-collapse: collapse jadvalni ancha toza ko'rsatadi.
Keng jadvalni overflow-x: auto bilan o'rab, mobil qurilmada aylantiriladigan qiling.

Keyingi bo'limda foydalanuvchidan ma'lumot oladigan formalarni o'rganamiz.

Eng oddiy jadval #

To'liq tuzilma #

Katakchalarni birlashtirish #

Ustunlarni guruhlash #

Kirish imkoniyati (accessibility) #

Jadvalni CSS bilan bezash #

Mobil qurilmalar uchun #

Jadvalni qachon ishlatmaslik kerak? #

To'liq amaliy misol #

Xulosa #

Xatolik topdingizmi?