في هذا الدرس 8تصفّح المواضيع
يتبع بوتستراب 5 مبدأ التفعيل الصريح الاختياري عند تنسيق الجداول؛ إذ تترك طبقة التطبيع وسم <table> الخام بدون حشو أو خطوط ثقيلة حتى لا تتعطل مكتبات التقاويم ومحررات النصوص الخارجية التي تستخدم الجداول داخلياً، ولا يبدأ التنسيق إلا عند إضافة كلاس .table صراحةً.
لتحقيق أعلى توافق مع قارئات الشاشة ومحركات التنسيق، التزم دائماً بتقسيم الجدول دلالياً إلى <thead> لرؤوس الأعمدة المزودة بسمة scope="col"، و<tbody> لصفوف البيانات المزودة بسمة scope="row" على خلية المعرّف الأولى.
لتمييز حالة سجل معين بصرياً في تقارير المراقبة أو الفواتير، يوفر بوتستراب 5 ثمانية كلاسات لونية دلالية تبدأ من .table-primary و.table-success و.table-warning و.table-danger وصولاً إلى .table-info و.table-secondary و.table-light و.table-dark.
يمكنك تطبيق أي من هذه الكلاسات على وسم <table> بالكامل، أو على صف محدد <tr>، أو حتى على خلية مفردة <td>، مع الحرص على وجود نص واضح يفسر الحالة داخل الخلية وعدم الاكتفاء باللون وحده ضماناً لإتاحة قارئات الشاشة.
<table class="table">
<thead>
<tr><th scope="col">#</th><th scope="col">Node</th></tr>
</thead>
<tbody>
<tr><th scope="row">1</th><td>api-eu-central</td></tr>
<tr class="table-info"><td>2</td><td>edge-me</td></tr>
</tbody>
</table>في الجداول الواسعة تسهل قراءة السطر الواحد من البداية للنهاية عند تظليل الصفوف المتناوبة بلون خافت عبر كلاس .table-striped الذي يلوّن الصفوف الفردية داخل <tbody> تلقائياً.
كما أضاف بوتستراب 5.2+ كلاس .table-striped-columns لتظليل الأعمدة الزوجية عمودياً، وهو خيار مثالي لجداول مقارنة الباقات والمواصفات الفنية المتجاورة، ويمكن دمج كلا النمطين مع أي لون جدول بما في ذلك .table-dark.
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr><th scope="col">Plan</th><th>Quota</th></tr>
</thead>
<tbody>
<tr><td>Starter</td><td>20 GB</td></tr>
<tr class="table-success"><td>Pro</td><td>200G</td></tr>
</tbody>
</table>عندما يتفحص المستخدم جدولاً كثيف الأرقام بالمؤشر، يضيف كلاس .table-hover إضاءة تفاعلية فورية على الصف الذي يمر فوقه المؤشر داخل <tbody>، مما يقلل خطأ قراءة الخلية المجاورة.
وإذا أردت تثبيت تمييز صف محدد أو خلية بعينها باعتبارها العنصر قيد المعاينة حالياً دون انتظار مرور المؤشر، أضف كلاس .table-active مباشرة إلى <tr> أو <td>.
يكتفي كلاس .table افتراضياً بخطوط فصل أفقية هادئة بين الصفوف؛ فإذا احتجت إلى شبكة خطوط كاملة تحيط بجميع جوانب الخلايا والجدول كالتقارير المحاسبية، أضف كلاس .table-bordered، أو استخدم نقيضه .table-borderless لإخفاء كافة الخطوط الفاصلة تماماً.
وعند عرض عشرات السجلات في لوحة مراقبة مدمجة، يختصر كلاس .table-sm الحشو الداخلي للخلايا إلى النصف تقريباً ليعرض صفوفاً أكثر في نفس الارتفاع الرأسي دون المساس بمقروئية الخط.
<table class="table table-bordered table-sm">
<thead class="table-light">
<tr><th scope="col">Port</th><th>State</th></tr>
</thead>
<tbody>
<tr><td><code>443</code></td><td>HTTPS</td></tr>
<tr><td><code>8080</code></td><td>Lab</td></tr>
</tbody>
</table>لإبراز الحد الفاصل بين رؤوس الأعمدة وصفوف البيانات — أو بين جسم الجدول وصف المجاميع السفلي <tfoot> — أضف كلاس .table-group-divider إلى وسم <tbody> أو <tfoot> فيرسم خطاً علوياً سميكاً يرث لون نص الجدول تلقائياً عبر currentColor.
أما وسم عنوان الجدول التوضيحي <caption> فيظهر افتراضياً أسفل الجدول، ويمكنك رفعه إلى أعلى الجدول بلمسة واحدة عبر إضافة كلاس .caption-top على وسم <table>.
عندما تحتوي إحدى خلايا الصف على وصف طويل يمتد لعدة أسطر بينما تحتوي الخلية المجاورة على رمز قصير من كلمة واحدة، قد تبدو البيانات غير متزنة بصرياً. يعالج كلاس .align-middle هذا التفاوت بضبط المحاذاة الرأسية في منتصف ارتفاع الصف تماماً سواء طبقته على <table> بالكامل أو على <tbody> أو على صف <tr> بعينه.
تُعد الجداول العريضة متعددة الأعمدة السبب الأول لظهور شريط التمرير الأفقي المزعج على الهواتف الذكية. لحماية تخطيط صفحتك بالكامل، غلّف عنصر <table class="table"> داخل حاوية <div class="table-responsive"> ليقتصر التمرير الأفقي السلس على صندوق الجدول وحده دون تحريك رأس الصفحة أو شريط التنقل.
ويمكنك تقييد التمرير بشاشات محددة عبر النسخ المرحلية من .table-responsive-sm حتى .table-responsive-xxl؛ فمثلاً يعمل .table-responsive-lg بالتمرير الأفقي تحت عرض 992px ويتحول لجدول عادي كامل العرض على الشاشات الأكبر:
<div class="table-responsive">
<table class="table caption-top align-middle">
<caption>Nodes Audit</caption>
<thead class="table-light">
<tr><th scope="col">Node</th><th>RAM</th></tr>
</thead>
<tbody class="table-group-divider">
<tr><td>node-01</td><td>16 GB</td></tr>
</tbody>
</table></div>يوجز الجدول المرجعي التالي كلاسات الجداول القياسية في بوتستراب 5.3 لتوظيفها بدقة في لوحات البيانات:
| الكلاس | العنصر المستهدف | الوظيفة البصرية والتقنية |
|---|---|---|
.table | <table> | تفعيل التنسيق القياسي وحشو الخلايا وخطوط الفصل |
.table-primary .. .table-dark | جدول أو صف أو خلية | تلوين دلالي للسجلات أو رأس الجدول |
.table-striped / .table-striped-columns | <table> | تظليل متناوب للصفوف أو للأعمدة الرأسية |
.table-hover / .table-active | جدول / صف أو خلية | إضاءة عند المرور بالمؤشر أو تثبيت الصف النشط |
.table-bordered / .table-borderless / .table-sm | <table> | إطار كامل، أو بلا حدود، أو حشو مضغوط للنصف |
.table-group-divider / .caption-top | <tbody> / <table> | خط فاصل سميك تحت الرأس ورفع عنوان الجدول للأعلى |
.table-responsive / .table-responsive-{bp} | <div> أب | تمرير أفقي معزول يحمي صفحة الهاتف من الكسر |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: تعلّمت في هذا الدرس بناء جداول البيانات في بوتستراب 5.3 وتلوينها بالكلاسات السياقية، وتفعيل التخطيط المتناوب للصفوف والأعمدة وتفاعل المرور، وضبط الحدود والحجم المضغوط وفواصل المجموعات، وتغليف الجداول العريضة للتمرير الآمن على الهواتف.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «مكتبة الأيقونات في بوتستراب 5» لتتعلم تضمين أيقونات Bootstrap Icons المتجهية وتنسيق حجمها ولونها وإتاحتها.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Opt-In Table Styling التنسيق الاختياري للجدول
- نهج معماري يترك وسوم الجداول الخام دون تنسيق حتى يُضاف إليها كلاس .table صراحةً حفاظاً على سلامة الإضافات الخارجية.
- للمراجعة
- 02 Table Group Divider الفاصل السميك لمجموعات الجدول
- كلاس .table-group-divider الذي يُضاف لوسم tbody أو tfoot لرسم خط علوي بارز يفصل الرأس عن البيانات.
- للمراجعة
- 03 Striped Columns تخطيط الأعمدة المتناوبة
- كلاس .table-striped-columns الحديث لتظليل الأعمدة الزوجية رأسياً وتسهيل قراءة جداول المقارنات.
- للمراجعة
- 04 Responsive Table Wrapper مغلف الجدول المتجاوب
- عنصر div أب يحمل كلاس .table-responsive لعزل التمرير الأفقي داخل الجدول ومنع كسر عرض صفحة الهاتف.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 WAI-ARIA WAI-ARIA
- Web Accessibility Initiative — Accessible Rich Internet Applications
- منظومة معايير الإتاحة التي يدعمها استخدام عنوان الجدول caption وسمات النطاق scope في خلايا الرأس.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- تقنية التنسيق التي تدير طبقات ألوان الجدول وحالات المرور في بوتستراب 5.3 عبر المتغيرات المحلية.
- للمراجعة
- 03 UI UI
- User Interface
- طبقة العرض المرئية التي ترفع كفاءتها في لوحات المراقبة كلاسات الجداول المضغوطة وتفاعل المرور.
- للمراجعة
- 04 HTML HTML
- HyperText Markup Language
- توفر العناصر الهيكلية الدلالية لرأس وجسم وتذييل وعنوان الجدول التي يبني عليها بوتستراب تنسيقاته.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ جدولاً بكلاسات table وtable-striped وtable-hover مع رأس table-dark وجسم table-group-divider يضم 3 صفوف، وميّز أحدها بكلاس table-active.
-
غلّف جدولاً يحمل الكلاسات table وtable-bordered وtable-sm وcaption-top وalign-middle مع عنصر caption داخل حاوية أب بكلاس table-responsive-md.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
كيف تلوّن رأس الجدول باللون الداكن في بوتستراب 5 بعد إلغاء الكلاس القديم .thead-dark؟
وحّد بوتستراب 5 كلاسات تلوين الجداول؛ فيُضاف كلاس table-dark مباشرة على وسم <thead>.
أين يجب وضع كلاس .table-responsive لتفعيل التمرير الأفقي السلس للجدول على الشاشات الصغيرة؟
يوضع كلاس .table-responsive على عنصر حاوية <div> أب يحيط بوسم <table>.
هل ينسق بوتستراب 5 جميع وسوم <table> الخام في الصفحة تلقائياً دون إضافة كلاس .table؟
خطأ؛ تنسيق الجداول في بوتستراب اختياري يتطلب إضافة كلاس .table صراحةً لعدم إفساد الإضافات الخارجية.
أي كلاس في بوتستراب 5.3 يظلل الأعمدة الرأسية بالتناوب لتسهيل مقارنة المواصفات؟
يظلل كلاس .table-striped-columns الأعمدة الزوجية عمودياً في جداول المقارنة.
ما أثر إضافة كلاس .table-sm إلى جدول بوتستراب؟
يقلص الحشو الداخلي للخلايا إلى النصف لعرض بيانات أكثر كثافة في مساحة رأسية أقل.
ما الكلاس الذي يُضاف لوسم <tbody> لرسم خط علوي سميك يفصله بوضوح عن رأس الجدول؟
يرسم .table-group-divider خط فصل سميكاً يرث لون نص الجدول عبر currentColor.
عند استخدام المغلف .table-responsive-lg، هل يصبح الجدول قابلاً للتمرير الأفقي تحت عرض 992px؟
صحيح؛ يعمل التمرير الأفقي في الشاشات الأصغر من نقطة التوقف المحددة (أقل من 992px لطبقة lg).
كيف ترفع عنصر عنوان الجدول <caption> ليظهر أعلى الجدول بصرياً مع بقائه أول عنصر بداخله؟
بإضافة كلاس .caption-top على وسم <table> الأب.