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

Table Borders and Compact Size حدود الجداول والحجم المضغوط

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

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

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

يكتفي كلاس .table افتراضياً بخطوط فصل أفقية هادئة بين الصفوف؛ فإذا احتجت إلى شبكة خطوط كاملة تحيط بجميع جوانب الخلايا والجدول كالتقارير المحاسبية، أضف كلاس .table-bordered، أو استخدم نقيضه .table-borderless لإخفاء كافة الخطوط الفاصلة تماماً.

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

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

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