وانەی 64 لە 67

وانەی ٦٤: گروپی ڕیزەکان: thead، tbody و tfoot

lesson-64.html لاپەڕەیەکی تەواو کە کۆدی CSSـی دابینکراوی لەناو <style> هەیە، بۆ پیشاندانی چوارچێوە و بۆشایی خانەکان. ئێستا پێویست ناکات کۆدی CSSـەکە بگۆڕیت.
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>فرۆشتنی ئەم هەفتەیە</title>
    <style>
      table {
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #888;
        padding: 6px 10px;
      }
    </style>
  </head>
  <body>
    <h1>فرۆشتنی ئەم هەفتەیە</h1>
    <table>
      <caption>ژمارەی پیالە فرۆشراوەکان</caption>
      <tr>
        <th scope="col">چا</th>
        <th scope="col">ژمارەی پیالە فرۆشراوەکان</th>
      </tr>
      <tr>
        <th scope="row">چای ڕەش</th>
        <td>40</td>
      </tr>
      <tr>
        <th scope="row">چای سەوز</th>
        <td>25</td>
      </tr>
      <tr>
        <th scope="row">چای گیایی</th>
        <td>15</td>
      </tr>
      <tr>
        <th scope="row">کۆی گشتی</th>
        <td>80</td>
      </tr>
    </table>
  </body>
</html>
ناوەڕۆکی ئەم وانەیە بەشی ١: ڕیزەکانی سەردێڕ و ڕیزەکانی داتا بەشی ٢: بەشی پوختەی خشتە: tfoot بەشی ٣: گروپەکان بە ڕوونی بنووسە

بەشی ١: ڕیزەکانی سەردێڕ و ڕیزەکانی داتا

ئەم خشتەیە سێ بەشی هەیە: ڕیزی سەردێڕ، ڕیزەکانی داتا، و ڕیزی کۆی گشتی. HTML توخمی تایبەتی هەیە بۆ گروپکردنی ئەم ڕیزانە. بە دوو بەشی یەکەم دەست پێدەکەین.

ڕیزی سەردێڕ لەناو <thead> دابنێ، و سێ ڕیزی داتاکە لەناو <tbody>:
<thead>
  <tr>
    <th scope="col">چا</th>
    <th scope="col">ژمارەی پیالە فرۆشراوەکان</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">چای ڕەش</th>
    <td>40</td>
  </tr>
  <tr>
    <th scope="row">چای سەوز</th>
    <td>25</td>
  </tr>
  <tr>
    <th scope="row">چای گیایی</th>
    <td>15</td>
  </tr>
</tbody>

<thead> ڕیزەکانی سەردێڕ لەخۆ دەگرێت، و <tbody> ڕیزەکانی داتا. سەرنج بدە هێشتا <tr> بۆ ڕیزەکان بەکاردەهێنین؛ ئەم توخمە نوێیانە تەنها ڕیزەکان گروپ دەکەن.

بەشی ٢: بەشی پوختەی خشتە: tfoot

دوا ڕیز کۆی گشتی پیشان دەدات، بۆیە لەناو <tfoot> دایدەنێین. ئەم بەشە دوای <tbody> دابنێ:
<tfoot>
  <tr>
    <th scope="row">کۆی گشتی</th>
    <td>80</td>
  </tr>
</tfoot>

ڕووخسارەکە نەگۆڕاوە، بەڵام ئێستا لە کۆدەکەدا بە ڕوونی دیارە کام ڕیز سەردێڕە، کامەیان داتایە و کامەیان پوختەیە.

بەشی ٣: گروپەکان بە ڕوونی بنووسە

لە وانەکانی پێشوو، <tr>مان ڕاستەوخۆ لەناو <table> نووسی. لەو نموونانەدا، وێبگەڕ خۆی <tbody> لە پێکهاتەی لاپەڕەکەدا دروست دەکات، تەنانەت ئەگەر تاگەکانی لە فایلەکەدا نەنووسرابن.

بەڵام بۆ ئاسان خوێندنەوەی کۆدەکە، باشترە گروپەکان بە ڕوونی بنووسین: ڕیزەکانی سەردێڕ لەناو <thead>، ڕیزەکانی داتا لەناو <tbody>، و ڕیزەکانی پوختە لەناو <tfoot>.
هەڵەیەکی باو: وا بزانیت <thead> جێگەی <th> دەگرێتەوە. <thead> ڕیزەکانی سەردێڕ گروپ دەکات؛ بۆ خودی خانەکانی سەردێڕ هێشتا <th> بەکاردەهێنین.
پوختە
  • <thead> ڕیزەکانی سەردێڕ، <tbody> ڕیزەکانی داتا، و <tfoot> ڕیزەکانی پوختە لەخۆ دەگرن.
  • ئەم توخمانە ڕیزەکان گروپ دەکەن؛ جێگەی <tr>، <th> یان <td> ناگرنەوە.
  • زیادکردنی گروپەکان لەم نموونەیەدا ڕووخساری خشتەکە ناگۆڕێت، بەڵام پێکهاتەی کۆدەکە ڕوونتر دەکات.
  • پشکنەر گروپەکان لە پێکهاتەی لاپەڕەکەدا پیشان دەدات.
ڕاهێنان
١. ڕیزێکی چوارەم بۆ «چای نەعنا» لەناو <tbody> زیاد بکە و ژمارەیەک بۆ پیالە فرۆشراوەکانی بنووسە.
٢. ژمارەی کۆی گشتی لەناو <tfoot> بگۆڕە بۆ ئەوەی لەگەڵ داتاکە بگونجێت. HTML بە خۆی کۆی ژمارەکان هەژمار ناکات.
٣. پشکنەر بکەرەوە و دڵنیابەرەوە هەر ڕیزێک لەناو گروپی گونجاوی خۆیدایە.

نموونە

html
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>نرخی چا</title>
    <style>
      table {
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #888;
        padding: 6px 10px;
      }
    </style>
  </head>
    <body>
    <h1>فرۆشتنی ئەم هەفتەیە</h1>
    <table>
      <caption>ژمارەی پیالە فرۆشراوەکان</caption>
      <thead>
        <tr>
          <th scope="col">چا</th>
          <th scope="col">ژمارەی پیالە فرۆشراوەکان</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">چای ڕەش</th>
          <td>40</td>
        </tr>
        <tr>
          <th scope="row">چای سەوز</th>
          <td>25</td>
        </tr>
        <tr>
          <th scope="row">چای گیایی</th>
          <td>15</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">کۆی گشتی</th>
          <td>80</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

چوونەژوورەوە بۆ پاشەکەوتکردنی پێشکەوتنت لە فێربووندا.