Ro'yxatlar va jadvallar

Bozorlik ro'yxati, retsept bosqichlari, sayt menyusi, dars jadvali, narxlar — bularning hammasi yo ro'yxat, yo jadval. Bu darsda ma'lumotni tartibli ko'rsatishning ikki asosiy usulini o'rganamiz.

Tartibsiz ro'yxat: ul

Elementlarning tartibi muhim bo'lmasa — masalan, bozorlik ro'yxatida — tartibsiz ro'yxat ishlatiladi. U ikki xil tegdan iborat:

• <ul> — butun ro'yxat (inglizcha unordered list, «tartiblanmagan ro'yxat»);
• <li> — ro'yxatning har bir bandi (list item, «ro'yxat elementi»).

<h2>Bozorlik</h2>
<ul>
  <li>Non</li>
  <li>Sut</li>
  <li>Olma</li>
  <li>Guruch</li>
</ul>

Brauzer har bir band oldiga nuqta (marker) qo'ydi va ro'yxatni biroz o'ngga surdi. Muharrirga yana bitta <li>Choy</li> qo'shib ko'ring.

Tartibli ro'yxat: ol

Tartib muhim bo'lsa — qadamlar, reyting, yo'riqnoma — tartibli ro'yxat <ol> ishlatiladi (inglizcha ordered list). Bandlar baribir <li> bilan yoziladi, brauzer esa ularni o'zi raqamlaydi.

<h2>Choy damlash</h2>
<ol>
  <li>Choynakni qaynoq suv bilan chayib oling.</li>
  <li>Bir choy qoshiq ko'k choy soling.</li>
  <li>Qaynoq suv quyib, 5 daqiqa damlang.</li>
  <li>Choyni uch marta qaytaring.</li>
</ol>

<h2>Eng qadimiy shaharlar (teskari tartibda)</h2>
<ol reversed>
  <li>Toshkent</li>
  <li>Buxoro</li>
  <li>Samarqand</li>
</ol>

<h2>Test variantlari</h2>
<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Raqamlarni qo'lda yozmaganimizga e'tibor bering. Birinchi ro'yxatning o'rtasiga yangi qadam qo'shsangiz, keyingi raqamlar o'zi o'zgaradi — bu <ol> ning eng katta qulayligi. Raqamlashni atributlar bilan sozlash mumkin:

Ichma-ich ro'yxatlar

Ro'yxat bandining ichida yana bitta ro'yxat bo'lishi mumkin. Saytlardagi ochiladigan menyular aynan shunday quriladi:

<ul>
  <li>Bosh sahifa</li>
  <li>Kurslar
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Biz haqimizda</li>
  <li>Aloqa</li>
</ul>

Ichki ro'yxat yanada o'ngga surildi va boshqacha marker oldi. Eng muhimi — ichki <ul> «Kurslar» bandining ichida: u <li>Kurslar dan keyin boshlanib, shu bandning yopuvchi </li> tegidan oldin tugaydi.

<!-- Noto'g'ri: ichki ro'yxat to'g'ridan-to'g'ri ul ichida -->
<ul>
  <li>Kurslar</li>
  <ul>
    <li>HTML</li>
  </ul>
</ul>

<!-- To'g'ri: ichki ro'yxat li ning ichida -->
<ul>
  <li>Kurslar
    <ul>
      <li>HTML</li>
    </ul>
  </li>
</ul>

Ta'riflar ro'yxati: dl

Atama va uning izohidan iborat juftliklar uchun — lug'at, savol-javob, mahsulot xususiyatlari — ta'riflar ro'yxati bor:

• <dl> — butun ro'yxat (description list);
• <dt> — atama (description term);
• <dd> — uning izohi (description details).

<h2>Kichik lug'at</h2>
<dl>
  <dt>HTML</dt>
  <dd>Sahifaning tuzilishi va mazmunini belgilaydigan til.</dd>
  <dt>CSS</dt>
  <dd>Sahifaning ko'rinishini — rang, shrift, joylashuvni belgilaydigan til.</dd>
  <dt>Brauzer</dt>
  <dd>Veb-sahifalarni ochib ko'rsatadigan dastur.</dd>
</dl>

Jadvallar

Ma'lumot qator va ustunlarga joylashsa — narxlar, dars jadvali, o'yin natijalari — jadval kerak bo'ladi. Jadval to'rtta asosiy tegdan quriladi:

<table>
  <tr>
    <th>Meva</th>
    <th>Narxi (1 kg)</th>
  </tr>
  <tr>
    <td>Olma</td>
    <td>15 000 so'm</td>
  </tr>
  <tr>
    <td>Nok</td>
    <td>20 000 so'm</td>
  </tr>
  <tr>
    <td>Uzum</td>
    <td>18 000 so'm</td>
  </tr>
</table>

Jadval qatorma-qator yoziladi: avval birinchi qatorning barcha kataklari, keyin ikkinchisi va hokazo. «Ustun» degan alohida teg yo'q — ustunlar har bir qatordagi kataklar tartibidan o'zi hosil bo'ladi: har bir qatordagi birinchi katak — birinchi ustun, ikkinchisi — ikkinchi ustun.

Chegaralar — CSS'ga kichik nazar

Yuqoridagi jadvalda chiziqlar yo'q — HTML jadvali odatda chegarasiz chiqadi. Chegaralar va ichki bo'sh joylar CSS bilan beriladi. CSS'ni hali o'rganmadik (u 8-darsda), lekin jadval uchun kerakli uchta qatorni hozir ko'rib qo'yamiz:

table  { border-collapse: collapse; }              /* qo'shni chegaralar bitta chiziqqa birlashsin */
th, td { border: 1px solid #999; padding: 6px 12px; } /* 1 piksellik kulrang chiziq va ichki bo'sh joy */
th     { background: #eef2f8; }                     /* sarlavha kataklari foni */

Jadval qismlari: caption, thead, tbody, tfoot

Kattaroq jadvalni mantiqiy qismlarga bo'lish mumkin:

• <caption> — jadval nomi. <table> dan keyin birinchi bo'lib yoziladi.
• <thead> — sarlavha qatorlari (table head).
• <tbody> — asosiy ma'lumotlar (table body).
• <tfoot> — yakuniy qator, masalan, «Jami» (table foot).

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
  th { background: #eef2f8; }
</style>

<table>
  <caption>Mart oyidagi xarajatlar</caption>
  <thead>
    <tr><th>Nima uchun</th><th>Summa (so'm)</th></tr>
  </thead>
  <tbody>
    <tr><td>Oziq-ovqat</td><td>1 200 000</td></tr>
    <tr><td>Yo'l kira</td><td>250 000</td></tr>
    <tr><td>Internet</td><td>100 000</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Jami</th><td>1 550 000</td></tr>
  </tfoot>
</table>

Endi jadval ancha tushunarli. Tajriba qiling: collapse so'zini separate ga almashtiring — har bir katakning o'z chegarasi paydo bo'lib, chiziqlar ikki qavat bo'ladi. Kichik jadvallarda thead/tbody majburiy emas, lekin ular jadvalni o'qishni va keyinchalik CSS bilan bezashni osonlashtiradi.

Kataklarni birlashtirish: colspan va rowspan

Ba'zan bitta katak bir nechta ustun yoki qator joyini egallashi kerak. Buning uchun ikki atribut bor:

• colspan="3" — katak 3 ta ustun kengligida bo'ladi (column span).
• rowspan="2" — katak 2 ta qator balandligida bo'ladi (row span).

Maktab dars jadvalida ikkalasi ham kerak: katta tanaffus butun qatorni egallaydi, juftlik dars esa ikki soatni:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 10px; text-align: center; }
  th { background: #eef2f8; }
  .tanaffus { background: #fff3cd; }
  .juft { background: #dcf1ef; }
</style>

<table>
  <caption>9-«A» sinf dars jadvali</caption>
  <tr>
    <th>Vaqt</th><th>Dushanba</th><th>Seshanba</th><th>Chorshanba</th>
  </tr>
  <tr>
    <th>8:30</th>
    <td>Matematika</td>
    <td rowspan="2" class="juft">Informatika</td>
    <td>Tarix</td>
  </tr>
  <tr>
    <th>9:20</th>
    <td>Ona tili</td>
    <!-- Seshanba katagi yozilmaydi: uni Informatika egallagan -->
    <td>Fizika</td>
  </tr>
  <tr>
    <th>10:10</th>
    <td colspan="3" class="tanaffus">Katta tanaffus</td>
  </tr>
  <tr>
    <th>10:30</th>
    <td>Ingliz tili</td><td>Kimyo</td><td>Biologiya</td>
  </tr>
</table>

Ikki muhim narsa:

1. Kataklar sonini sanang. Jadvalda 4 ta ustun bor. «Tanaffus» qatorida: 1 ta th + colspan="3" li 1 ta td = 4. To'g'ri!
2. rowspan dan keyingi qatorda bitta katak kam yoziladi. «Informatika» 9:20 qatoriga ham «tushib» turibdi, shuning uchun u qatorda Seshanba katagi yozilmagan.

Bu yerda th qatorlarning boshida ham ishlatildi: vaqt — qatorning nomi. class="tanaffus" orqali katakka rang berdik — klasslar bilan ishlashni 8-darsda o'rganamiz.

Jadvalni qachon ishlatmaslik kerak

Ilgari, CSS hali kuchsiz bo'lgan paytda, butun sahifa joylashuvi jadval bilan qurilardi: chap ustunda menyu, o'ngda matn. Bugun bunday qilinmaydi:

• telefonda jadvalli sahifa ekranga sig'maydi;
• ekran o'quvchi dasturlar menyu va matnni «ma'lumotlar jadvali» deb o'qib, foydalanuvchini chalg'itadi;
• bunday sahifani o'zgartirish juda qiyin.

Mashqlar

<h2>Xarid ro'yxati</h2>
<!-- Shu yerga tartibli ro'yxat yozing -->

<h2>Xarid ro'yxati</h2>
<ol>
  <li>Non</li>
  <li>Sut</li>
  <li>Mevalar
    <ul>
      <li>Olma</li>
      <li>Anor</li>
    </ul>
  </li>
  <li>Guruch</li>
</ol>

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>

<table>
  <tr>
    <th>Vaqt</th>
    <th>Dushanba</th>
    <th>Seshanba</th>
  </tr>
  <tr>
    <th>8:30</th>
    <td>Matematika</td>
    <td>Ona tili</td>
  </tr>
  <!-- 9:20 dagi darslar qatorini qo'shing -->

  <!-- Tanaffus qatorini qo'shing (colspan) -->

</table>

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>

<table>
  <caption>Mening dars jadvalim</caption>
  <tr>
    <th>Vaqt</th>
    <th>Dushanba</th>
    <th>Seshanba</th>
  </tr>
  <tr>
    <th>8:30</th>
    <td>Matematika</td>
    <td>Ona tili</td>
  </tr>
  <tr>
    <th>9:20</th>
    <td>Fizika</td>
    <td>Tarix</td>
  </tr>
  <tr>
    <th>10:10</th>
    <td colspan="2">Tanaffus</td>
  </tr>
</table>

<style>
  table {  }
  th, td {  }
</style>

<table>
  <caption>Maktab to'garaklari</caption>
  <tr><th>To'garak</th><th>Kunlar</th><th>Vaqt</th></tr>
  <tr><td>Shaxmat</td><td>Dushanba, chorshanba</td><td>15:00</td></tr>
  <tr><td>Futbol</td><td>Seshanba, juma</td><td>16:30</td></tr>
  <tr><td>Robototexnika</td><td>Shanba</td><td>10:00</td></tr>
</table>

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid gray; padding: 8px; }
</style>

<table>
  <caption>Maktab to'garaklari</caption>
  <tr><th>To'garak</th><th>Kunlar</th><th>Vaqt</th></tr>
  <tr><td>Shaxmat</td><td>Dushanba, chorshanba</td><td>15:00</td></tr>
  <tr><td>Futbol</td><td>Seshanba, juma</td><td>16:30</td></tr>
  <tr><td>Robototexnika</td><td>Shanba</td><td>10:00</td></tr>
</table>

O'zingizni sinang