ცხრილის სათაური

რას ისწავლი

• როგორ მისცე ცხრილს სახელი <caption> ელემენტით
• სად იწერება <caption> და რატომ ჯობს ის ცხრილის წინ დაწერილ აბზაცს
• როგორი უნდა იყოს კარგი ცხრილის სათაური

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

გაზეთსა თუ სახელმძღვანელოში ცხრილს ხშირად თავზე სახელი აწერია: „ცხრილი 2. საქართველოს უდიდესი ქალაქები“. HTML-ში ამისთვის <caption> ელემენტი არსებობს:

<table>
  <caption>საქართველოს მოსახლეობით უდიდესი ქალაქები</caption>
  <thead>
    <tr>
      <th scope="col">ქალაქი</th>
      <th scope="col">რეგიონი</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>თბილისი</td>
      <td>დედაქალაქი</td>
    </tr>
    <tr>
      <td>ბათუმი</td>
      <td>აჭარა</td>
    </tr>
    <tr>
      <td>ქუთაისი</td>
      <td>იმერეთი</td>
    </tr>
  </tbody>
</table>

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

რატომ caption და არა უბრალოდ აბზაცი

შეიძლებოდა ცხრილის წინ <h3> ან <p> დაგვეწერა. ეკრანზე თითქმის იგივე გამოჩნდებოდა. მაგრამ <caption> ცხრილის ნაწილია და ცხრილს მკაცრად უკავშირდება. ეს ისევე მუშაობს, როგორც <figcaption> სურათისთვის. ეკრანის წამკითხველის მომხმარებელი, როცა ცხრილს მიადგება, ჯერ ისმენს: „ცხრილი: საქართველოს მოსახლეობით უდიდესი ქალაქები, 3 სტრიქონი, 2 სვეტი“, და მაშინვე იცის, ღირს თუ არა მისი წაკითხვა. გვერდზე რამდენიმე ცხრილი რომ იყოს, მათ შორის ნავიგაციაც სახელებით ადვილდება.

თუ ცხრილი უკვე <figure>-შია, მაგალითად, რადგან მასზე ტექსტში „ცხრილი 2“-ით მიუთითებ, მაშინ <figcaption>-იც საკმარისია. ერთდროულად ორივე არ გჭირდება.

სათაური საძიებო სისტემისთვის და ბეჭდვისთვის

<caption>-ის ტექსტი გვერდის ჩვეულებრივი ტექსტის ნაწილია, ამიტომ საძიებო სისტემაც მას კითხულობს და უკეთ იგებს, რაზეა ცხრილი. ბეჭდვისასაც ის ცხრილთან ერთად რჩება: სათაური ცხრილისგან ცალკე, სხვა ფურცელზე არ „გადავარდება“, რაც ჩვეულებრივ აბზაცს შეიძლება შეემთხვეს.

კარგი სათაური

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

სცადე თავად

გაუშვი. მერე შეცვალე სათაური უფრო ზუსტით და დაამატე ცხრილს მეოთხე ქალაქი.

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

• <caption> ცხრილის გარეთ. ის მხოლოდ <table>-ის შიგნით მუშაობს.
• <caption> არა პირველ ადგილას. ის <thead>-ის და სტრიქონების წინ უნდა იყოს.
• სათაური, რომელიც არაფერს ამბობს. „ცხრილი 1“ ნომერია და არა სახელი. დაამატე, რა არის ცხრილში.

<style>th, td { border: 1px solid #999; padding: 4px 10px; }</style>
<table>
  <caption>ჩემი კვირის ძილის საათები</caption>
  <thead>
    <tr>
      <th scope="col">დღე</th>
      <th scope="col">საათი</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ორშაბათი</td>
      <td>9</td>
    </tr>
    <tr>
      <td>სამშაბათი</td>
      <td>8</td>
    </tr>
    <tr>
      <td>ოთხშაბათი</td>
      <td>9.5</td>
    </tr>
  </tbody>
</table>

მინი-ქვიზი

შეჯამება

• <caption> ცხრილის სახელია და <table>-ის პირველი შვილია.
• ის ცხრილს უკავშირდება: ეკრანის წამკითხველი ცხრილს ამ სახელით აცხადებს.
• კარგი სათაური მოკლეა და ამბობს, რა არის ცხრილში.
• თუ ცხრილი <figure>-შია, <figcaption> საკმარისია.