ცხრილის აგება

რას ისწავლი

• რისგან შედგება HTML ცხრილი: <table>, <tr>, <td> და <th>
• რატომ იწერება ცხრილი სტრიქონ-სტრიქონ და არა სვეტ-სვეტ
• როგორ ააწყო პატარა ცხრილი თავიდან ბოლომდე

მონაცემები სტრიქონებად და სვეტებად

ზოგი ინფორმაცია ბუნებრივად ცხრილის ფორმისაა: გაკვეთილების ცხრილი, სპორტული ტურნირის შედეგები, ფასების სია, ამინდის პროგნოზი კვირის დღეების მიხედვით. ასეთ მონაცემებს ორი განზომილება აქვს: სტრიქონები და სვეტები. ყოველი მნიშვნელობა ერთი სტრიქონისა და ერთი სვეტის გადაკვეთაზე დგას. „ორშაბათის“ და „ტემპერატურის“ გადაკვეთაზე, მაგალითად, 18 გრადუსი.

HTML-ში ცხრილი ოთხი ელემენტით იგება:

• <table> მთელი ცხრილის გარსია;
• <tr> (table row) ერთი სტრიქონია;
• <td> (table data) ჩვეულებრივი უჯრაა მონაცემით;
• <th> (table header) სათაურის უჯრაა: სვეტის ან სტრიქონის სახელი.

<table>
  <tr>
    <th>დღე</th>
    <th>ამინდი</th>
    <th>ტემპერატურა</th>
  </tr>
  <tr>
    <td>ორშაბათი</td>
    <td>მზიანი</td>
    <td>24°</td>
  </tr>
  <tr>
    <td>სამშაბათი</td>
    <td>წვიმიანი</td>
    <td>17°</td>
  </tr>
</table>

სტრიქონ-სტრიქონ

მნიშვნელოვანი რამ, რასაც თავიდან ბევრი ურევს: HTML-ში სვეტის ელემენტი არ არსებობს. ცხრილი სტრიქონებად იწერება, ზემოდან ქვემოთ, და ყოველ სტრიქონში უჯრები მარცხნიდან მარჯვნივ. სვეტები თავისით ჩნდება: ყველა სტრიქონის პირველი უჯრა პირველ სვეტს ქმნის, მეორე უჯრები მეორეს და ასე შემდეგ.

ამიტომ ერთი წესი უნდა დაიცვა: ყველა სტრიქონში უჯრების რაოდენობა ერთნაირი უნდა იყოს. თუ ერთ სტრიქონს სამი უჯრა აქვს, მეორეს ორი, ცხრილი „დაიკბიჩება“: ბოლო სვეტში ცარიელი ადგილი დარჩება. მომდევნო თავებში ნახავ, როგორ გააერთიანო უჯრები ისე, რომ ეს წესი არ დაირღვეს.

th და td

<th> სათაურის უჯრაა: ბრაუზერი მას ნაგულისხმევად მუქად და ცენტრში წერს. მაგრამ ისევე როგორც სათაურებში, მთავარი გარეგნობა არ არის. <th> ამბობს, რომ ეს უჯრა სახელია, რომელიც თავის სვეტს ან სტრიქონს აღწერს. ეკრანის წამკითხველი მას იყენებს: როცა მომხმარებელი უჯრას „24°“ ისმენს, წამკითხველი ეტყვის, რომ ეს „ტემპერატურაა“. ამიტომ სათაურის უჯრები ყოველთვის <th>-ით წერე, მუქი <td>-ით არა.

ჩარჩოები

ცხრილს ნაგულისხმევად ჩარჩოები არ აქვს: უჯრები უბრალოდ ერთმანეთის გვერდით დგას. ჩარჩოები, ფერები და დაშორებები CSS-ის საქმეა. ამ მოდულის მაგალითებს პატარა <style> ბლოკი ახლავს, რომ ცხრილი უკეთ ჩანდეს. ეს CSS-ია: მას შემდეგ კურსში ისწავლი, ჯერჯერობით უბრალოდ დატოვე.

სცადე თავად

გაუშვი. მერე დაამატე მესამე სტრიქონი ოთხშაბათისთვის, ისევ სამი უჯრით.

ხშირი შეცდომები

• უჯრა <tr>-ის გარეშე. <td> ყოველთვის <tr>-ის შიგნითაა, <tr> კი <table>-ის შიგნით.
• სხვადასხვა რაოდენობის უჯრა. ყოველ სტრიქონს ერთნაირი რაოდენობის უჯრა სჭირდება.
• სათაური მუქი <td>-ით. სათაურის უჯრა <th>-ია: ასე მას ეკრანის წამკითხველიც გაიგებს.

<style>th, td { border: 1px solid #999; padding: 4px 10px; }</style>
<table>
  <tr>
    <th>სახელი</th>
    <th>ასაკი</th>
    <th>საყვარელი საგანი</th>
  </tr>
  <tr>
    <td>ნინო</td>
    <td>12</td>
    <td>ინფორმატიკა</td>
  </tr>
  <tr>
    <td>გიო</td>
    <td>13</td>
    <td>ისტორია</td>
  </tr>
  <tr>
    <td>მარი</td>
    <td>12</td>
    <td>ხელოვნება</td>
  </tr>
</table>

მინი-ქვიზი

შეჯამება

• ცხრილი: <table>, მასში სტრიქონები <tr>, სტრიქონებში უჯრები <td> და <th>.
• ცხრილი სტრიქონ-სტრიქონ იწერება. სვეტები უჯრების რიგით ჩნდება.
• ყველა სტრიქონში უჯრების რაოდენობა ერთნაირი უნდა იყოს.
• სათაურის უჯრა <th>-ია. ჩარჩოები და ფერები CSS-ის საქმეა.