Loading :: جاري التحميل

جدول

الجدول هو تنسيق منظم لعرض البيانات على شكل صفوف وأعمدة، مما يساعد المستخدمين على فهم المعلومات المعقدة والتفاعل معها بكفاءة. يعتبر عنصر هام في العديد من واجهات المستخدم خاصة في التطبيقات التي تتطلب تنظيم كميات كبيرة من البيانات أو تحليلها أو معالجتها.

تجربة المكون

# العامود 01 العامود 02 العامود 03 العامود 04 العامود 05 إجراء
الروابط -- -- -- العلامات
الروابط -- -- -- العلامات
الروابط -- -- -- العلامات
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">العامود 01</th>
      <th scope="col">العامود 02</th>
      <th scope="col">العامود 03</th>
      <th scope="col">العامود 04</th>
      <th scope="col">العامود 05</th>
      <th scope="col">إجراء</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="form-check check-sm check-primary">
          <input class="form-check-input" type="checkbox" value="" id="checkrA">
        </div>
      </td>
      <td>
        <a href="#" class="lnk lnk-primary lnk-md">الروابط</a>
      </td>
      <td>--</td>
      <td>--</td>
      <td>--</td>
      <td>
        <span class="dga-tag tag-neutral tag-sm">العلامات</span>
      </td>
      <td class="action-cell">
        <button type="button" class="action-button dga-btn btn-sm dga-transparent">
          <i class="dga-icon dga-arrow-left-02StrokeRounded-solid"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <div class="form-check check-sm check-primary">
          <input class="form-check-input" type="checkbox" value="" id="checkrB">
        </div>
      </td>
      <td>
        <a href="#" class="lnk lnk-primary lnk-md">الروابط</a>
      </td>
      <td>--</td>
      <td>--</td>
      <td>--</td>
      <td>
        <span class="dga-tag tag-neutral tag-sm">العلامات</span>
      </td>
      <td class="action-cell">
        <button type="button" class="action-button dga-btn btn-sm dga-transparent">
          <i class="dga-icon dga-arrow-left-02StrokeRounded-solid"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <div class="form-check check-sm check-primary">
          <input class="form-check-input" type="checkbox" value="" id="checkrC">
        </div>
      </td>
      <td>
        <a href="#" class="lnk lnk-primary lnk-md">الروابط</a>
      </td>
      <td>--</td>
      <td>--</td>
      <td>--</td>
      <td>
        <span class="dga-tag tag-neutral tag-sm">العلامات</span>
      </td>
      <td class="action-cell">
        <button type="button" class="action-button dga-btn btn-sm dga-transparent">
          <i class="dga-icon dga-arrow-left-02StrokeRounded-solid"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>