الجداول Tables في إطار العمل Bootstrap

تعرَّف على أمثلة لتنسيق جداول الاشتراك (نظرًا لكثرة استخدامها مع مُلحقات JavaScript) في إطار العمل Bootstrap.

أمثلة

اختار مطوّرو Bootstrap تنسيقَ الجداول لتكون مناسبة لاستمارات الاشتراك (Opt-in)، نظرًا لكثرة استخدام الجداول في المُربّعات الجانبيّة (widgets) مثل التقويمات ونوافذ اختيّار التواريخ. أضف الصّنف ‎.table لأي عنصُر <table> ثم مدّد التنسيق بأنماط مُخصَّصةhover  أو عن طريق الأصناف المعدِّلة المختلفة الموجودة في Bootstrap.

جرّب المثال التالي لترى كيف يبدو التنسيق الأساسيّ (‎.table) للجداول في Bootstrap. جميع تنسيقات الجداول في الإصدار 4 من إطار العمل Bootstrap متوارثة؛ بمعنى أنّ الجداول الفرعيّة ستُنسَّق بنفس طريقة تنسيق الجدول الأب.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

يمكن كذلك عكسُ الألوان في الجدول (نصّ بلون مضيء على خلفيّة غامقة) بالصنف‎.table-dark.

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

خيّارات رأسيّة الجدول

يمكن استخدام أحد الصّنفيْن المُعدِّليْن ‎.thead-light أو ‎.thead-dark لجعل العنصُر <thead> يبدو مضيئًا أو غامقًا.

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

الأسطر ذات الخلفيّات المتناوبة

أضف الصنف ‎.table-striped إلى الجدول (<table>) لجعل الأسطُر تبدو بألوان متناوبة (مثل الخطوط على جلد الحمار الوحشي).

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

إطار الجدول

أضف الصّنف ‎.table-bordered للجدول للحصول على إطارات على جميع جوانب الجدول وبين الخلايا.

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

إطار الجدول

أضف الصّنف ‎.table-borderless للجدول لإزالة الإطارات من جميع جوانب.

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

يمكن أيضا استخدام ‎.table-borderlessفي الجداول الغامقة:

<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

أسطر يتغير لونها بتمرير المؤشر فوقها

أضف الصّنف ‎.table-hover إلى الجدول لجعل تنسيق الأسطُر داخل <tbody> يتغيّر عند التمرير فوقفها.

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

الجداول الصغيرة

استخدم الصّنف ‎.table-sm لجعل الجداول أكثر كثافة بتقليص حاشيّات الخلايا إلى النصف.

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">الاسم الشخصيّ</th>
      <th scope="col">الاسم العائليّ</th>
      <th scope="col">الحساب</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

الأصناف السيّاقيّة

استخدم الأصناف السيّاقيّة (‎.table-active، و‎.table-primary، و ‎.table-secondary …إلخ.) لتلوين أسطُر الجدول أو خلايا مخصوصة منه.

<!-- الأصناف السياقيّة على الأسطُر -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- الأصناف السياقيّة على الخلايا (`td` أو `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

لا تتوفّر تنويعات للأصناف السياقيّة للخلفيّات بالنسبة الجداول الغامقة (‎.table-dark)؛ إلّا أنّ بالإمكان استخدام أدوات الخلفيّة أو النصّ للحصول على تنسيقات مشابهة.

<!-- على الأسطُر -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- على الخلايا (`td` أو `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

توصيل المعنى إلى التقنيّات المساعدة

يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف ‎.sr-only.

اجعل الجداول متجاوبة بتغليف ‎.table بالأصناف ‎.table-responsive{-sm|-md|-lg|-xl}‎، ممّا يجعل الجدول يمرّ أفقيًّا عند العرض الأقصى (max-width) لكلّ نقطة حديّة وصولًا إلى 576px، و 768px، و 992px، و 1120px على التوالي.

تنبيه: لا تدعم المتصفحات حاليا الاستعلامات النطاقية (range context queries)، يمكننا التحايل على قيود استخدام سوابق min-‎ و max-‎ إطارات العرض باستخدام العرض الكسري - fractional width - (والتي يمكن أن تحدث في حال تحقق بعض الشروط في أجهز high-dpi مثلا) عبر استعمال قيم ذات دقة عالية.

اللافتات (Captions)

تعمل اللافتات ( <caption>) مثل رأسيّات الجدول؛ وتساعد قارئات الشاشة في إيجاد الجدول وفهم مغزاه وتحديد الرغبة في قراءته من عدمها.

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

تساعد الجداول المتاجوبة في المرور أفقيًّا على الجدول بسهولة. اجعل أي جدول متجاوبًا على جميع أطُر العرض بتغليف .table ضمن ‎.table-responsive. كما يمكن اختيّار نقطة حديّة قصوى للجدول المتجاوب باستخدام الأصناف ‎.table-responsive{-sm|-md|-lg|-xl}‎.

قصّ المحتوى عموديّا

تستخدم الجداول المتجاوبة الخاصيّة overflow-y: hidden التي تقصّ أي محتوى يتجاوز الحوافّ العليا أو السفلى من الجدول. قد يؤدّي هذا الأمر -خصوصًا - إلى قصّ القوائم المنسدلة (dropdown menus) والمربَّعات الجانبية من طرف ثالث.

جداول متجاوبة على جميع النقاط الحدّيّة

استخدم الصّنف ‎.table-responsive على جميع الجداول التي تريد إمكانيّة تمريرها أفقيًّا عبر جميع النقاط الحديّة.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

جداول متجاوبة على بعضٍ من النقاط الحدّيّة

استخدم الأصناف ‎.table-responsive{-sm|-md|-lg|-xl}‎ حسب الحاجة للحصول على جداول متجاوبة إلى نقطة حديّة معيَّنة. سيتصرّف الجدول ابتداءً من النقطة الحديّة المعيَّنة على نحو طبيعي ولن يمكن تمريره أفقيًّا.

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

مصادر

• صفحة Tables في توثيق Bootstrap.