3-modul · HTML tuzilishi

3.2-dars — Jadvallar: table, tr, td, th

HTML da jadval yaratishni o'rganamiz: qatorlar, katakchalar, sarlavhalar, katakchalarni birlashtirish. Darslar jadvali va narxlar ro'yxatini yaratamiz.

🔷

Jadval nima va u nima uchun kerak?

HTML dagi jadvallar qator va ustunlarga ega ma'lumotlarni ko'rsatadi: darslar jadvali, narxlar ro'yxati, o'yin natijalari, xodimlar ro'yxati. Ilgari saytlar maketini jadvallar yordamida yasashardi, lekin bugungi kunda buning uchun CSS bor (Flexbox, Grid). Biz jadvallardan faqat o'z vazifasi bo'yicha — jadval ma'lumotlari uchun foydalanamiz.

Excel dagi jadvalni tasavvur qiling: qatorlar (gorizontal) va ustunlar (vertikal). Ularning kesishgan joyida — katakcha turadi. HTML da qator — <tr> (table row), katakcha — <td> (table data).

🔷

1. table — jadval yaratamiz

Teg <table> — butun jadvalning konteyneri. Uning ichida qatorlar (<tr>), qatorlar ichida esa katakchalar (<td>) joylashadi. <table> siz jadval mavjud bo'lmaydi.

Mana eng oddiy 2x2 jadval:

HTML

<table>
  <tr>
    <td>1-katakcha</td>
    <td>2-katakcha</td>
  </tr>
  <tr>
    <td>3-katakcha</td>
    <td>4-katakcha</td>
  </tr>
</table>

🔷

2. tr — jadval qatori

Teg <tr> (table row) qator yaratadi. Nechta <tr> bo'lsa, shuncha qator bo'ladi. Qatorlar yuqoridan pastga qarab boradi: birinchi <tr> — birinchi qator, ikkinchisi — ikkinchi qator va hokazo.

HTML · Uchta qator

<table border="1">
  <tr>
    <td>1-qator</td>
    <td>2-ustun</td>
  </tr>
  <tr>
    <td>2-qator</td>
    <td>2-ustun</td>
  </tr>
  <tr>
    <td>3-qator</td>
    <td>2-ustun</td>
  </tr>
</table>

💡

Yodda tuting: tr = table row (qator). Bitta <tr> = bitta qator. border="1" atributi ko'rinadigan chegaralar qo'shadi.

🔷

3. td — jadval katakchasi

Teg <td> (table data) katakcha yaratadi. Ichiga istalgan HTML joylashtirish mumkin: matn, havola, rasm, ro'yxat yoki hatto boshqa jadval. Qatordagi <td> soni ustunlar sonini belgilaydi.

HTML · Katakchalardagi turli mazmun

<table border="1">
  <tr>
    <td>Oddiy matn</td>
    <td><strong>Qalin matn</strong></td>
    <td><a href="#">Havola</a></td>
  </tr>
  <tr>
    <td>42 (son)</td>
    <td><em>Kursiv</em></td>
    <td>💰 Emoji</td>
  </tr>
</table>

🔷

4. th — sarlavha katakchasi

Teg <th> (table header) — sarlavha katakchasi. Ichidagi matn qalin va markazga tekislangan bo'ladi. Brauzer va qidiruv tizimlari bu sarlavha ekanligini tushunadi.

HTML · Sarlavhali jadval

<table border="1">
  <tr>
    <th>Ism</th>
    <th>Yosh</th>
    <th>Shahar</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
    <td>Moskva</td>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>30</td>
    <td>Sankt-Peterburg</td>
  </tr>
  <tr>
    <td>Olga</td>
    <td>27</td>
    <td>Qozon</td>
  </tr>
</table>

<th> ni qator sarlavhalari uchun ham ishlatish mumkin. Masalan, birinchi ustun — dars vaqti:

HTML · Qator sarlavhalari

<table border="1">
  <tr>
    <th></th>
    <th>Dushanba</th>
    <th>Seshanba</th>
  </tr>
  <tr>
    <th>8:00 - 9:30</th>
    <td>Matematika</td>
    <td>Fizika</td>
  </tr>
  <tr>
    <th>9:45 - 11:15</th>
    <td>Ona tili</td>
    <td>Tarix</td>
  </tr>
</table>

💡

Farqi: <th> — sarlavha (qalin, markazda). <td> — oddiy katakcha. Sarlavhalar uchun <th> dan foydalaning — bu semantik jihatdan to'g'ri.

🔷

5. colspan — ustunlarni birlashtiramiz

colspan bitta katakchaga bir nechta ustunni egallash imkonini beradi. Masalan, jadval kengligi bo'ylab to'liq sarlavha. Qiymati — ustunlar soni: colspan="2" ikki ustunga, colspan="3" uch ustunga.

HTML · colspan

<table border="1">
  <tr>
    <th colspan="2">To'liq ism</th>
    <th>Yosh</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>Petrov</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Smirnova</td>
    <td>25</td>
  </tr>
</table>

Yana bir misol — butun kenglik bo'ylab markazlashtirilgan sarlavha:

HTML · 3 ustunga sarlavha

<table border="1">
  <tr>
    <th colspan="3">Mening sevimli kitoblarim</th>
  </tr>
  <tr>
    <th>Nomi</th>
    <th>Muallif</th>
    <th>Yil</th>
  </tr>
  <tr>
    <td>Master va Margarita</td>
    <td>M. Bulgakov</td>
    <td>1967</td>
  </tr>
  <tr>
    <td>Jinoyat va jazo</td>
    <td>F. Dostoyevskiy</td>
    <td>1866</td>
  </tr>
  <tr>
    <td>Urush va tinchlik</td>
    <td>L. Tolstoy</td>
    <td>1869</td>
  </tr>
</table>

💡

Hisoblagich: colspan="2" ikki ustun deb hisoblanadi. Qatordagi barcha katakchalarning colspan qiymatlarini fikran qo'shing — natija jadvalning barcha qatorlari uchun bir xil bo'lishi kerak.

🔷

6. rowspan — qatorlarni birlashtiramiz

rowspan katakchalarni vertikal bo'yicha birlashtiradi — bitta katakcha bir nechta qatorni egallaydi. Kategoriyalarni guruhlashda foydali.

HTML · rowspan

<table border="1">
  <tr>
    <th rowspan="2">Mevalar</th>
    <td>Olma</td>
    <td>100 so'm</td>
  </tr>
  <tr>
    <td>Nok</td>
    <td>120 so'm</td>
  </tr>
  <tr>
    <th rowspan="2">Sabzavotlar</th>
    <td>Kartoshka</td>
    <td>40 so'm</td>
  </tr>
  <tr>
    <td>Sabzi</td>
    <td>50 so'm</td>
  </tr>
</table>

E'tibor bering: rowspan dan keyingi qatorlarda bitta katakcha kam bo'ladi — birinchi ustun allaqachon band. Ikkinchi qatorda ("Nok" turgan joyda) jami ikkita katakcha bor, chunki birinchi qatordagi "Mevalar" katakchasi shu qatorni ham egallaydi.

💡

Diqqat: rowspan ishlatilganda keyingi qatorlarda katakchalar soni kamayadi — ustunlarning bir qismi allaqachon band bo'ladi. Har doim har bir qatordagi mantiqiy ustunlar sonini tekshiring.

🔷

7. Jadvalni border va inline CSS orqali bezash

<table> dagi border atributi — chegara qo'shishning oddiy usuli. Lekin chiroyli jadvallar uchun style atributidan (inline CSS) foydalanamiz:

HTML · Bezalgan jadval

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background: #f97316; color: white;">
    <th style="padding: 10px; border: 1px solid #ccc;">Fan</th>
    <th style="padding: 10px; border: 1px solid #ccc;">Baho</th>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ccc;">Matematika</td>
    <td style="padding: 10px; border: 1px solid #ccc;">5</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ccc;">Fizika</td>
    <td style="padding: 10px; border: 1px solid #ccc;">4</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ccc;">Tarix</td>
    <td style="padding: 10px; border: 1px solid #ccc;">5</td>
  </tr>
</table>

border-collapse: collapse — qo'sh chegaralarni olib tashlaydi
width: 100% — jadval to'liq kenglikda
padding: 10px — katakchalar ichidagi bo'shliq
border: 1px solid #ccc — katakcha atrofidagi ramka

🔷

Amaliyot: darslar jadvali

O'rganganlarimizning barchasidan foydalanib, haftalik jadval yaratamiz:

HTML · Jadval

<table style="border-collapse: collapse; width: 100%; font-family: Arial;">
  <tr style="background: #ea580c; color: white;">
    <th style="padding: 12px; border: 1px solid #ddd;">Vaqt</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Du</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Se</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Chor</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Pay</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Ju</th>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">8:00 - 8:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Matematika</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Fizika</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Ona tili</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Tarix</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Biologiya</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">9:00 - 9:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Fizika</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Kimyo</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Matematika</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Geografiya</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Jismoniy tarbiya</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">10:00 - 10:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Tarix</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Adabiyot</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Ingliz tili</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Matematika</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Informatika</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">11:00 - 11:45</td>
    <td colspan="5" style="padding: 10px; border: 1px solid #ddd; text-align: center; font-style: italic;">Tushlik</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">12:00 - 12:45</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Adabiyot</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Informatika</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Biologiya</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Fizika</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Kimyo</td>
  </tr>
</table>

"Tushlik" uchun colspan="5" ishlatamiz — u fanlar bilan bog'liq barcha beshta ustunni egallaydi. Vaqtni font-weight: bold orqali qalin qildik.

💡

Topshiriq: Jadvalni o'z darslaringizga moslab o'zgartiring, shanba kunini qo'shing, "qulaylik zonasi" qo'shing — har ikkinchi qatorni kulrang fon bilan bezang (background: #f9f9f9).

🔷

Amaliyot: rowspan bilan narxlar ro'yxati

Xizmatlarni kategoriyalar bo'yicha guruhlagan narxlar ro'yxatini yaratamiz:

HTML · Narxlar ro'yxati

<table style="border-collapse: collapse; width: 80%; font-family: Arial;">
  <tr style="background: #dc2626; color: white;">
    <th style="padding: 12px; border: 1px solid #ddd;">Xizmat</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Tavsif</th>
    <th style="padding: 12px; border: 1px solid #ddd;">Narx</th>
  </tr>
  <tr>
    <td rowspan="3" style="padding: 10px; border: 1px solid #ddd; font-weight: bold; background: #fff7ed;">Vyorstka</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Vizitka-sayt</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">5 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;">Ko'p sahifali sayt</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">15 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;">Onlayn-do'kon</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">40 000 ₽</td>
  </tr>
  <tr>
    <td rowspan="2" style="padding: 10px; border: 1px solid #ddd; font-weight: bold; background: #fff7ed;">Dizayn</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Sahifa maketi</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">8 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;">Logotip</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">3 000 ₽</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold; background: #fff7ed;">SEO</td>
    <td style="padding: 10px; border: 1px solid #ddd;">Optimallashtirish</td>
    <td style="padding: 10px; border: 1px solid #ddd; text-align: right;">7 000 ₽</td>
  </tr>
</table>

E'tibor bering: narxlar o'ngga tekislangan (text-align: right) — sonlar uchun shunday qabul qilingan. "Vyorstka" rowspan="3" orqali 3 qatorni, "Dizayn" — 2 qatorni egallaydi.

🔷

Tez-tez uchraydigan xatolar

Ustunlar soni har xil. Agar bir qatorda 4 ta katakcha, boshqasida esa 3 ta bo'lsa (colspan/rowspan siz) — jadval "buziladi". Har bir qatorda mantiqiy ustunlar soni bir xil bo'lishi kerak.

Teglarni yopishni unutish. Yopilmagan <tr> yoki <td> — va jadval kutilmagan tarzda ko'rinadi. Juftlikni tekshiring.

Noto'g'ri colspan. Agar colspan="5" bo'lsa, jadvalda esa 3 ta ustun bo'lsa — brauzer yetishmayotganlarini qo'shadi. Bu g'alati ko'rinishi mumkin.

Vyorstka uchun jadvallar. Maketlar uchun jadvallardan foydalanmang. Sahifadagi elementlarni joylashtirish uchun CSS Flexbox va Grid mavjud.

💡

Oltin qoida: Avval jadvalni qog'ozga chizib ko'ring. Qatorlar, ustunlar sonini va birlashtirish joylarini aniqlang. Keyin kodga ko'chiring.

🔷

Nimalarni o'rgandik?

<table> — jadval konteyneri
<tr> — qator
<td> — oddiy katakcha
<th> — sarlavha katakchasi (qalin, markazda)
colspan — ustunlarni birlashtirish (gorizontal)
rowspan — qatorlarni birlashtirish (vertikal)
Mantiqiy ustunlar soni barcha qatorlarda bir xil bo'lishi kerak

Mashq qiling: jadval bilan darslar jadvali, o'zlashtirish jadvali, narxlar ro'yxatini yarating. Amaliyot qanchalik ko'p bo'lsa, ko'nikma shunchalik mustahkam bo'ladi. Keyingi darsda — formalar!