إطار Bootstrap 5

الجداول

13 دقيقة الدرس 12 من 40

الجداول في Bootstrap 5

يوفر Bootstrap 5 تنسيقاً شاملاً للجداول يحول جداول HTML العادية إلى عروض بيانات جميلة ومتجاوبة. الجداول ضرورية لتنظيم وعرض البيانات المنظمة بتنسيق واضح وقابل للمسح.

1. أنماط الجدول الأساسية

ابدأ بفئة .table لتطبيق تنسيق Bootstrap الافتراضي على أي عنصر <table>.

<!-- جدول Bootstrap أساسي -->
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>الاسم الأول</th>
            <th>اسم العائلة</th>
            <th>البريد الإلكتروني</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>أحمد</td>
            <td>محمد</td>
            <td>ahmad@example.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>فاطمة</td>
            <td>علي</td>
            <td>fatima@example.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>خالد</td>
            <td>حسن</td>
            <td>khaled@example.com</td>
        </tr>
    </tbody>
</table>
        

البنية: يستخدم الجدول المنظم جيداً <thead> للرؤوس، و<tbody> لمحتوى الجسم، واختيارياً <tfoot> لمحتوى التذييل.

<!-- جدول مع تذييل -->
<table class="table">
    <thead>
        <tr>
            <th>المنتج</th>
            <th>الكمية</th>
            <th>السعر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>المنتج أ</td>
            <td>5</td>
            <td>200 ريال</td>
        </tr>
        <tr>
            <td>المنتج ب</td>
            <td>3</td>
            <td>120 ريال</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">الإجمالي</th>
            <th>320 ريال</th>
        </tr>
    </tfoot>
</table>
        

2. متغيرات الجدول (مخطط، محاط، تمرير)

يقدم Bootstrap عدة متغيرات للجدول لتحسين القراءة والتفاعل.

<!-- جدول مخطط -->
<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>الاسم</th>
            <th>الحالة</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>مشروع ألفا</td>
            <td>نشط</td>
        </tr>
        <tr>
            <td>2</td>
            <td>مشروع بيتا</td>
            <td>معلق</td>
        </tr>
        <tr>
            <td>3</td>
            <td>مشروع جاما</td>
            <td>مكتمل</td>
        </tr>
    </tbody>
</table>

<!-- جدول محاط -->
<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>الاسم</th>
            <th>القسم</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>أليس</td>
            <td>الهندسة</td>
        </tr>
        <tr>
            <td>2</td>
            <td>بوب</td>
            <td>التسويق</td>
        </tr>
    </tbody>
</table>

<!-- جدول بدون حدود -->
<table class="table table-borderless">
    <thead>
        <tr>
            <th>العنصر</th>
            <th>الوصف</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>الميزة 1</td>
            <td>وصف الميزة</td>
        </tr>
    </tbody>
</table>

<!-- جدول قابل للتمرير -->
<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>المنتج</th>
            <th>السعر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>لابتوب</td>
            <td>3999 ريال</td>
        </tr>
        <tr>
            <td>2</td>
            <td>ماوس</td>
            <td>115 ريال</td>
        </tr>
    </tbody>
</table>

<!-- متغيرات مدمجة -->
<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>الاسم</th>
            <th>البريد الإلكتروني</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>أحمد محمد</td>
            <td>ahmad@example.com</td>
        </tr>
    </tbody>
</table>
        

دمج الفئات: يمكنك دمج عدة فئات جدول مثل table-striped table-hover للحصول على تأثيرات بصرية محسنة.

3. الجداول المتجاوبة

اجعل الجداول تتمرر أفقياً على الشاشات الصغيرة بلفها في حاوية متجاوبة.

<!-- دائماً متجاوب -->
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>العنوان 1</th>
                <th>العنوان 2</th>
                <th>العنوان 3</th>
                <th>العنوان 4</th>
                <th>العنوان 5</th>
                <th>العنوان 6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>بيانات 1</td>
                <td>بيانات 2</td>
                <td>بيانات 3</td>
                <td>بيانات 4</td>
                <td>بيانات 5</td>
                <td>بيانات 6</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- متجاوب عند نقاط انقطاع محددة -->
<div class="table-responsive-sm">
    <!-- قابل للتمرير أقل من 576px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-md">
    <!-- قابل للتمرير أقل من 768px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-lg">
    <!-- قابل للتمرير أقل من 992px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-xl">
    <!-- قابل للتمرير أقل من 1200px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-xxl">
    <!-- قابل للتمرير أقل من 1400px -->
    <table class="table">...</table>
</div>
        

الموبايل أولاً: استخدم الجداول المتجاوبة للجداول الثقيلة بالبيانات مع أعمدة كثيرة لا تتناسب مع الشاشات الصغيرة. سيتمرر الجدول أفقياً بدلاً من كسر التخطيط.

4. أنماط رأس الجدول

خصص مظهر رؤوس الجداول بمتغيرات الألوان.

<!-- رأس جدول داكن -->
<table class="table">
    <thead class="table-dark">
        <tr>
            <th>#</th>
            <th>الاسم</th>
            <th>البريد الإلكتروني</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>أحمد محمد</td>
            <td>ahmad@example.com</td>
        </tr>
    </tbody>
</table>

<!-- رأس جدول فاتح -->
<table class="table">
    <thead class="table-light">
        <tr>
            <th>#</th>
            <th>المنتج</th>
            <th>السعر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>لابتوب</td>
            <td>3999 ريال</td>
        </tr>
    </tbody>
</table>

<!-- رأس جدول أساسي -->
<table class="table">
    <thead class="table-primary">
        <tr>
            <th>العمود 1</th>
            <th>العمود 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>بيانات</td>
            <td>بيانات</td>
        </tr>
    </tbody>
</table>
        

متغيرات الألوان: استخدم أي فئة لون سياقية (table-primary, table-success, table-danger, إلخ) على عناصر <thead>.

5. الجداول الصغيرة وألوان الجداول

أنشئ جداولاً مدمجة وطبق ألواناً سياقية على الصفوف أو الخلايا.

<!-- جدول صغير -->
<table class="table table-sm">
    <thead>
        <tr>
            <th>#</th>
            <th>الاسم</th>
            <th>الحالة</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>صف مدمج</td>
            <td>نشط</td>
        </tr>
        <tr>
            <td>2</td>
            <td>صف آخر</td>
            <td>معلق</td>
        </tr>
    </tbody>
</table>

<!-- ألوان الصفوف السياقية -->
<table class="table">
    <thead>
        <tr>
            <th>الحالة</th>
            <th>الرسالة</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <td>معلومات</td>
            <td>معلومات أساسية</td>
        </tr>
        <tr class="table-success">
            <td>نجاح</td>
            <td>العملية نجحت</td>
        </tr>
        <tr class="table-danger">
            <td>خطأ</td>
            <td>فشلت العملية</td>
        </tr>
        <tr class="table-warning">
            <td>تحذير</td>
            <td>تابع بحذر</td>
        </tr>
        <tr class="table-info">
            <td>معلومات</td>
            <td>تفاصيل إضافية</td>
        </tr>
    </tbody>
</table>

<!-- ألوان الخلايا الفردية -->
<table class="table">
    <thead>
        <tr>
            <th>الاسم</th>
            <th>الحالة</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>المهمة 1</td>
            <td class="table-success">مكتمل</td>
        </tr>
        <tr>
            <td>المهمة 2</td>
            <td class="table-warning">قيد التقدم</td>
        </tr>
        <tr>
            <td>المهمة 3</td>
            <td class="table-danger">محظور</td>
        </tr>
    </tbody>
</table>
        

6. تسميات الجداول والمحاذاة العمودية

<!-- جدول مع تسمية -->
<table class="table">
    <caption>قائمة المستخدمين وتفاصيلهم</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>الاسم</th>
            <th>البريد الإلكتروني</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>أحمد محمد</td>
            <td>ahmad@example.com</td>
        </tr>
    </tbody>
</table>

<!-- تسمية في الأعلى -->
<table class="table caption-top">
    <caption>دليل الموظفين (تسمية في الأعلى)</caption>
    <thead>
        <tr>
            <th>الاسم</th>
            <th>القسم</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أليس</td>
            <td>الهندسة</td>
        </tr>
    </tbody>
</table>

<!-- المحاذاة العمودية -->
<table class="table align-middle">
    <thead>
        <tr>
            <th>الصورة</th>
            <th>المنتج</th>
            <th>التفاصيل</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img src="product.jpg" alt="منتج" style="height: 50px;"></td>
            <td>اسم المنتج</td>
            <td>يذهب الوصف هنا<br>مع أسطر متعددة</td>
        </tr>
    </tbody>
</table>

<!-- محاذاة الصف/الخلية الفردية -->
<table class="table">
    <tbody>
        <tr class="align-top">
            <td>محاذاة للأعلى</td>
            <td>محتوى<br>مع<br>أسطر<br>متعددة</td>
        </tr>
        <tr class="align-middle">
            <td>محاذاة للوسط</td>
            <td>محتوى<br>مع<br>أسطر<br>متعددة</td>
        </tr>
        <tr class="align-bottom">
            <td>محاذاة للأسفل</td>
            <td>محتوى<br>مع<br>أسطر<br>متعددة</td>
        </tr>
    </tbody>
</table>
        

إمكانية الوصول: تساعد تسميات الجداول قارئات الشاشة على فهم غرض الجدول. قم دائماً بتضمينها لتحسين إمكانية الوصول.

7. مثال عملي: جدول لوحة التحكم

<div class="container py-5">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title mb-0">الطلبات الأخيرة</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>رقم الطلب</th>
                            <th>العميل</th>
                            <th>التاريخ</th>
                            <th>المبلغ</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>#12345</strong></td>
                            <td>أحمد محمد</td>
                            <td>2024-05-15</td>
                            <td>500 ريال</td>
                            <td><span class="badge bg-success">مكتمل</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">عرض</button>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>#12346</strong></td>
                            <td>فاطمة علي</td>
                            <td>2024-05-16</td>
                            <td>358 ريال</td>
                            <td><span class="badge bg-warning">معلق</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">عرض</button>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>#12347</strong></td>
                            <td>خالد حسن</td>
                            <td>2024-05-16</td>
                            <td>799 ريال</td>
                            <td><span class="badge bg-info">تم الشحن</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">عرض</button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <th colspan="3">الإجمالي</th>
                            <th>1657 ريال</th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
        

تمرين تطبيقي

المهمة: أنشئ جدول مخزون المنتجات بالمتطلبات التالية:

5 أعمدة على الأقل (المعرف، اسم المنتج، الفئة، المخزون، السعر)
استخدم صفوفاً مخططة وتأثير التمرير
خلفية رأس داكنة
غلاف متجاوب للأجهزة المحمولة
ترميز لون مستويات المخزون: أخضر للمخزون العالي (>50)، أصفر للمتوسط (10-50)، أحمر للمنخفض (<10)
أضف صف تذييل بإجمالي العدد
قم بتضمين تسمية تصف الجدول

إضافي: اجعله جدولاً صغيراً وأضف أزرار إجراء في العمود الأخير.

الملخص

استخدم فئة .table لتنسيق الجدول الأساسي لـ Bootstrap
.table-striped تضيف تخطيطاً على شكل حمار وحشي للصفوف
.table-bordered تضيف حدوداً لجميع الخلايا
.table-hover تمكن حالة التمرير على الصفوف
.table-responsive تجعل الجداول تتمرر أفقياً على الشاشات الصغيرة
استخدم فئات نقطة انقطاع المتجاوبة (table-responsive-sm/md/lg/xl/xxl) للتمرير الشرطي
.table-dark أو .table-light تنسق الرأس
.table-sm تنشئ جداولاً مدمجة بحشو مخفض
فئات الألوان السياقية (table-primary, table-success, إلخ) تسلط الضوء على الصفوف أو الخلايا
.caption-top تضع التسمية فوق الجدول
فئات المحاذاة العمودية (align-top, align-middle, align-bottom) تتحكم في محاذاة محتوى الخلية