AXV

Jadval teglari

Qator, ustun va katakchalar: ma'lumotni tartibga solamiz

8-sinfWeb Full-stack2-hafta · 5-dars

Bugungi yo'l xaritasi 80 daqiqa

0–10. Takrorlash: rasmlar, alt, ro'yxatlar
10–30. Jadval: table, tr, td, th, caption
30–40. thead, tbody, tfoot
45–55. colspan va rowspan
55–80. Amaliyot, nazorat, xulosa

Takrorlash: 4-dars

Rasm yuklanmay qolsa?

bosing

Yordamga alt keladi: rasm o'rnida matn chiqadi.

Ichma-ich ro'yxat qoidasi?

bosing

Ichki ro'yxat <li> ichiga kiradi.

01

Jadval asoslari

table, tr, td, th, caption

Jadval hayotda qayerda?

Dars jadvali

Kun va dars kesishmasi

Turnir

Futbol chempionati jadvali

Narxlar

Internet-do'kon tovarlari

Xarid cheki

Mahsulot, soni, jami

Jadval: ma'lumotni qator va ustun kesishmasida tartibli ko'rsatish vositasi.

Jadvalning anatomiyasi

Kun Harorat Havo Dushanba +22 Quyoshli Seshanba +25 Bulutli <table> butun jadval <tr> bitta qator <th> sarlavha katak <td> ma'lumot katak

Katakchalar ustiga olib boring yoki bosing.

Besh asosiy teg

  1. <table> jadval konteyneri
  2. <tr> table row: gorizontal qator
  3. <td> table data: oddiy katakcha
  4. <th> table header: qalin, o'rtada
  5. <caption> jadval nomi, table ning birinchi bolasi

HTML jadvalni qatorlar bo'yicha yozadi

<tr> 1 <th>Fan</th> <th>Baho</th> <th>Kim</th> <tr> 2 <td>Fizika</td> <td>5</td> <td>Ali</td> <tr> 3 <td>Tarix</td> <td>4</td> <td>Vali</td> chapdan o'ngga, yuqoridan pastga

Birinchi jadval


<table border="1">
  <caption>Haftalik ob-havo</caption>
  <tr>
    <th>Kun</th>
    <th>Harorat</th>
  </tr>
  <tr>
    <td>Dushanba</td>
    <td>+22°C</td>
  </tr>
</table>

Jadval qadam-baqadam o'sadi


<table>
  <tr><td>Dushanba</td></tr>
</table>

Faqat td: ramka yo'q, sarlavha yo'q.

Jadval qadam-baqadam o'sadi


<table border="1">
  <caption>Ob-havo</caption>
  <tr><th>Kun</th></tr>
  <tr><td>Dushanba</td></tr>
</table>

border, caption va th qo'shildi.

Brauzerda natija

obhavo.html
Haftalik ob-havo
KunHarorat
Dushanba+22°C
Seshanba+25°C

th yoki td?

<th>

Sarlavha katakchasi. Qalin va o'rtaga tekislangan.
VS

<td>

Oddiy ma'lumot katakchasi. Chapga tekislangan.

Pastga bosing: border="1" nima uchun kerak?

Nega border="1"?

Brauzer chiziq chizmaydi

Katakchalar chegarasi ko'rinmaydi, jadval matn uyumiga o'xshaydi.

Vaqtincha ramka

Katakchalarni ko'z bilan tekshiramiz. Keyingi haftalarda CSS bilan chiroyli bezaymiz.

Bilasizmi?

1990-yillarda butun saytlarning maketi jadval bilan yasalgan edi.
  • Menyu, logotip va yangiliklar bitta katta jadval ichida turgan
  • Bugun jadval faqat ma'lumot uchun, dizayn CSS bilan qilinadi
02

Semantik bo'limlar

thead, tbody, tfoot

Jadvalning uch qismi

<thead> MahsulotMiqdoriNarxi <tbody> Non2 dona6 000 Sut1 litr11 000 <tfoot> Jami to'lov:17 000

Bo'limni bosing: vazifasi chiqadi.

Semantik jadval: chek


<table border="1">
  <thead>
    <tr><th>Mahsulot</th><th>Miqdori</th><th>Narxi</th></tr>
  </thead>
  <tbody>
    <tr><td>Non</td><td>2 dona</td><td>6 000</td></tr>
    <tr><td>Sut</td><td>1 litr</td><td>11 000</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Jami to'lov:</th><th>17 000</th></tr>
  </tfoot>
</table>

Mini-test

Uzun jadval chop etilganda brauzer har varaq tepasida nimani takrorlaydi?

To'g'ri: thead sarlavhalarni har varaqda takrorlaydi, pastda tfoot turadi.
03

Katakchalarni birlashtirish

colspan va rowspan

colspan: ustunlarni birlashtirish

Kun Vaqt Fan Katta tanaffus (20 daqiqa) colspan="3" Dushanba 10:30 Informatika 1 ta td = 3

rowspan: qatorlarni birlashtirish

Kun Vaqt Fan Dushanba rowspan="2" 08:30 Algebra 09:25 Fizika Pastki qatorda 1 ta td kam yoziladi

Hisob qoidasi: qadam-baqadam

1. Ustunlar sonini aniqla

Jadval 3 ustunli bo'lsa, har qatorda jami 3 katak hisoblanadi.

2. Birlashtirish bormi?

colspan="2" katak 2 ta o'rinni egallaydi.

3. Hisobla

2 + 1 = 3. Qatorda yana faqat bitta oddiy td yoziladi.

rowspan kodda


<tr>
  <td rowspan="2">Dushanba</td>
  <td>Matematika</td>
</tr>
<tr>
  <td>Fizika</td>
</tr>
Ikkinchi qatorda "Dushanba" yozilmaydi: uni yuqoridagi rowspan egallagan.

Xato va to'g'ri

3 ustunli jadval, colspan="2"

Qatorda 3 ta td yozildi: 2 + 3 = 5 o'rin, jadval buzildi.

2 + 1 = 3

Qatorda birlashgan td va yana bitta td: yig'indi ustunlar soniga teng.

Mini-test: hisobla

Jadval 3 ustunli. Qatorda bitta colspan="2" katak bor. Yana nechta td yoziladi?

To'g'ri: 2 + 1 = 3. Birlashgan katak 2 ta o'rinni egallaydi.

Bugun nimani yig'dik

0
table, tr, td, th, caption
0
thead, tbody, tfoot
0
colspan va rowspan

Amaliy topshiriq 20 daqiqa

OsonDushanbadan jumagacha dars jadvali: Kun, 1-dars, 2-dars, 3-dars (thead bilan).
O'rtaXarid cheki: mahsulot, miqdori, narxi va tfoot da colspan bilan "Jami to'lov".
QiyinIkki kunlik jadval: Dushanba rowspan, o'rtada "Katta tanaffus" colspan="3".

Tezkor nazorat

  1. tr, td, th nimaning qisqartmasi?
  2. th ichidagi matn qanday ko'rinadi?
  3. 3 ta ustunni birlashtirish: qaysi atribut?
  4. 2 ta qatorni birlashtirish-chi?
  5. thead, tbody, tfoot nima uchun kerak?

Xulosa

Bugun o'rgandik

Jadval qatorlar bo'yicha yoziladi. th sarlavha, td ma'lumot. Bo'limlar: thead, tbody, tfoot. Birlashtirish: colspan, rowspan.

Keyingi dars (6-dars)

Foydalanuvchi bilan muloqot: ro'yxatdan o'tish formasi, form, input, button.