تنسيقات الجداول
أنماط مرنة قابلة لإعادة الاستخدام لبناء الواجهة التي تحتاجها.
صفوف متناوبة
| العميل | المبلغ | الحالة |
|---|---|---|
| أحمد منصور | 129 US$ | مدفوع |
| سارة خليل | 249 US$ | مدفوع |
| عمر حسن | 89 US$ | قيد الانتظار |
| لينا إبراهيم | 149 US$ | نشط |
| آدم ناصر | 79 US$ | ملغي |
عرض مثال HTML
<div class="library-table-scroll">
<table class="sample-table table-striped">
<caption class="sr-only">صفوف متناوبة</caption>
<thead>
<tr>
<th scope="col">العميل</th>
<th scope="col">المبلغ</th>
<th scope="col">الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">أحمد منصور</th>
<td>129 US$</td>
<td>
<span class="badge badge-paid">
<span>
</span>مدفوع</span>
</td>
</tr>
<tr>
<th scope="row">سارة خليل</th>
<td>249 US$</td>
<td>
<span class="badge badge-paid">
<span>
</span>مدفوع</span>
</td>
</tr>
<tr>
<th scope="row">عمر حسن</th>
<td>89 US$</td>
<td>
<span class="badge badge-pending">
<span>
</span>قيد الانتظار</span>
</td>
</tr>
<tr>
<th scope="row">لينا إبراهيم</th>
<td>149 US$</td>
<td>
<span class="badge badge-active">
<span>
</span>نشط</span>
</td>
</tr>
<tr>
<th scope="row">آدم ناصر</th>
<td>79 US$</td>
<td>
<span class="badge badge-cancelled">
<span>
</span>ملغي</span>
</td>
</tr>
</tbody>
</table>
</div>جدول بحدود
| العميل | المبلغ | الحالة |
|---|---|---|
| أحمد منصور | 129 US$ | مدفوع |
| سارة خليل | 249 US$ | مدفوع |
| عمر حسن | 89 US$ | قيد الانتظار |
| لينا إبراهيم | 149 US$ | نشط |
| آدم ناصر | 79 US$ | ملغي |
عرض مثال HTML
<div class="library-table-scroll">
<table class="sample-table table-bordered">
<caption class="sr-only">جدول بحدود</caption>
<thead>
<tr>
<th scope="col">العميل</th>
<th scope="col">المبلغ</th>
<th scope="col">الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">أحمد منصور</th>
<td>129 US$</td>
<td>
<span class="badge badge-paid">
<span>
</span>مدفوع</span>
</td>
</tr>
<tr>
<th scope="row">سارة خليل</th>
<td>249 US$</td>
<td>
<span class="badge badge-paid">
<span>
</span>مدفوع</span>
</td>
</tr>
<tr>
<th scope="row">عمر حسن</th>
<td>89 US$</td>
<td>
<span class="badge badge-pending">
<span>
</span>قيد الانتظار</span>
</td>
</tr>
<tr>
<th scope="row">لينا إبراهيم</th>
<td>149 US$</td>
<td>
<span class="badge badge-active">
<span>
</span>نشط</span>
</td>
</tr>
<tr>
<th scope="row">آدم ناصر</th>
<td>79 US$</td>
<td>
<span class="badge badge-cancelled">
<span>
</span>ملغي</span>
</td>
</tr>
</tbody>
</table>
</div>جدول مضغوط
| العميل | المبلغ | الحالة |
|---|---|---|
| أحمد منصور | 129 US$ | مدفوع |
| سارة خليل | 249 US$ | مدفوع |
| عمر حسن | 89 US$ | قيد الانتظار |
| لينا إبراهيم | 149 US$ | نشط |
| آدم ناصر | 79 US$ | ملغي |
عرض مثال HTML
<div class="library-table-scroll">
<table class="sample-table table-compact">
<caption class="sr-only">جدول مضغوط</caption>
<thead>
<tr>
<th scope="col">العميل</th>
<th scope="col">المبلغ</th>
<th scope="col">الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">أحمد منصور</th>
<td>129 US$</td>
<td>
<span class="badge badge-paid">
<span>
</span>مدفوع</span>
</td>
</tr>
<tr>
<th scope="row">سارة خليل</th>
<td>249 US$</td>
<td>
<span class="badge badge-paid">
<span>
</span>مدفوع</span>
</td>
</tr>
<tr>
<th scope="row">عمر حسن</th>
<td>89 US$</td>
<td>
<span class="badge badge-pending">
<span>
</span>قيد الانتظار</span>
</td>
</tr>
<tr>
<th scope="row">لينا إبراهيم</th>
<td>149 US$</td>
<td>
<span class="badge badge-active">
<span>
</span>نشط</span>
</td>
</tr>
<tr>
<th scope="row">آدم ناصر</th>
<td>79 US$</td>
<td>
<span class="badge badge-cancelled">
<span>
</span>ملغي</span>
</td>
</tr>
</tbody>
</table>
</div>