خشتەکان لە HTML

خشتەکان (Tables) ئامرازێکی گرنگن بۆ نیشاندانی داتا و زانیارییەکان بە شێوەیەکی ڕێکخراو لە ڕیز و ستووندا. بۆ دروستکردنی خشتە، ئێمە زنجیرەیەک تاگی تایبەت بەکاردەهێنین.

پێکهاتەی سەرەکی خشتە

بۆ دروستکردنی خشتە، سەرەتا پێویستمان بە تاگی <table> هەیە. لەناو ئەم تاگەدا، ڕیزەکان بە <tr> (Table Row) و خانەکان بە <td> (Table Data) دیاری دەکرێن.

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

سەردێڕی خشتە (Table Headers)

بۆ ئەوەی بزانیت هەر ستوونێک چی نیشان دەدات، بەکارهێنانی <th> پێویستە. ئەم تاگە دەقەکە بە شێوەیەکی خۆکار ئەستوور (Bold) و ناوەڕاست دەکات.

<table>
  <tr>
    <th>ناوی قوتابی</th>
    <th>نمرە</th>
  </tr>
</table>

جوانکاری بە CSS

بە تەنها HTML خشتەکان بێ سنوور دەردەکەون. بۆ ئەوەی خشتەکە دیار بێت، دەبێت CSS بەکاربهێنین. تایبەتمەندی border-collapse: collapse; زۆر گرنگە بۆ ئەوەی سنووری خانەکان نەبن بە دوو هێڵ.

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

یەکخستنی خانەکان (Colspan و Rowspan)

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

• colspan: بۆ یەکخستنی ستوونەکان.
• rowspan: بۆ یەکخستنی ڕیزەکان.

<td colspan='2'>ئەم خانەیە دوو ستوون دەگرێتەوە</td>
<td rowspan='2'>ئەم خانەیە دوو ڕیز دەگرێتەوە</td>

گرووپکردنی ستوونەکان بە Colgroup

ئەگەر بتەوێت ستایلێک بۆ کۆمەڵە ستوونێک دابنێیت بەبێ ئەوەی لەناو هەموو خانەکاندا دووبارەی بکەیتەوە، <colgroup> بەکاردێت.

<colgroup>
  <col style='background-color: #f2f2f2'>
  <col>
</colgroup>

ئەرکی فێربوون (Code Challenge)