HTML jadvallar (table, tr, td)

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:

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

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

Jonli jadval natijasi

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

Kod

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

<style>
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;
}
</style>

Natija

Kataklarni birlashtirish

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

<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 yoki Grid bilan quriladi.

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 orqali foydalanuvchidan ma’lumot olishni boshlaymiz.