وانەی 62 لە 67

وانەی ٦٢: سەردێڕەکانی خشتە: th و scope

فایلی دەستپێک: lesson-62.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>
      <tr>
        <td>چای ڕەش</td>
        <td>2.50</td>
      </tr>
      <tr>
        <td>چای سەوز</td>
        <td>3.00</td>
      </tr>
    </table>
  </body>
</html>

ناوەڕۆکی ئەم وانەیە

بەشی ١: ستوونەکان ناو بنێ بەشی ٢: تایبەتمەندی scope بەشی ٣: سەردێڕ یان تەنها تێکستی ئەستوور؟

بەشی ١: ستوونەکان ناو بنێ

سەیری خشتەکە بکە. ژمارەکانی ستوونی دووەم چی پیشان دەدەن؟ بەبێ سەردێڕ، دەبێت پێشبینی بکەیت مەبەستیان چییە. ئەو خانانەی ستوونێک یان ڕیزێک دەناسێنن، خانەی سەردێڕ (header cell)ـن. بە توخمی <th> دروستیان دەکەین، کە کورتکراوەی table headerـە.

ئەم ڕیزە لەناو <table>، پێش ڕیزەکانی داتا، زیاد بکە:

<tr>
  <th scope="col">چا</th>
  <th scope="col">نرخ</th>
</tr>

ڕیزە نوێیەکە لە سەرەوە دەردەکەوێت. تێکستی خانەکانی سەردێڕ زۆرجار ئەستوور و لە ناوەڕاست پیشان دەدرێت. ئەمە شێوازی بنەڕەتی وێبگەڕە بۆ <th>.

Table with heads

بەشی ٢: تایبەتمەندی scope

تایبەتمەندی scope دیاری دەکات خانەی سەردێڕەکە پەیوەندی بە کام خانەکانەوە هەیە. scope="col" واتە سەردێڕەکە بۆ ستوونەکەیە. ئامێری خوێندنەوەی شاشە دەتوانێت ئەم پەیوەندییە بەکاربهێنێت بۆ خوێندنەوەی سەردێڕی گونجاو، کاتێک بەکارهێنەر دەگاتە خانەی نرخێک.

ڕیزەکانیش دەتوانن سەردێڕیان هەبێت. خانەی ناوی چا لە هەر ڕیزی داتادا بگۆڕە بۆ <th> بە scope="row":

<tr>
  <th scope="row">چای ڕەش</th>
  <td>2.50</td>
</tr>

هەمان کار بۆ ڕیزی «چای سەوز» بکە.

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

بەشی ٣: سەردێڕ یان تەنها تێکستی ئەستوور؟

دەتوانیت بە ئەستوورکردنی تێکستی ناو <td>، خانەکە لە ڕووخساردا وەک سەردێڕ پیشان بدەیت. بەڵام ئەوە هێشتا خانەی داتایە؛ ئەستوورکردنی تێکستەکە پەیوەندیی سەردێڕ بە ڕیز یان ستوون دروست ناکات.

بۆ سەردێڕەکان <th> بەکاربهێنە، و دواتر بە CSS شێوەی پیشاندانی دیاری بکە.

هەڵەیەکی باو: لەجیاتی <th>، خانەی سەردێڕ بە <td> و تێکستی ئەستوور دروست بکەیت.

پوختە

<th> خانەی سەردێڕ دروست دەکات. وێبگەڕەکان زۆرجار تێکستەکەی ئەستوور و لە ناوەڕاست پیشان دەدەن.
scope="col" سەردێڕی ستوون دیاری دەکات، و scope="row" سەردێڕی ڕیز.
سەردێڕەکان یارمەتی ئامێری خوێندنەوەی شاشە دەدەن پەیوەندیی خانەکان ڕوون بکاتەوە.
ئەستوورکردنی تێکستی ناو <td> جێگەی <th> ناگرێتەوە.

ڕاهێنان

١. ستوونێکی سێیەم بە ناوی «ژمارەی پیالە فرۆشراوەکان» زیاد بکە. سەردێڕەکە بە <th scope="col"> بنووسە و بۆ هەر ڕیزی داتا ژمارەیەک زیاد بکە.

٢. ڕیزێک بۆ «چای گیایی» زیاد بکە. ناوی چاکە بە <th scope="row"> بنووسە.

٣. پشکنەر بکەرەوە و دڵنیابەرەوە خانەکانی سەردێڕ توخمی <th>ـن و بەهای scopeـیان گونجاوە.

نموونە

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>
      <tr>
        <th scope="col">چا</th>
        <th scope="col">نرخ</th>
      </tr>
      <tr>
        <th scope="row">چای ڕەش</th>
        <td>2.50</td>
      </tr>
      <tr>
        <th scope="row">چای سەوز</th>
        <td>3.00</td>
      </tr>
    </table>
  </body>
</html>

خۆت تاقی بکەرەوە ↗

دەستکاری HTML بکە

ئەنجام

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