در خدمت شما هستیم با آموزش Bootstrap 4 جلسه ششم (table)
آموزش Bootstrap 4 جلسه ششم (table) از سری آموزش های تک قسمتی است.
ساخت جدول پایه
همانطور که میدانید جداول یکی از مهمترین ارکان محتوا و سایت هستند که اطلاعات دسته بندی شده ای را به ما میدهند. در ابتدا سایت ها را با table طراحی میکردند و به مرور زمان div جای آن را گرفت اما هنوز هم برای موارد مختلف از جداول استفاده میکنند. جالب است بدانید سایت هایی که دارای جداولی هستند که مرتب آپدیت میشود بسیار مورد توجه گوگل هستند.بوت استرپ هم از این موضوع غافل نشده است و کلاس های بسیار مفید و متنوعی را برای جدول ساخته است که در این آموزش به آنها میپردازیم.
اولین جدول که بوت استرپ به آن پرداخته است جدول پایه یا همان حالت پیشفرض است. در این حالت کافیست شما در داخل تگ table کلاس table نیز استفاده کنید. این جدول با جدول هایی که شما به صورت عادی میسازید تفاوتی ندارد و در عملکرد مشابه آنها است نمونه زیر مثال عملی این حالت است:
<table class=”table”> </table>
جداول راه راه (zebra)
در اکثر موارد وقتی تعداد سطر و ستون های جداول زیاد میشود خواندن آنها نیز سخت شده و نیاز به دقت بالایی دارد به این صورت که ممکن است اطلاعات سطر بالا یا پایین به اشتباه خوانده شود معمولا در این حالت کاربر با نگه داشتن کلیک موس آن قسمت را هایلایت میکند تا بتواند بخواند بوت استرپ برای رفع این مشکل و خوانایی جداول کلاس table-striped را ساخته است عملکرد این کلاس به این گونه است که سطر های جدول را یکی درمیان کمرنگ و پر رنگ میکند تا خواندن آن ساده شود.برای این کار کافیست کلاس table-striped را به تگ table بدهید به صورت زیر:
<table class=”table table-striped”> </table>
خطوط حاشیه جدول
در حالت پیشفرض دور جدول کادری نیست و بین ستون هم خط جدا کننده ای وجود ندارد تنها بین سطر ها خطی کشیده شده است اگر شما بخواهید برای سطر و ستون و دور جدول خود اصطلاحا border بگذارید بوت استرپ به کمک شما می آید درست است بوت استرپ برای این حالت نیز کلاسی دارد کافیست کلاس table-bordered را به تگ table خود اضافه کنید به صورت زیر:
<table class=”table table-bordered“> </table>
نکته: در تمام موارد گفته شده کلاس table ثابت است و شما باید کلاس های دیگر را به آن اضافه کنید.
تغییر حالت سطر ها با hover شدن موس
بوت استرپ تنها به خوانایی به حالت zebra اکتفا نکرده است و حالت hover را نیز برای شما ایجاد کرده است به این صورت که با رفتن موس روی هر سطر رنگ آن سطر نسبت به باقی سطر ها متمایز میشود. اگر میخواهید این حالت را در جداول خود به وجود بیاورید کافیست از کلاس table-hover استفاده و این کلاس را به تگ table خود اضافه کنید مانند کد زیر:
<table class=”table table-hover“> </table>
جداول با رنگ تیره (Black/Dark Table)
اگر تصویر زمینه سایت شما رنگ های روشن است و میخواهید جداولی با رنگ معکوس داشته باشید این نوع جدول برای شما مناسب است یا حتی زمینه سایت شما مشکی است و میخواهید جدول هایی همرنگ و متناسب داشته باشید باز هم میتوانید از کلاس table-dark در تگ table خود استفاده کنید و جدول های خود را به رنگ تیره بسازید مانند کد زیر:
<table class=”table table-dark“> </table>
جدوال تیره راه راه (Dark Zebra)
درباره جداول zebra بالاتر صحبت کردیم شما میتوانید این حالت نمایش را در جدول های تیره نیز داشته باشید. تنها کاری که باید انجام دهید این است که چند کلاس را در کنار هم قرار دهید کلاس table که لازمه کار است کلاس table-dark برای تیره شدن جدول و کلاس table-striped برای راه راه شدن جدول. به کمک این ۳ کلاس میتوانید جدول های تیره راه راه داشته باشید مانند کد زیر:
<table class=”table table-dark table-striped“> </table>
تغییر حالت سطر جداول تیره با hover شدن موس
اگر خاطرتان باشد بالاتر کلاس table-hover که کمک میکرد با قرار گرفتن موس روی سطری رنگ آن تغییر کند این حالت برای جداول تیره نیز امکان پیاده سازی دارد کافیست مجددا ۳ کلاس را در کنار هم تعریف کنید کلاس table کلاس table-dark و کلاس table-hover مانند مثال زیر میتوانید این کار را انجام دهید:
<table class=”table table-dark table-hover“> </table>
جدول بدون کادر (borderless)
اگر میخواهید جداول شما هیچ حاشیه و کادری نداشته باشند تنها کافیست از کلاس table-borderless استفاده کنید تا تمام خطوط پاک شوند و هیچ کادری باقی نماند اگر قصد انجام این کار را دارید مشابه کد زیر عمل کنید
<table class=”table table-borderless”> </table>
جدول های رنگی
اگر آموزش جلسه قبل را دیده باشید میدانید که بوت استرپ رنگ های مختلفی را برای نوشته و پس زمینه در کلاس های خود جای داده است. علاوه بر پس زمینه و نوشته این امکان برای جداول هم وجود دارد کافیست کلاس رنگی مد نظر که پایین تر برای شما لیست میکنیم را در جایی که میخواهید رنگ تغییر کند قرار دهید اگر این کلاس ها را در تگ table قرار دهید کل جدول رنگ میگیرد اگر در tr قرار دهید تنها آن سطر رنگ میگیرد و اگر در th قرار دهید تنها آن سلول رنگ میگیرد:
- table-primary : به کمک این کلاس میتوانید رنگ آبی اضافه کنید.
- table-success : به کمک این کلاس میتوانید رنگ سبز اضافه کنید.
- table-danger : به کمک این کلاس میتوانید رنگ قرمز اضافه کنید.
- table-info : به کمک این کلاس میتوانید رنگ آبی کمرنگ اضافه کنید
- table-warning : به کمک این کلاس میتوانید رنگ نارنجی اضافه کنید.
- table-active : به کمک این کلاس میتوانید حالت فعال که رنگ طوسی دارد اضافه کنید.
- table-secondary : به کمک این کلاس میتوانید رنگ کلاس ثانویه که خاکستری است اضافه کنید.
- table-light : به کمک این کلاس میتوانید رنگ آبی مایل به سفید اضافه کنید.
- table-dark : به کمک این کلاس میتوانید رنگ مشکی اضافه کنید.
برای مشخص شدن موضوع در پایان مقاله کدی حاوی کل مطالب گفته شده قرار میدهیم.
رنگ هدر جدول
شما برای هدر جداول خود میتوانید از ۲ کلاس thead-light و thead-dark استفاده کنید دقت کنید این کلاس ها را باید به تگ thead بدهید از نام کلاس ها مشخص است یکی هدر تیره و دیگری هدر روشن میسازد.
ساخت جدول کوچک
تا الان تمام جدول هایی که گفتیم جدول بزرگ بودند بزرگ به این معنی که حاشیه ای از داخل داشتند اگر این حاشیه برای شما زیاد است و نمیخواهید وجود داشته باشد کافیست از کلاس table-sm استفاده کنید و این حاشیه ها را از بین ببرید مانند کد زیر
<table class=”table table-sm”> </table>
جداول رسپانسیو
به عنوان آخرین مورد میپردازیم به جدول های رسپانسیو اگر قصد ساخت جداول رسپانسیو را دارید باید از کلاس هایی مشابه col ها استفاده کنید اگر خاطرتان باشد ما برای صفحه دکستاپ معمولی از col-md استفاده میکردیم حال به جای col باید از table-responsive استفاده کنید که میشود table-responsive-md نکته ای که باید به آن توجه کنید این است که این کلاس باید در div قرار بگیرید و کل جدول شما داخل این div قرار بگیرد کلاس های مختلف رسپانسیو و اندازه های آن ها را برای شما لیست میکنیم:
- table-responsive-sm : این کلاس برای صفحه نمایش های کوچکتر از ۵۷۶px استفاده میشود.
- table-responsive-md : برای صفحه نمایش های بین ۵۷۷px تا ۷۶۸px مناسب است.
- table-responsive-lg : برای صفحه نمایش های بین ۷۶۹px تا ۹۹۲px مناسب است
- table-responsive-xl : برای صفحه نمایش های ۱۲۰۰px به بالا مناسب است.
برای واضح شدن کدی حاوی کل مطالب آموزشی این جلسه را برای شما قرار میدهیم:
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders on all sides of the table and the cells:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Black/Dark Table</h2>
<p>The .table-dark class adds a black background to the table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Dark Striped Table</h2>
<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Hoverable Dark Table</h2>
<p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Borderless Table</h2>
<p>The .table-borderless class removes borders from the table:</p>
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
<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>def@somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec@example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie@example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Table Head Colors</h2>
<p>The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:</p>
<table class="table">
<thead class="thead-dark">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Small Table</h2>
<p>The .table-sm class makes the table smaller by cutting cell padding in half:</p>
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Responsive Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px, there is no difference:</p>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
---------------------------------------------------------------------------------
<div class="container">
<h2>Responsive Table</h2>
<p>The .table-responsive-sm class creates a responsive table which will scroll horizontally on screens that are less than 576px wide.</p>
<p>Resize the browser window to see the effect.</p>
<div class="table-responsive-md">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
-----------------------------------------------------------------------
</body>
</html>
آموزش Bootstrap 4 جلسه ششم (table) در اینجا به پایان میرسد امیدواریم این آموزش برای شما مفید بوده باشد.
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه پنجم (color)
آموزش Bootstrap 4 جلسه هفتم (تصویر)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید