Ҷадвалҳо

Ин барои чӣ лозим аст

Ҷадвали ҳаракати қаторҳо, ҷадвали натиҷаҳо, муқоисаи тарифҳо, нархнома — маълумоте, ки сатрҳо ва сутунҳо дорад. Барои онҳо дар HTML ҷадвалҳо ҳастанд. Муҳим: ҷадвалҳо барои маълумот мебошанд, на барои тақсими саҳифа ба сутунҳо (ин корро дар солҳои 2000 мекарданд; ҳозир барои ин Flexbox ва Grid ҳастанд — мавзӯъҳои 13–14).

Сатрҳо ва катакҳо

Ҷадвал аз рӯи сатрҳо сохта мешавад:

• <table> — тамоми ҷадвал;
• <tr> (table row) — сатр;
• <td> (table data) — катак дар дохили сатр.

<table>
  <tr>
    <td>Себ</td>
    <td>12 сомонӣ</td>
  </tr>
  <tr>
    <td>Нок</td>
    <td>15 сомонӣ</td>
  </tr>
</table>

Натиҷа: 2 сатр, ҳар кадом 2 катак. Ҳошия нест — браузер онро бо пешфарз намекашад.

Барои сутунҳо тегҳои алоҳида нестанд: сутун худ аз худ пайдо мешавад — аз катакҳои якуми ҳамаи сатрҳо, дуюм ва ғайра. Бинобар ин дар ҳар сатр бояд шумораи якхелаи катакҳо бошад.

Катакҳои сарлавҳавӣ <th>

<th> (table header) — катак-сарлавҳа. Матни он ғафс ва дар марказ аст, барномаҳои хониши экран мефаҳманд, ки ин номи сутун аст:

<table>
  <tr>
    <th>Мол</th>
    <th>Нарх</th>
  </tr>
  <tr>
    <td>Себ</td>
    <td>12 сомонӣ</td>
  </tr>
</table>

Натиҷа: сатри якум ғафс — сарлавҳаи ҷадвал.

Қисмҳои ҷадвал ва ном

Ҷадвалҳои калонро ба қисмҳо тақсим мекунанд:

• <caption> — номи ҷадвал, фавран баъди <table> меояд;
• <thead> — сарлавҳа;
• <tbody> — маълумоти асосӣ;
• <tfoot> — сатри ҷамъбаст.

<table>
  <caption>Харидҳо</caption>
  <thead>
    <tr><th>Мол</th><th>Нарх</th></tr>
  </thead>
  <tbody>
    <tr><td>Нон</td><td>4</td></tr>
    <tr><td>Панир</td><td>30</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Ҳамагӣ</td><td>34</td></tr>
  </tfoot>
</table>

Натиҷа: дар болои ҷадвал навиштаҷоти «Харидҳо», сарлавҳаи ғафс, ду сатри маълумот ва сатри «Ҳамагӣ».

Муттаҳид кардани катакҳо

Катакро ба якчанд сутун — colspan — ё сатр — rowspan — кашидан мумкин аст:

<table border="1">
  <tr><th colspan="2">Тамос</th></tr>
  <tr><td>Телефон</td><td>123-45-67</td></tr>
  <tr><td rowspan="2">Почта</td><td>work@mail.tj</td></tr>
  <tr><td>home@mail.tj</td></tr>
</table>

Натиҷа: «Тамос» — як катаки васеъ ба ҳарду сутун; «Почта» — катаки баланд ба ду сатр, дар тарафи рости он ду суроға.

Диққат кун: дар сатри охир як катак ҳаст — ҷои дуюмро «Почта»-и кашидашуда аллакай гирифтааст. Чунин ҳисоб кун: ҳар сатр дар маҷмӯъ шумораи якхелаи сутунҳоро ишғол мекунад, бо назардошти colspan ва rowspan аз боло.

border="1" — роҳи кӯҳнаи зуд нишон додани ҳошияҳо. Дар лоиҳаҳои ҳақиқӣ ҳошияҳоро дар CSS медиҳанд: td, th { border: 1px solid gray; }.

Дар дохил чӣ тавр кор мекунад

Браузер аввал ҳамаи сатрҳоро мехонад, баъд бари сутунҳоро ҳисоб мекунад: сутун чунон бар мегирад, ки дарозтарин матни он ҷо шавад. Агар дар <table> <tbody>-ро нанависӣ, браузер онро худаш илова мекунад — он дар DOM пайдо мешавад, ҳатто агар дар код набошад.

Хатоҳои маъмул

1. Матн мустақиман дар <tr>. <tr>Себ</tr> — матн бояд дар <td> ё <th> бошад.
2. Шумораи гуногуни катакҳо дар сатрҳо. Ҷадвал «вайрон» мешавад: сутунҳо ҷой иваз мекунанд, дар рост ҷойҳои холӣ пайдо мешаванд.
3. colspan бе нест кардани катакҳои зиёдатӣ. Катакро ба 2 сутун кашидӣ — дар сатр бояд як катак камтар шавад.
4. <caption> на аввал. Ном бояд фавран баъди <table>-и кушоянда ояд.
5. Ҷадвал барои тартиби саҳифа. Сутунҳои сайт тавассути <table> дар телефон бад кор мекунанд. Ҷадвалҳо — танҳо барои маълумот.

Ёддошт

Тег / атрибут	Чӣ кор мекунад
<table>	ҷадвал
<tr>	сатр
<td> / <th>	катак / катак-сарлавҳа
<caption>	номи ҷадвал (аввал дар дохили <table>)
<thead>, <tbody>, <tfoot>	сарлавҳа, бадан, ҷамъбаст
colspan="2"	ба 2 сутун кашидан
rowspan="2"	ба 2 сатр кашидан