وانەی 61 لە 67

وانەی ٦١: table، tr و td

فایلەکانی دەستپێک: فۆڵدەرێک بە ناوی lesson-61 لەگەڵ index.html و لەناو <head>ـەکەیدا توخمی <style>ی دابینکراوی هەیەکە کۆدی CSSـی تێدایە و تەنها چوارچێوە و بۆشایی بۆ خانەکانی خشتە زیاد دەکات، بۆ ئەوەی بە ڕوونی بیانبینین. ئێستا پێویست ناکات ئەم کۆدە بگۆڕیت؛ سەرنجمان لەسەر توخمەکانی HTMLـە.

index.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>
    <p>چای ڕەش 2.50 دەکات، چای سەوز 3.00 دەکات، و چای گیایی 2.75 دەکات.</p>
  </body>
</html>

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

بەشی ١: بۆچی خشتە table؟ بەشی ٢: خشتەکە دروست بکە بەشی ٣: ڕیزێک زیاد بکە، و خشتە بۆ داتا بەکاربهێنە

بەشی ١: بۆچی خشتە table؟

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

لە HTMLدا، خشتە بە توخمی <table> دروست دەکەین. لەناویدا، هەر ڕیزێک بە <tr> دروست دەکرێت، کە کورتکراوەی table rowـە، واتە ڕیزی خشتە. لەناو هەر ڕیزێکیشدا، خانەکانی داتا بە <td> دروست دەکەین، کە کورتکراوەی table dataـە.

بەشی ٢: خشتەکە دروست بکە

پەرەگرافەکە بگۆڕە بە خشتەیەک کە دوو ڕیزی هەبێت، و لە هەر ڕیزێکدا دوو خانە:

<table>
  <tr>
    <td>چای ڕەش</td>
    <td>250</td>
  </tr>
  <tr>
    <td>چای سەوز</td>
    <td>500</td>
  </tr>
</table>

خانەکان لە دوو ڕیز و دوو ستووندا ڕێک دەخرێن. چوارچێوە و بۆشایی خانەکان لە کۆدی CSSـی دابینکراوی ناو <style>ـەوە دێن.

سەرنج بدە بۆ ستوونەکان توخمێکی جیاوازمان نەنووسی. ستوونەکان لە ڕیزبوونی خانەکانەوە پێک دێن: یەکەم خانەی هەر ڕیزێک لە ستوونی یەکەمدایە، و دووەم خانە لە ستوونی دووەمدا.

تێبینی: چونکە ئاراستەی لاپەڕەکەمان rtlـە، ستوونی یەکەم لە لای ڕاستەوە دەردەکەوێت.

بەشی ٣: ڕیزێک زیاد بکە، و خشتە بۆ داتا بەکاربهێنە

بۆ زیادکردنی ڕیزێک، ئەم <tr>ـە پێش تاگی کۆتایی </table> زیاد بکە. لەم خشتەیەدا، ڕیزە نوێیەکەش دوو خانەی هەیە:

<tr>
  <td>چای گیایی</td>
  <td>2.75</td>
</tr>

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

خشتە بۆ داتایەک بەکاربهێنە کە پەیوەندیی ڕیز و ستوونی هەیە. بۆ ڕێکخستنی شوێنی بەشەکانی لاپەڕە بەکاری مەهێنە؛ ئەوە کاری CSSـە.

هەڵەیەکی باو: خشتە بەکاربهێنیت بۆ ڕێکخستنی شوێنی بەشەکانی لاپەڕە.

پوختە

<table> هەموو خشتەکە لەخۆ دەگرێت، <tr> ڕیزێک دروست دەکات، و <td> خانەی داتا دروست دەکات.
ستوونەکان لە ڕیزبوونی خانەکانەوە پێک دێن. لەم خشتە سادەیەدا، هەر ڕیزێک دوو خانەی هەیە.
چوارچێوە و بۆشایی خانەکان لەم وانەیەدا لە کۆدی CSSـی ناو <style>ـەوە دێن.
خشتە بۆ داتا بەکاربهێنە، نەک بۆ ڕێکخستنی شوێنی بەشەکانی لاپەڕە.

ڕاهێنان

١. ڕیزێکی چوارەم بۆ «چای نەعنا» زیاد بکە، لەگەڵ نرخێک.

٢. بۆ پیشاندانی ژمارەی پیالە فرۆشراوەکان، خانەیەکی سێیەم بۆ هەر ڕیزێک زیاد بکە و ژمارەیەکی تێدا بنووسە. بەمە ستوونێکی سێیەم پێک دێت.

٣. پشکنەری وانەی ٧ بکەرەوە و توخمەکانی <tr> و <td> لە پێکهاتەی لاپەڕەکەدا بدۆزەرەوە

نموونە

html

<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>نرخی چا</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <h1>نرخی چا</h1>
    <table>
      <tr>
        <td>چای ڕەش</td>
        <td>2.50</td>
      </tr>
      <tr>
        <td>چای سەوز</td>
        <td>3.00</td>
      </tr>
      <tr>
        <td>چای گیایی</td>
        <td>2.75</td>
      </tr>
    </table>
  </body>
</html>

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

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

ئەنجام

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