انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: تنسيق الجداول في بوتستراب 5

Striped Rows and Columns تخطيط الصفوف والأعمدة

صمّم جداول بيانات احترافية ومتاحة في بوتستراب 5.3 باستخدام كلاس table والألوان السياقية وتخطيط الصفوف والأعمدة وتفاعل المرور والحدود المضغوطة والجداول المتجاوبة للتمرير.
2 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في الجداول الواسعة تسهل قراءة السطر الواحد من البداية للنهاية عند تظليل الصفوف المتناوبة بلون خافت عبر كلاس .table-striped الذي يلوّن الصفوف الفردية داخل <tbody> تلقائياً.

كما أضاف بوتستراب 5.2+ كلاس .table-striped-columns لتظليل الأعمدة الزوجية عمودياً، وهو خيار مثالي لجداول مقارنة الباقات والمواصفات الفنية المتجاورة، ويمكن دمج كلا النمطين مع أي لون جدول بما في ذلك .table-dark.

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك

جميع فقرات هذا الدرس (تنسيق الجداول في بوتستراب 5)