Bootstrap/tables
تعرَّف على أمثلة لتنسيق جداول الاشتراك (نظرًا لكثرة استخدامها مع مُلحقات JavaScript) في إطار العمل Bootstrap.
أمثلة
اختار مطوّرو Bootstrap تنسيقَ الجداول لتكون مناسبة لاستمارات الاشتراك Opt-in، نظرًا لكثرة استخدام الجداول في المُربّعات الجانبيّة Widgets مثل التقويمات ونوافذ اختيّار التواريخ. أضف الصّنف .table لأي عنصُر <table> ثم مدّد التنسيق بأنماط مُخصَّصة أو عن طريق الأصناف المعدِّلة المختلفة الموجودة في 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-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 على التوالي.
اللافتات Captions
تعمل اللافتات ( <caption>) مثل رأسيّات الجدول؛ وتساعد قارئات الشاشة في إيجاد الجدول وفهم مغزاه وتحديد الرغبة في قراءته من عدمها.
<table class="table">
<caption>List of users</caption>
<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 ضمن .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>