وانەی 66 لە 67

وانەی ٦٦: پێداچوونەوە: خشتەکان

فایلی دەستپێک: lesson-66.html، لاپەڕەیەکی تەواو کە خشتەیەکی کێشەداری تێدایە. کۆدی CSSـی لەناو <style> تەنها چوارچێوە و بۆشایی بۆ خانەکان زیاد دەکات.

<!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>
      <thead>
        <tr>
          <td><strong>ڕۆژ</strong></td>
          <td><strong>کاتی کردنەوە</strong></td>
          <td><strong>کاتی داخستن</strong></td>
        </tr>
      </thead>
      <tr>
        <th scope="row">دووشەممە</th>
        <td>8:00</td>
        <td>22:00</td>
      </tr>
      <tr>
        <th scope="row">سێشەممە</th>
        <td>8:00</td>
        <td>22:00</td>
      </tr>
      <tr>
        <th scope="row">هەینی</th>
        <td colspan="2">داخراوە</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

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

بەشی ١: ناوی توخمەکە بڵێ بەشی ٢: خشتەکە چاک بکەرەوە

بەشی ١: ناوی توخمەکە بڵێ

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

پرسیارەکان:

١. توخمێک کە تەواوی خشتەکە لەخۆ دەگرێت.

٢. یەک ڕیزی خشتە.

٣. خانەیەکی داتا.

٤. خانەیەک کە سەردێڕی ستوونێکە.

٥. ناونیشانێک بۆ خودی خشتەکە.

٦. گروپی ڕیزەکانی سەردێڕ.

٧. خانەیەک کە دوو ستوون دەگرێتەوە.

٨. خانەیەک کە دوو ڕیز دەگرێتەوە.

وەڵامەکان:

١. وەڵام: <table>.

٢. وەڵام: <tr>.

٣. وەڵام: <td>.

٤. وەڵام: <th scope="col">.

٥. وەڵام: <caption>، وەک یەکەم توخم لەناو <table>.

٦. وەڵام: <thead>.

٧. وەڵام: تایبەتمەندی colspan="2" لەسەر خانەکە.

٨. وەڵام: تایبەتمەندی rowspan="2" لەسەر خانەکە.

بەشی ٢: خشتەکە چاک بکەرەوە

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

چاککردنەوەی ١: خانەکانی سەردێڕ بە <td> و <strong> نووسراون. تێکستەکە ئەستوورە، بەڵام خانەکان وەک سەردێڕ دیاری نەکراون. <strong> لابەرە و خانەکان بگۆڕە بۆ <th scope="col">.

<tr>
  <th scope="col">ڕۆژ</th>
  <th scope="col">کاتی کردنەوە</th>
  <th scope="col">کاتی داخستن</th>
</tr>

باشکردنی ٢: خشتەکە <caption>ی نییە. نەبوونی <caption> بە تەنها هەڵەی HTML نییە، بەڵام زیادکردنی لێرەدا خشتەکە ڕوونتر دەناسێنێت. ئەم دێڕە وەک یەکەم توخم لەناو <table> زیاد بکە:

<caption>کاتەکانی کارکردن</caption>

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

چاککردنەوەی ٤: ڕیزی هەینی خانەیەکی زیادەی هەیە. خانەی ناوی ڕۆژ یەک ستوون دەگرێتەوە، و خانەی «داخراوە» بە colspan="2" دوو ستوون دەگرێتەوە. کەواتە سێ ستوونەکە پڕ بوونەتەوە. <td></td>ـە زیادەکە لابەرە.

<tr>
  <th scope="row">هەینی</th>
  <td colspan="2">داخراوە</td>
</tr>

خشتەکە سێ ستوونی هەیە و ناونیشانەکە لە سەرووی دەردەکەوێت. پشکنەر بکەرەوە و <caption>، <thead> و <tbody> لە پێکهاتەی خشتەکەدا پیشان بدە.

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

پوختە

<th> بۆ خانەکانی سەردێڕ و <td> بۆ خانەکانی داتا بەکاربهێنە. بە scope پەیوەندیی سەردێڕەکە دیاری بکە.
<caption> ناونیشانی خودی خشتەکەیە و دەبێت یەکەم توخم بێت لەناو <table>.
<thead>، <tbody> و <tfoot> ڕیزەکانی سەردێڕ، داتا و پوختە گروپ دەکەن.
دوای بەکارهێنانی colspan یان rowspan، ئەو شوێنانە بژمێرە کە خانەکان دەیگرن، نەک تەنها ژمارەی خانە نووسراوەکان.

ڕاهێنان

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

نموونە

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>
          <th scope="col">کاتی داخستن</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">دووشەممە</th>
          <td>8:00</td>
          <td>22:00</td>
        </tr>
        <tr>
          <th scope="row">سێشەممە</th>
          <td>8:00</td>
          <td>22:00</td>
        </tr>
        <tr>
          <th scope="row">هەینی</th>
          <td colspan="2">داخراوە</td>
        </tr>
      </tbody>
    </table>
  </body>
</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>
          <th scope="col">کاتی داخستن</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">دووشەممە</th>
          <td>8:00</td>
          <td>22:00</td>
        </tr>
        <tr>
          <th scope="row">سێشەممە</th>
          <td>8:00</td>
          <td>22:00</td>
        </tr>
        <tr>
          <th scope="row">هەینی</th>
          <td colspan="2">داخراوە</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

ئەنجام

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