როდის ვიყენებთ ცხრილს

რას ისწავლი

• როგორ გაარჩიო მონაცემები, რომლებსაც ცხრილი სჭირდება
• რატომ არ აწყობენ გვერდის განლაგებას ცხრილით
• რა გამოიყენო ცხრილის ნაცვლად, როცა მონაცემები ცხრილური არ არის

ცხრილის ტესტი

ცხრილი იმ მონაცემებისთვისაა, რომლებსაც ორი განზომილება აქვს: ყოველი მნიშვნელობა ერთი სტრიქონისა და ერთი სვეტის გადაკვეთაზე დგას და ორივეს სახელით აზრიანდება. მარტივი ტესტი: შეგიძლია თუ არა უჯრის მნიშვნელობა წაიკითხო როგორც „[სტრიქონის სათაური]-ის [სვეტის სათაური] არის [მნიშვნელობა]“?

• „ნინოს მათემატიკის ქულა არის 10.“ ✔ ცხრილია.
• „ორშაბათის ტემპერატურა არის 24°.“ ✔ ცხრილია.
• „ჩემი საყვარელი ხილი არის ვაშლი, მსხალი, ატამი.“ ✘ ეს სიაა: ერთი განზომილება.
• „ფოტო მარცხნივ, ტექსტი მარჯვნივ.“ ✘ ეს განლაგებაა და არა მონაცემები.

ისტორია: ცხრილები როგორც განლაგება

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

1. ეკრანის წამკითხველი ცხრილს ცხრილად კითხულობს: „ცხრილი, 3 სვეტი, სტრიქონი 1, სვეტი 2…“ — მენიუს და ტექსტის მოსმენა ჯოჯოხეთად იქცევა.
2. ტელეფონი: ცხრილი სტრიქონებად და სვეტებად არის „მიჭედებული“. ვიწრო ეკრანზე სამი სვეტი ერთმანეთზე ვეღარ გადაეწყობა, და მომხმარებელს გვერდის გვერდულად გადახვევა უწევს.
3. ცვლილება: დიზაინის შესაცვლელად მთელი ცხრილის ხელახლა აწყობა გჭირდება.

ამიტომ თანამედროვე წესი მკაცრია: განლაგება CSS-ით, ცხრილი მხოლოდ ცხრილური მონაცემებისთვის. CSS-ს დღეს ძლიერი ხელსაწყოები აქვს სვეტებისთვის და ბადეებისთვის. მათ CSS კურსში ისწავლი.

ალტერნატივები

• ერთგანზომილებიანი ჩამონათვალი: <ul> ან <ol>.
• „სახელი — მნიშვნელობა“ წყვილები ერთი საგნისთვის: <dl>. მაგალითად, ერთი წიგნის მახასიათებლები. თუ ბევრი წიგნია და ყველას ერთნაირი მახასიათებლები აქვს, უკვე ცხრილი ჯობს.
• ბარათები, ერთმანეთის გვერდით, მაგალითად პროდუქტები ფოტოებით: ცალკეული ელემენტები, რომლებიც CSS-ით ბადედ ლაგდება.

ცხრილი ტელეფონზე

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

სცადე თავად

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

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

• ცხრილი გვერდის სვეტებისთვის. განლაგება CSS-ის საქმეა.
• ცხრილი სიისთვის. ერთი სვეტის ცხრილი სინამდვილეში სიაა.
• უზარმაზარი ცხრილი ტელეფონისთვის. შეამცირე სვეტების რაოდენობა ან მონაცემები სხვანაირად დაყავი.

<style>th, td { border: 1px solid #999; padding: 4px 10px; }</style>
<ul>
  <li>ლურჯი</li>
  <li>მწვანე</li>
  <li>ნარინჯისფერი</li>
</ul>
<table>
  <tr>
    <th scope="col">სახელი</th>
    <th scope="col">ასაკი</th>
    <th scope="col">ქალაქი</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>
<dl>
  <dt>სახელი</dt>
  <dd>ტოი სტორი</dd>
  <dt>წელი</dt>
  <dd>1995</dd>
  <dt>ჟანრი</dt>
  <dd>ანიმაცია</dd>
</dl>

მინი-ქვიზი

შეჯამება

• ცხრილი ორგანზომილებიანი მონაცემებისთვისაა: „სტრიქონის X-ის სვეტი Y არის Z“.
• გვერდის განლაგება ცხრილით ძველი ხერხია: ის ეკრანის წამკითხველს და ტელეფონს უშლის ხელს.
• სიისთვის <ul>/<ol>, ერთი საგნის წყვილებისთვის <dl>, განლაგებისთვის CSS.
• ცხრილი შეძლებისდაგვარად ვიწრო შეინარჩუნე.