پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
در این مطلب با آموزش مبحث جداول در Bootstrap در خدمت شما هستیم.
در بخش آموزش های html چگونگی کار با جداول (tables) را به شما آموخیم.
هم اکنون با استفاده از کلاسهای آماده شده در بوت استرپ میخواهیم جدول هایی بسازیم که بسادگی زیبایی را در آن تلفیق میکنیم.
سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح
در این مطلب قصد داریم جداول (tables) در Bootstrap 4 را به شما بیاموزیم.
در بوت استرپ 4 کلاسهای مختلفی را برای طراحی جداول متنوع و زیبا وجود دارد. که با استفاده از کلاس مورد نظر خود میتوان جدولی زیبا را طراحی کنیم.
برای ایجاد جدول اولین کلاسی که از آن استفاده میکنیم کلاس table است.
جدول اصلی Bootstrap4 :
یک جدول اصلی bootstrap4 دارای فاصله ای معمولی و تقسیم کننده های افقی است.
با استفاده از کلاس table. طراحی ساده و ظاهر اولیه را میتوان به جدول اعمال کرد.
مثال زیر یک نمونه از جدول ساده در بوت استرپ 4 را نشان میدهد:
[php]
<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>
</body>
[/php]
خروجی کدها جدولی به شکل تصویر زیر است.
ردیف های راه راه در جدول ( Striped Rows ) :
برای ایجاد ردیف های راه راه در جدول از کلاس Striped Rows. استفاده میکنیم.
این کلاس جداولی با سطرهای رنگی که ردیف ها در آن به صورت یکی در میان رنگی میشوند ایجاد میکند.
در مثال زیر با اضافه کردن این کلاس به جدول این ویژگی را نمایش میدهیم:
[php]
<body>
<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>
</body>
[/php]
جدول زیر تصویر مثال بالا است.
جداول خط دار ( Bordered Table ) :
از کلاس bordered table جهت خط دار کردن تمام مرز های سطرها و ستون های جدول استفاده میشود.
با استفاده از این کلاس میتوان جدولی طراحی کرد که کادری دور آن کشیده شود.
در مثال زیر این کلاس را به جدول افزوده ایم :
[php]
<body>
<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>
</body>
[/php]
در تصویر زیر خروجی این مثال را ببینید.
ردیف های شناور ( Hover Rows ) :
کلاس table hover. یک پس زمینه رنگی در ردیف هایی که موس روی آن قرار میگیرد ایجاد میکند.
این کلاس در حالت hover رنگ پس زمینه سطر را به رنگ خاکستری تغییر میدهد.
به مثال زیر توجه کنید:
[php]
<body>
<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>
</body>
[/php]
خروجی مثال بالا به شرح تصویر زیر است:
جدول سیاه (Black/dark Table) :
کلاس table-dark. پس زمینه جدول را به رنگ سیاه تبدیل میکند.
اگر تمایل دارید پس زمینه جدولتان رنگی تیره داشته باشد میتوانید از این کلاس استفاده کنید.
همانند مثال زیر:
[php]
<body>
<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>
</body>
[/php]
خروجی مثال بالا تصویر زیر است :
جدول راه راه تاریک ( Dark Striped Table ) :
برای ایجاد یک جدول راه راه تاریک کلاس جدول راه راه و کلاس جدول تاریک را باهم ترکیب میکنیم.
به این طریق که دو کلاس را به طور هم زمان به تگ tabole اضافه مینماییم.
این روش جدول مشکی یکی درمیان رنگی را ایجاد میکند.
برای توضیح بیشتر مثال زیر را مشاهده نمایید :
[php]
<body>
<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>
</body>
[/php]
نتیجه ی مثال بالا جدولی به شرح تصویر زیر است :
جدول سیاه با ردیف های شناور ( Hoverable Dark Table ) :
کلاس table-hover. یک حالت hover را در سطر های جدول اضافه میکند.
مثال :
[php]
<body>
<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>
</body>
[/php]
خروجی قطعه کد بالا در تصویر زیر :
طراحی جدول بدون کادر ( Borderless table ) :
کلاس table-borderless. کادر دور جدول را حذف میکند و یک جدول بدون کادر طراحی میکند.
به این مثال توجه کنید:
[php]
<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>
[/php]
خروجی همانند تصویر زیر است:
طراحی جدول با کلاسهای متنی ( Contexual Classes) :
با استفاده از کلاسهای متنی میتوان سطرها و ستون ها و حتی فیلد های جدول را رنگی کرد.
هر سطری میتواند یک رنگ داشته باشد و میتوانیم سطرهای مهم را رنگی کنیم.
یک نمونه از این کلاس های متنی را در این مثال ببینید:
[php]
<body>
<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>
</body>
[/php]
تصویر جدولی که از مثال بالا به دست می آید:
جدول با header رنگی :
با استفاده از کلاس thead-dark. میتوان یک پس زمینه ی سیاه به هدر جدول اضافه نمایید.
مثال :
[php]
<body>
<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>
</body>
[/php]
جدول زیر نتیجه کدهای این مثال است :
جداول کوچک (Small tables ) :
کلاس table-sm. سایز جدول را کوچک میکند. این کلاس با حذف فاصله های میانی سایز جدول را کوچک میکند.
به مثال زیر توجه کنید:
[php]
<body>
<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>
</body>
[/php]
تصویر این جدول به شکل زیر است :
جداول ریسپانسیو ( Responsive Tables ) :
این کلاس ویژگی ریسپانسیو را به جدول اضافه میکند به این طریق که یک اسکرول افقی برای صفحه هایی که عرضشان کمتر از 992 پیکسل است می افزاید و ادامه ی اطلاعات را با اسکرول کردن نمایش میدهد.
یک مثال :
[php]
<body>
<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>
</body>
[/php]
همانند تصویر زیر :
