ცხრილის თავი და ტანი

რას ისწავლი

• როგორ დაყო ცხრილი სამ ნაწილად: <thead>, <tbody> და <tfoot>
• რას აკეთებს scope ატრიბუტი სათაურის უჯრაზე
• როდის გჭირდება სტრიქონის სათაური სვეტის სათაურის გარდა

სამი ნაწილი

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

• <thead> (table head) — ცხრილის თავი: სტრიქონი სვეტების სათაურებით;
• <tbody> (table body) — ცხრილის ტანი: მონაცემების სტრიქონები;
• <tfoot> (table foot) — ცხრილის ძირი: შეჯამება, ჯამი, შენიშვნა.

<table>
  <thead>
    <tr>
      <th>პროდუქტი</th>
      <th>ფასი</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>პური</td>
      <td>1.20</td>
    </tr>
    <tr>
      <td>რძე</td>
      <td>3.50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>სულ</td>
      <td>4.70</td>
    </tr>
  </tfoot>
</table>

ეკრანზე ცხრილი ზუსტად ისე გამოიყურება, როგორც ამ ელემენტების გარეშე. რისთვის გვჭირდება ისინი?

რატომ ღირს

1. მნიშვნელობა. ბრაუზერი, ეკრანის წამკითხველი და სხვა პროგრამები იგებენ, რომელი სტრიქონი სათაურია და რომელი მონაცემი.
2. ბეჭდვა. როცა გრძელი ცხრილი რამდენიმე ფურცელზე იბეჭდება, ბრაუზერს შეუძლია <thead> ყოველი ფურცლის თავში გაიმეოროს: ასე მეორე ფურცელზეც ჩანს, რომელი სვეტი რას ნიშნავს.
3. სტილი და პროგრამირება. CSS-ში ადვილად შეგიძლია სხვა ფერი მისცე მხოლოდ თავს ან მხოლოდ ძირს. JavaScript-ით კი, მაგალითად ცხრილის დალაგებისას, მხოლოდ <tbody>-ის სტრიქონებს გადაალაგებ და სათაური ადგილზე დარჩება.

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

scope: ვის ეკუთვნის სათაური

<th>-ს შეიძლება ჰქონდეს ატრიბუტი scope, რომელიც ამბობს, რას ასათაურებს ეს უჯრა:

• scope="col" — თავის სვეტს (column);
• scope="row" — თავის სტრიქონს (row).

მარტივ ცხრილში, სადაც სათაურები მხოლოდ ზემოთაა, ბრაუზერი ამას ხშირად თვითონ ხვდება. მაგრამ როცა სათაურები ზემოთაც არის და მარცხნივაც, scope ეკრანის წამკითხველს ეხმარება, ყოველ უჯრას ორივე სათაური მიუსადაგოს:

<table>
  <thead>
    <tr>
      <th scope="col">მოსწავლე</th>
      <th scope="col">მათემატიკა</th>
      <th scope="col">ისტორია</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">ნინო</th>
      <td>10</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

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

სცადე თავად

გაუშვი. ძირში ჯამი წერია. დაამატე <tbody>-ში მესამე პროდუქტი და ჯამი შესაბამისად შეცვალე.

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

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

<style>th, td { border: 1px solid #999; padding: 4px 10px; }</style>
<table>
  <thead>
    <tr>
      <th scope="col">მოსწავლე</th>
      <th scope="col">ქულა</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">ნინო</th>
      <td>9</td>
    </tr>
    <tr>
      <th scope="row">გიო</th>
      <td>7</td>
    </tr>
    <tr>
      <th scope="row">მარი</th>
      <td>8</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">საშუალო</th>
      <td>8</td>
    </tr>
  </tfoot>
</table>

მინი-ქვიზი

შეჯამება

• <thead> სათაურებია, <tbody> მონაცემები, <tfoot> შეჯამება.
• ეკრანზე ცხრილი არ იცვლება, მაგრამ ის უფრო გასაგები ხდება წამკითხველისთვის, ბეჭდვისთვის, CSS-ისა და JavaScript-ისთვის.
• scope="col" სვეტს ასათაურებს, scope="row" სტრიქონს.
• თითოეული ნაწილი სტრიქონებს (<tr>) შეიცავს და არა უჯრებს პირდაპირ.