الدرس الحادي عشر: الجداول (Tables) في Bootstrap
الجداول هي أحد المكونات الأساسية في تصميم الويب لعرض البيانات بطريقة منظمة وسهلة القراءة. تقدم Bootstrap فئات جاهزة لإنشاء وتخصيص الجداول بسهولة، مما يسهل عرض البيانات بطريقة مرنة ومريحة على جميع الأجهزة. في هذا الدرس، سنتعلم كيفية إنشاء جداول باستخدام الفئة .table، كيفية تخصيص الجداول باستخدام فئات مثل .table-bordered و .table-striped، بالإضافة إلى كيفية إضافة الجداول المتجاوبة باستخدام .table-responsive.
1. إنشاء جداول مرنة باستخدام الفئة .table
في Bootstrap، الفئة الأساسية لإنشاء الجداول هي .table. هذه الفئة تقوم بتطبيق تنسيق بسيط على الجدول لجعله أكثر تنظيمًا وجمالًا. يمكن تطبيق هذه الفئة على العنصر <table> لتحويله إلى جدول مصمم باستخدام Bootstrap.
أ. الهيكل الأساسي للجدول
الهيكل الأساسي للجدول يتضمن <table>, <thead>, <tbody>, و <tfoot> لتحديد أجزاء الجدول المختلفة. باستخدام الفئة .table، يتم تحسين مظهر الجدول تلقائيًا.
مثال عملي:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>الاسم</th>
<th>العمر</th>
<th>المدينة</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>أحمد</td>
<td>25</td>
<td>دمشق</td>
</tr>
<tr>
<td>2</td>
<td>محمد</td>
<td>30</td>
<td>بيروت</td>
</tr>
<tr>
<td>3</td>
<td>سارة</td>
<td>28</td>
<td>عمان</td>
</tr>
</tbody>
</table>
.table: الفئة الأساسية التي تضيف تنسيق Bootstrap للجدول.<thead>: يحتوي على رؤوس الأعمدة.<tbody>: يحتوي على البيانات الفعلية في الجدول.<tr>: يمثل كل صف في الجدول.<th>: يمثل الخلايا في رأس الجدول.<td>: يمثل الخلايا في جسم الجدول.
2. تخصيص الجداول باستخدام فئات مثل .table-bordered و .table-striped
Bootstrap يوفر العديد من الفئات لتخصيص الجداول وجعلها أكثر تفاعلية وجاذبية. من بين هذه الفئات، هناك فئتان شهيرتان هما .table-bordered و .table-striped، اللتان تسمحان بإضافة تأثيرات إضافية على الجداول.
أ. إضافة الحدود باستخدام .table-bordered
الفئة .table-bordered تضيف حدودًا حول جميع خلايا الجدول، مما يجعل الجدول أكثر وضوحًا وتنظيمًا.
مثال عملي:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>الاسم</th>
<th>العمر</th>
<th>المدينة</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>أحمد</td>
<td>25</td>
<td>دمشق</td>
</tr>
<tr>
<td>2</td>
<td>محمد</td>
<td>30</td>
<td>بيروت</td>
</tr>
<tr>
<td>3</td>
<td>سارة</td>
<td>28</td>
<td>عمان</td>
</tr>
</tbody>
</table>
.table-bordered: تضيف حدودًا حول جميع خلايا الجدول، مما يعطي مظهرًا منظمًا.
ب. إضافة الخطوط المتناوبة باستخدام .table-striped
الفئة .table-striped تضيف تأثير الخطوط المتناوبة بين الصفوف (يتم تظليل الصفوف الفردية بلون مختلف) لزيادة الوضوح وتسهيل قراءة البيانات في الجداول ذات البيانات الكثيرة.
مثال عملي:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>الاسم</th>
<th>العمر</th>
<th>المدينة</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>أحمد</td>
<td>25</td>
<td>دمشق</td>
</tr>
<tr>
<td>2</td>
<td>محمد</td>
<td>30</td>
<td>بيروت</td>
</tr>
<tr>
<td>3</td>
<td>سارة</td>
<td>28</td>
<td>عمان</td>
</tr>
</tbody>
</table>
.table-striped: تضيف تأثير التظليل على الصفوف الفردية من الجدول، مما يساعد على تحسين قابلية القراءة.
ج. إضافة كلا التأثيرين معًا
يمكنك الجمع بين الفئتين .table-bordered و .table-striped للحصول على جدول يحتوي على حدود حول الخلايا مع تأثير الخطوط المتناوبة.
مثال عملي:
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>الاسم</th>
<th>العمر</th>
<th>المدينة</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>أحمد</td>
<td>25</td>
<td>دمشق</td>
</tr>
<tr>
<td>2</td>
<td>محمد</td>
<td>30</td>
<td>بيروت</td>
</tr>
<tr>
<td>3</td>
<td>سارة</td>
<td>28</td>
<td>عمان</td>
</tr>
</tbody>
</table>
3. إضافة الجداول المتجاوبة باستخدام .table-responsive
في Bootstrap، يمكنك استخدام الفئة .table-responsive لجعل الجدول متجاوبًا. هذه الفئة تجعل الجدول يتكيف مع حجم الشاشة في الأجهزة الصغيرة بحيث يمكن تمرير الجدول أفقيًا لعرض البيانات بشكل مناسب دون أن يتم قصها.
أ. جعل الجدول متجاوبًا
يمكنك إضافة .table-responsive إلى العنصر الذي يحتوي على الجدول لجعل الجدول يتكيف مع أحجام الشاشات المختلفة.
مثال عملي:
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>الاسم</th>
<th>العمر</th>
<th>المدينة</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>أحمد</td>
<td>25</td>
<td>دمشق</td>
</tr>
<tr>
<td>2</td>
<td>محمد</td>
<td>30</td>
<td>بيروت</td>
</tr>
<tr>
<td>3</td>
<td>سارة</td>
<td>28</td>
<td>عمان</td>
</tr>
</tbody>
</table>
</div>
.table-responsive: تتيح لك جعل الجدول متجاوبًا بحيث يمكن تمريره أفقيًا على الأجهزة ذات الشاشات الصغيرة.
الخاتمة
في هذا الدرس، تعلمنا كيفية استخدام Bootstrap لإنشاء جداول مرنة واحترافية باستخدام الفئة .table. قمنا بتخصيص الجداول باستخدام فئات مثل .table-bordered و .table-striped لإضافة حدود وخطوط متناوبة لتحسين تجربة القراءة. كما تعلمنا كيفية جعل الجداول متجاوبة باستخدام الفئة .table-responsive لتناسب جميع أنواع الشاشات. باستخدام هذه الأدوات، يمكنك بسهولة إنشاء جداول متوافقة مع تصميمات الويب الحديثة وتقديم البيانات بطريقة منظمة وجميلة.
