Bootstrap: الجداول

Q: هل تُنسّق الأزرار أو الشارات بشكل صحيح داخل الجداول؟

بالتأكيد لا توجد مشكلة. جميع مكوّنات Bootstrap تحافظ على تنسيقها الطبيعي داخل الجداول. يمكنك وضع أزرار وشارات ومفاتيح تبديل داخل <td> .

Q: هل يمكن للجداول الفرز/البحث/الترقيم؟

table في Bootstrap يتعامل فقط مع التنسيق. الفرز/البحث/الترقيم يحتاج إلى التنفيذ بالاشتراك مع مكتبات JavaScript (مثل DataTables).

Q: هل يظهر شريط التمرير للجداول المتجاوبة فقط عند الحاجة؟

نعم. table-responsive يضبط overflow-x: auto ؛ يظهر شريط التمرير الأفقي فقط عندما يتجاوز عرض الجدول عرض الحاوية، ويختفي تلقائيًا عندما يكون المحتوى أقل.

آخر تحديث: 2026-08-26

1. مقدمة

(1) المتطلبات الأساسية

الدرس 11: مجموعات القوائم والشارات

(2) 🎯 ما الذي ستتعلّمه

استخدام .table لتجميل جداول HTML بسرعة
استخدام تنويعات مثل table-striped، table-hover
التحكم في الحدود باستخدام table-bordered، table-borderless
تلوين الصفوف/الأعمدة باستخدام table-{color}
إنشاء جداول متجاوبة باستخدام table-responsive

(3) المشكلة

أنشأت Alice صفحة إدارة مستخدمين تحتاج إلى عرض معرّف المستخدم والاسم والبريد الإلكتروني وتاريخ التسجيل وأزرار الإجراءات — عرض البيانات في table أكثر وضوحًا من استخدام البطاقات أو القوائم.

(4) الحل

الجداول هي الطريقة الأساسية لعرض البيانات. فئة جدول Bootstrap تتطلب فقط إضافة .table إلى <table> للحصول على نمط جدول نظيف واحترافي.

(5) الفائدة

مع فئات أدوات الجداول في Bootstrap، يمكنك إنشاء جداول بيانات أنيقة واحترافية بسرعة، مما يجعل البيانات واضحة بنظرة واحدة.

2. الجداول الأساسية

▶ مثال: الجداول الأساسية

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Basic Table</h5>
    <table class="table">
      <thead>
        <tr><th>#</th><th>Name</th><th>Email</th><th>Status</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Active</td></tr>
        <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>Active</td></tr>
        <tr><td>3</td><td>Charlie</td><td>charlie@example.com</td><td>Inactive</td></tr>
      </tbody>
    </table>

    <h5>Striped Rows</h5>
    <table class="table table-striped">
      <thead>
        <tr><th>#</th><th>Product</th><th>Price</th><th>Stock</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Laptop</td><td>$1,200</td><td>15</td></tr>
        <tr><td>2</td><td>Monitor</td><td>$350</td><td>42</td></tr>
        <tr><td>3</td><td>Keyboard</td><td>$80</td><td>108</td></tr>
      </tbody>
    </table>

    <h5>Hover + Bordered</h5>
    <table class="table table-bordered table-hover">
      <thead class="table-dark">
        <tr><th>#</th><th>City</th><th>Country</th><th>Population</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Tokyo</td><td>Japan</td><td>37M</td></tr>
        <tr><td>2</td><td>New York</td><td>USA</td><td>8.5M</td></tr>
        <tr><td>3</td><td>London</td><td>UK</td><td>9M</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

▶ جرّب الكود

3. تنويعات الجداول

الفئة	التأثير	السيناريو
`table`	تنسيق أساسي (طباعة، هوامش، خطوط أفقية)	جدول بسيط
`table-striped`	صفوف بخلفية رمادية فاتحة متناوبة	البيانات/التقارير
`table-bordered`	جميع الخلايا لها حدود	عندما يكون الفصل الواضح مطلوبًا
`table-borderless`	بلا حدود	تصميم بسيط
`table-hover`	خلفية أغمق عند التمرير على الصف	جداول تفاعلية
`table-sm`	نسخة مضغوطة (المسافة الداخلية النصف)	جداول كثيفة البيانات

4. ألوان الصفوف/الأعمدة

HTML

<table class="table">
  <thead>
    <tr><th>Task</th><th>Status</th><th>Due</th></tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Design review</td><td>Completed</td><td>Jun 10</td>
    </tr>
    <tr class="table-warning">
      <td>Frontend implementation</td><td>In Progress</td><td>Jun 20</td>
    </tr>
    <tr class="table-danger">
      <td>Database migration</td><td>Overdue</td><td>Jun 5</td>
    </tr>
  </tbody>
</table>

▶ جرّب الكود

الفئة	المعنى	متى تستخدمه
`table-primary`	أزرق	صف معلوماتي
`table-success`	أخضر	نجاح/مكتمل
`table-danger`	أحمر	خطأ/متأخر
`table-warning`	أصفر	تحذير/قيد التنفيذ
`table-info`	سماوي	تلميح/معلومات
`table-active`	رمادي	محدد/مميّز

5. ألوان الترويسة

HTML

<table class="table">
  <thead class="table-dark">
    <tr><th>Dark Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

<table class="table">
  <thead class="table-light">
    <tr><th>Light Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

▶ جرّب الكود

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

HTML

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr><th>#</th><th>Name</th><th>Email</th><th>Phone</th><th>Address</th><th>City</th><th>Country</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>+1-555-0100</td><td>123 Main St</td><td>New York</td><td>USA</td><td>Active</td></tr>
    </tbody>
  </table>
</div>

▶ جرّب الكود

7. المزيد من أمثلة الجداول

▶ مثال: جدول بيانات شامل

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <table class="table table-striped table-bordered table-hover">
      <thead class="table-dark">
        <tr>
          <th>Order ID</th>
          <th>Customer</th>
          <th>Product</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#1024</td>
          <td>Alice Chen</td>
          <td>Wireless Mouse</td>
          <td>$29.99</td>
          <td><span class="badge bg-success">Shipped</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1025</td>
          <td>Bob Wang</td>
          <td>Mechanical Keyboard</td>
          <td>$89.99</td>
          <td><span class="badge bg-warning">Processing</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr class="table-danger">
          <td>#1026</td>
          <td>Charlie Li</td>
          <td>USB-C Hub</td>
          <td>$45.00</td>
          <td><span class="badge bg-danger">Cancelled</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1027</td>
          <td>Diana Zhang</td>
          <td>Monitor Stand</td>
          <td>$34.99</td>
          <td><span class="badge bg-success">Delivered</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

▶ جرّب الكود

▶ مثال: جدول مخطط مع تمرير

HTML

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Player</th>
      <th>Score</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>PlayerOne</td>
      <td>9,850</td>
      <td>Expert</td>
    </tr>
    <tr>
      <td>2</td>
      <td>SpeedRunner</td>
      <td>8,720</td>
      <td>Advanced</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Newbie99</td>
      <td>4,310</td>
      <td>Intermediate</td>
    </tr>
    <tr>
      <td>4</td>
      <td>GameMaster</td>
      <td>2,105</td>
      <td>Beginner</td>
    </tr>
  </tbody>
</table>

▶ جرّب الكود

▶ مثال: جدول مع شارات وأزرار

HTML

<table class="table table-sm">
  <thead class="table-light">
    <tr>
      <th>Task</th>
      <th>Priority</th>
      <th>Assignee</th>
      <th>Due Date</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Design homepage</td>
      <td><span class="badge bg-danger">High</span></td>
      <td>Alice</td>
      <td>2026-07-10</td>
      <td><button class="btn btn-success btn-sm">Complete</button></td>
    </tr>
    <tr>
      <td>Write API docs</td>
      <td><span class="badge bg-warning">Medium</span></td>
      <td>Bob</td>
      <td>2026-07-15</td>
      <td><button class="btn btn-outline-primary btn-sm">Edit</button></td>
    </tr>
    <tr>
      <td>Fix login bug</td>
      <td><span class="badge bg-danger">Critical</span></td>
      <td>Charlie</td>
      <td>2026-07-08</td>
      <td><button class="btn btn-danger btn-sm">Fix Now</button></td>
    </tr>
    <tr>
      <td>Update dependencies</td>
      <td><span class="badge bg-success">Low</span></td>
      <td>Diana</td>
      <td>2026-07-20</td>
      <td><button class="btn btn-outline-secondary btn-sm">Skip</button></td>
    </tr>
  </tbody>
</table>

▶ جرّب الكود

▶ مثال: عرض جدول متجاوب

HTML

<div class="table-responsive">
  <table class="table table-bordered">
    <thead class="table-primary">
      <tr>
        <th>#</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Department</th>
        <th>Role</th>
        <th>Status</th>
        <th>Joined</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice Chen</td>
        <td>alice@company.com</td>
        <td>+1-555-0101</td>
        <td>Engineering</td>
        <td>Senior Developer</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-03-15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob Wang</td>
        <td>bob@company.com</td>
        <td>+1-555-0102</td>
        <td>Design</td>
        <td>UI/UX Lead</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-06-01</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Charlie Li</td>
        <td>charlie@company.com</td>
        <td>+1-555-0103</td>
        <td>Marketing</td>
        <td>Content Manager</td>
        <td><span class="badge bg-warning">On Leave</span></td>
        <td>2023-11-20</td>
      </tr>
    </tbody>
  </table>
</div>

▶ جرّب الكود

(1) مخطط خيارات تنسيق الجداول

flowchart LR
    A[table] --> B[Basic Styling]
    A --> C[table-striped Alternating Colors]
    A --> D[table-hover Hover Highlight]
    A --> E[table-bordered Full Border]
    A --> F[table-borderless No Border]
    A --> G[table-sm Compact]
    A --> H[table-responsive Horizontal Scroll]
    H --> I[table-responsive-sm]
    H --> J[table-responsive-md]
    H --> K[table-responsive-lg]

فئة الجدول	التأثير	السيناريو النموذجي
`table`	خطوط أفقية أساسية + طباعة	جدول بيانات بسيط
`table-striped`	الصفوف الفردية رمادية فاتحة	القوائم/التقارير
`table-bordered`	جميع الخلايا لها حدود	الجداول المالية/الإحصائية
`table-borderless`	بلا حدود تمامًا	معلومات بنمط البطاقات
`table-hover`	تمييز الصف عند التمرير	القوائم التفاعلية
`table-sm`	المسافة الداخلية النصف	السيناريوهات كثيفة البيانات

لون الصف	الدلالة	معنى البيانات
`table-primary`	أزرق	معلومات/صف محدد
`table-success`	أخضر	نجاح/مكتمل
`table-danger`	أحمر	فشل/متأخر
`table-warning`	أصفر	تحذير/قيد التنفيذ
`table-info`	سماوي	تلميح/بيانات جديدة
`table-active`	رمادي	الصف المميّز الحالي

تنويع متجاوب	نقطة توقف تفعيل التمرير	السيناريو
`table-responsive`	تمرير دائم	جداول بيانات متعددة الأعمدة
`table-responsive-sm`	<576px	تكيّف الجوال
`table-responsive-md`	<768px	تكيّف الأجهزة اللوحية
`table-responsive-lg`	<992px	شاشات سطح المكتب الصغيرة
`table-responsive-xl`	<1200px	تكيّف الشاشات الكبيرة

❓ أسئلة شائعة

س هل تُنسّق الأزرار أو الشارات بشكل صحيح داخل الجداول؟

ج بالتأكيد لا توجد مشكلة. جميع مكوّنات Bootstrap تحافظ على تنسيقها الطبيعي داخل الجداول. يمكنك وضع أزرار وشارات ومفاتيح تبديل داخل <td>.

س هل يمكن للجداول الفرز/البحث/الترقيم؟

ج table في Bootstrap يتعامل فقط مع التنسيق. الفرز/البحث/الترقيم يحتاج إلى التنفيذ بالاشتراك مع مكتبات JavaScript (مثل DataTables).

س هل يتعارض table-striped وtable-hover في ألوان الصفوف عند استخدامهما معًا؟

ج لا. تسلسل الأولوية: لون الصف > التمرير > التخطيط. الصفوف الملوّنة ستغمق قليلاً عند التمرير.

س هل يظهر شريط التمرير للجداول المتجاوبة فقط عند الحاجة؟

ج نعم. table-responsive يضبط overflow-x: auto؛ يظهر شريط التمرير الأفقي فقط عندما يتجاوز عرض الجدول عرض الحاوية، ويختفي تلقائيًا عندما يكون المحتوى أقل.

س هل يمكن استخدام table-striped مع ألوان صفوف مخصصة (مثل table-success)؟

ج نعم. ألوان الصفوف المخصصة لها أولوية أعلى من التخطيط؛ الصف الذي عليه table-success لن يتم تجاوزه بواسطة التخطيط. إذا كنت بحاجة الصفوف الملوّنة للمشاركة في الألوان المتناوبة أيضًا، يُوصى باستخدام CSS مخصص فقط.

📖 ملخص

.table للتنسيق الأساسي، table-striped لألوان الصفوف المتناوبة، table-hover لتأثيرات التمرير.
table-bordered / table-borderless للتحكم في الحدود، table-sm للوضع المضغوط.
ألوان الصفوف: table-{primary/success/danger/warning} للإشارة إلى الحالة.
عائلة table-responsive تحل مشكلة تجاوز الجداول على الشاشات الصغيرة.

📝 تمارين

⭐ أنشئ جدول مخزون منتجات: الأعمدة تشمل المعرّف، الاسم، الفئة، السعر، كمية المخزون، الحالة. الجدول يجب أن يحتوي على table-striped + table-hover.
⭐⭐ لفّ الجدول من التمرين 1 في table-responsive وشاهده بالتمرير الأفقي على الجوال.
⭐⭐⭐ أنشئ جدول إدارة مستخدمين: ثلاثة صفوف من بيانات المستخدمين. العمود الأخير في كل صف يجب أن يحتوي على زرّي "تعديل" و"حذف". الترويسة يجب أن تستخدم table-dark.

الدرس السابق: مجموعات القوائم والشارات · الدرس التالي: النماذج

فريق Web-Tutorial التقني

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

من نحن