وانەی 65 لە 67

وانەی ٦٥: یەکخستنی خانەکان: colspan و rowspan

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

<!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>

    <h2>نموونەی ستوونەکان</h2>
    <table>
      <tr>
        <th scope="col">نرخەکان</th>
        <td></td>
      </tr>
      <tr>
        <td>چای ڕەش</td>
        <td>250</td>
      </tr>
    </table>

    <h2>نموونەی ڕیزەکان</h2>
    <table>
      <tr>
        <th scope="row">ڕۆژانی کارکردن</th>
        <td>بەیانی</td>
      </tr>
      <tr>
        <td></td>
        <td>ئێوارە</td>
      </tr>
    </table>
  </body>
</html>

دا دوو خشتەی بچووکمان هەیە بۆ تاقیکردنەوەی هەر تایبەتمەندییەک بە جیا.

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

بەشی ١: colspan و rowspan بە جیا بەشی ٢: هەردووکیان پێکەوە بەکاربهێنە بەشی ٣: شوێنی خانەکان بژمێرە

بەشی ١: colspan و rowspan بە جیا

هەندێک جار دەمانەوێت یەک خانە شوێنی چەند خانەیەک بگرێتەوە. تایبەتمەندی colspan وا دەکات خانەیەک بە چەند ستووندا درێژ ببێتەوە. تایبەتمەندی rowspan هەمان کار بە ئاراستەی ڕیزەکان دەکات.

لە خشتەی یەکەم، colspan="2" بۆ خانەی «نرخەکان» زیاد بکە و خانە بەتاڵەکەی تەنیشتی لابەرە:

<table>
  <tr>
    <th scope="col" colspan="2">نرخەکان</th>
  </tr>
  <tr>
    <td>چای ڕەش</td>
    <td>250</td>
  </tr>
</table>

خانەی «نرخەکان» ئێستا شوێنی هەردوو ستوونەکە دەگرێتەوە.

ئێستا لە خشتەی دووەم، rowspan="2" بۆ خانەی «ڕۆژانی کارکردن» زیاد بکە و خانە بەتاڵەکەی ڕیزی دووەم لابەرە:

<table>
  <tr>
    <th scope="row" rowspan="2">ڕۆژانی کارکردن</th>
    <td>بەیانی</td>
  </tr>
  <tr>
    <td>ئێوارە</td>
  </tr>
</table>

خانەی «ڕۆژانی کارکردن» بە هەردوو ڕیزەکەدا درێژ بووەتەوە. ڕیزی دووەم تەنها یەک خانەی نووسراوی هەیە، چونکە شوێنی ستوونی یەکەم پێشتر بە خانەکەی سەرەوە گیراوە.

بەشی ٢: هەردووکیان پێکەوە بەکاربهێنە

ئێستا با هەردوو تایبەتمەندییەکە لە خشتەیەکی کاتەکانی کارکردندا بەکاربهێنین. ئەم خشتەیە سێ ستوونی هەیە:

<table>
  <caption>کاتەکانی کارکردن</caption>
  <tr>
    <th scope="col">ڕۆژان</th>
    <th scope="col">ماوە</th>
    <th scope="col">کاتژمێر</th>
  </tr>
  <tr>
    <th scope="row" rowspan="2">ڕۆژانی کارکردن</th>
    <td>بەیانی</td>
    <td>8:00 تا 12:00</td>
  </tr>
  <tr>
    <td>ئێوارە</td>
    <td>16:00 تا 22:00</td>
  </tr>
  <tr>
    <th scope="row">کۆتایی هەفتە</th>
    <td colspan="2">داخراوە</td>
  </tr>
</table>

خشتەکە لەژێر دوو نموونەکە زیاد بکە، پاشەکەوتی بکە و نوێی بکەرەوە. سەنجی خانەی «ڕۆژانی کارکردن» کە دوو ڕیز دەگرێتەوە، و خانەی «داخراوە» کە دوو ستوون دەگرێتەوە.

بەشی ٣: شوێنی خانەکان بژمێرە

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

لەم خشتە سێ‌ستوونەدا، هەر ڕیزێک دەبێت سێ شوێنی ستوون پڕ بکاتەوە. خانەیەک بە colspan="2" دوو شوێن دەگرێت. خانەیەکیش کە بە rowspan لە ڕیزی سەرەوە درێژ بووەتەوە، هێشتا شوێنی خۆی دەگرێت.

ڕیزی بەیانی سێ خانەی هەیە. ڕیزی ئێوارە دوو خانەی نووسراوی هەیە، لەگەڵ ئەو خانەیەی لە سەرەوە درێژ بووەتەوە. دوا ڕیزیش یەک خانەی سەردێڕ و خانەیەکی هەیە کە دوو ستوون دەگرێتەوە.

<td></td>ێکی زیادە بۆ کۆتایی دوا ڕیز زیاد بکە. پاشەکەوتی بکە و نوێی بکەرەوە. ستوونێکی زیادە دروست دەبێت و ڕێکخستنی خشتەکە دەگۆڕێت. پاشان خانە زیادەکە لابەرە.

هەڵەیەکی باو: دوای بەکارهێنانی colspan یان rowspan، خانەیەکی زیادە بهێڵیتەوە. ئەو شوێنانە بژمێرە کە خانەکان دەیگرن، نەک تەنها ژمارەی تاگەکان.

پوختە

colspan خانەیەک بە چەند ستووندا درێژ دەکاتەوە.
rowspan خانەیەک بە چەند ڕیزدا درێژ دەکاتەوە.
خانەی درێژکراوە شوێنی خانەکانی تر دەگرێتەوە؛ خانەی زیادە لەو شوێنانەدا مەنووسە.
ئەگەر خشتەکە ڕێک نەبوو، شوێنی خانەکان بژمێرە و کاریگەریی هەردوو تایبەتمەندییەکە لەبەرچاو بگرە.

ڕاهێنان

١. ڕیزێکی جیا بۆ «هەینی» زیاد بکە، بە سێ خانە: ڕۆژ، ماوە و کاتژمێر.

٢. ڕیزێکی تر بۆ ڕۆژێکی داخراو زیاد بکە. ناوی ڕۆژەکە لە خانەی یەکەم بنووسە، و بە colspan="2" دوو ستوونەکەی تر بۆ «داخراوە» یەک بخە.

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

نموونە

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>
    <table>
      <caption>کاتەکانی کارکردن</caption>
      <tr>
        <th scope="col">ڕۆژان</th>
        <th scope="col">ماوە</th>
        <th scope="col">کاتژمێر</th>
      </tr>
      <tr>
        <th scope="row" rowspan="2">ڕۆژانی کارکردن</th>
        <td>بەیانی</td>
        <td>8:00 تا 12:00</td>
      </tr>
      <tr>
        <td>ئێوارە</td>
        <td>16:00 تا 22:00</td>
      </tr>
      <tr>
        <th scope="row">کۆتایی هەفتە</th>
        <td colspan="2">داخراوە</td>
      </tr>
    </table>
  </body>
</html>

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

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

ئەنجام

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