Bootstrap 5 Tables
-
بنتعلم في هذا الدرس امكانيات Bootstrap في التعامل مع الجداول، وحيث تعتبر الجداول من المكونات المهمة جدا في صفحات ومواقع الانترنت.حيث يوفر Bootstrap مجموعة من Class المخصصة للتعامل مع الجدول من البسيط الى المتقدم.
بنتعرف في هذا الدرس على مجموعة من Class الي بتستخدم مع Table:
Basic Table
في هذا class ييتم تطبيق light padding و وفواصل أفقية horizontal dividers على الجداول. واسم هذا class هو table
نطبق مثال حتي نفهم الموضوع
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Basic Table</h2>
<p>Apply basic styling (light padding and horizontal dividers) to a table by using .table class:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layan</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
نتيجة التنفيذ بتكون :
Striped Rows
في هذا class يتم اضافة تصميم شبيه بالحمار الوحشي على شكل مخطط واسم class هو table-striped
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Basic Table</h2>
<p>Apply basic styling (light padding and horizontal dividers) to a table by using .table class:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layan</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
اكيد لاحظت ان الكود هو نفسو باستثناء تغير اسم class شوف الكود باللون الاصفر.
النتيجة بتكون:
Bordered Table
في هذا class يتم اضافة حدود borders على جميع جوانب الجدول بالاضافة الى الخلايا cells واسم class هو table-bordered
طبق الكود التالي في صفحة HTML :
<!DOCTYPE html><html lang="en" ><head><title>Welcome, Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h2>Basic bordered</h2><p>Apply border styling (light padding and horizontal dividers) to a table by using .table-bordered class:</p><table class="table table-striped table-bordered"><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>Layan</td><td>Hatem</td><td>[email protected]</td></tr><tr><td>Lareen</td><td>Hatem</td><td>[email protected]</td></tr><tr><td>Mlak</td><td>Hatem</td><td>[email protected]</td></tr></tbody></table></div></body></html>
بتكون نتيجة التنفيذ:
لاحظ ان طبقنا اكثر من class على نفس الجدول فا كانت النتيجة عرض الصفات جميعها في جدول واحد
Hover Rows
في هذا class يتم تغير لون السطر عند تمرير المؤشر فوق Row بلون خلفية واسم class هو table-hover
طبق الكود التالي في صفحة HTML :
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>table-hover</h2>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layan</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة عند تحريك المؤشر فوق الجدول.
Black/Dark Table
في هذا class يتم اضافة خلفية بلون اسود للجدول واسم class هو table-dark.
طبق الكود التالي في صفحة HTML :
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>table-hover</h2>
<table class="table table-striped table-bordered table-hover table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layan</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
تطبيق table-hover and .table-striped. مع table-dark.
يمكن الجمع بين مجموعه من class وتطبيقها على الجدول بنفس الطريقة السابقة.
طبق الكود التالي:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>table-hover</h2>
<table class="table table-striped table-bordered table-hover table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layan</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Borderless Table
يمكن ازالة borders من الجدول باستخدام class المسمى table-borderless.
طبق الكود التالي:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>table borderless</h2>
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layan</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
شغل الصفحة والنتيجة بتكون :
Contextual Classes
يمكن تطبيق مجموعة من Classes على الجداول لغرض تلوين الجدول بأكلمة <table> او جزء منه <tr> او <td>
في المثال التالي طبقنا هذه classes على الجدول
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Classes</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Primary</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Success</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Danger</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Info</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Warning</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Active</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondary</td>
<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Light</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>Dark</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
الجدول التالي يوضح هذه الخصائص:
اكيد لاحظت من النتيجة ان كل class الو لون مختلف يمكن استخدامها عند الحاجه. على سبيل المثال :
الجدول التالي يوضح هاذه classes ووصف كل class
| اسم class | الوصف |
| .table-primary | يتم تطبيق اللون الازرق Blue عند الحاجة الى عرض معلومة مهمه important action |
| .table-success | يتم تطبيق اللون الأخضر Green الي بدل على إجراء ناجح أو إيجابي successful or positive action |
| .table-danger | يتم تطبيق اللون الأحمر Red ويشير إلى عمل خطير أو سلبي محتمل dangerous or potentially negative action |
| .table-info | يتم تطبيق اللون ازرق فاتح Light blue يشير الى تغيير طبيعي neutral informative وعرض معلومة طبيعة |
| .table-warning | يتم تطبيق اللون الأحمر البرتقالي Orange يشير إلى تحذير warning |
| .table-active | يتم تطبيق اللون الرمادي Grey يستخدم لإضافة تأثير عند تحريك المؤشر على الجدول. |
| .table-secondary | يتم تطبيق اللون الرمادي Grey يشير إلى إجراء أقل أهمية قليلاً |
| .table-light | يتم تطبيق اللون الرمادي الفاتح Light grey ويستخدم لتطبيق خلفية row الجدول |
| .table-dark | يتم تطبيق اللون الرمادي الغامق Dark grey ويستخدم لتطبيق خلفية row الجدول |
Table Head Colors
يمكن تطبيق class على head للجدول فقط، ولتطبيق هذا class بنستخدم واحد من Contextual Classes الي تعرفنا عليها قبل شوي.
ملاحظة : الوضع الافتراضي لخط Head في الجداول هو Bold
نطبق المثال التالي حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Table Head Colors</h2>
<p>You can use any of the contextual classes to only add a color to the table header:</p>
<table class="table">
<thead class="table-primary">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layn</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:
تطبيق الجدول الصغير
يمكن تصغير الجدول بحيث يتم اقتطاع cell padding الى النصف باستخدام class باسم table-sm.
نطبق المثال التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Table Head Colors</h2>
<p>You can use any of the contextual classes to only add a color to the table header:</p>
<table class="table">
<thead class="table-primary">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layn</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<table class="table table-sm">
<thead class="table-primary">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layn</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
النتيجة بتكون
تمام التمام نتعلم الان كيف نعمل Responsive Tables
يمكن اضافة كود الى الجدول حتى نعمل الجدول متوافق مع الشاشة يعني بتم اضافة شريط تمرير horizontally حسب حجم الشاشة. وحتى نطبق هذا الحكي بنستخدم table-responsive.
نطبق الكود التالي حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Responsive Table</h2>
<p>The .table-responsive class adds a scrollbar to the table when needed:</p>
<div class="table-responsive">
<table class="table">
<thead class="table-primary">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Mobile</th>
<th>Address1</th>
<th>Address2</th>
<th>Address3</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layn</td>
<td>Hatem</td>
<td>0000000000</td>
<td>Jordan</td>
<td>Jordan</td>
<td>Jordan</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lareen</td>
<td>Hatem</td>
<td>0000000000</td>
<td>Jordan</td>
<td>Jordan</td>
<td>Jordan</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mlak</td>
<td>Hatem</td>
<td>0000000000</td>
<td>Jordan</td>
<td>Jordan</td>
<td>Jordan</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
شغل الصفحة وصغر الشاشة حتى تشوف شريط التمرير تحت:
يحتوي ايضا Bootstrap على مجموعه من class المتعلقة ب table-responsive. والي من خلالها ممكن نتحكم بالوقت الى بتم عرض شريط التمرير بناء على عرض الشاشة.
وهذه classes هي :
\
| اسم class | الوصف |
| table-responsive-sm. | < 576px |
| table-responsive-md. | < 768px |
| table-responsive-lg. | < 992px |
| table-responsive-xl. | < 1200px |
| table-responsive-xxl. | < 1400px |
اترك تعليقك