مثال پایه #
برای استایلدهی پایه—فاصلهی کم و فقط جداکنندههای افقی—کلاس پایه .table را به هر <table> اضافه کنید.
| # | نام | نام خانوادگی | نام مستعار |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | جیکب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
متغیرها #
از کلاسهای زمینهای برای رنگآمیزی جداول، ردیفهای جدول یا سلولهای فردی استفاده کنید.
| کلاس | عنوان | عنوان |
|---|---|---|
| پیشفرض | سلول | سلول |
| اصلی | سلول | سلول |
| ثانویه | سلول | سلول |
| موفقیت | سلول | سلول |
| خطر | سلول | سلول |
| هشدار | سلول | سلول |
| اطلاعات | سلول | سلول |
| روشنی | سلول | سلول |
| تاریکی | سلول | سلول |
<table class="table">
<thead>
<tr>
<th scope="col">کلاس</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
</tr>
</thead>
<tbody>
<tr>
<td>پیشفرض</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-primary">
<td>اصلی</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-secondary">
<td>ثانویه</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-success">
<td>موفقیت</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-danger">
<td>خطر</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-warning">
<td>هشدار</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-info">
<td>اطلاعات</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-light">
<td>روشنی</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr class="table-dark">
<td>تاریکی</td>
<td>سلول</td>
<td>سلول</td>
</tr>
</tbody>
</table>
جدول با ردیفهای راهراه #
برای افزودن راهراه زبرا به هر ردیف جدول در <tbody> از .table-striped استفاده کنید.
| # | نام | نام خانوادگی | نام مستعار |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | جیکب | تورنتون | @fat |
| 3 | لری پرنده | Simsons |
<table class="table table-striped table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td> Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جدول با ردیفهای راهراه تیره #
از .table-dark .table-striped برای افزودن راهراه زبرا به هر ردیف جدول در <tbody> استفاده کنید.
| # | نام | نام خانوادگی | نام مستعار |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | جیکب | تورنتون | @fat |
| 3 | لری پرنده | Simsons |
<table class="table table-dark table-striped table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td> Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جدول با ردیفهای راهراه موفقیت #
از .table-success .table-striped برای افزودن راهراه زبرا به هر ردیف جدول در <tbody> استفاده کنید.
| # | نام | نام خانوادگی | نام مستعار |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | جیکب | تورنتون | @fat |
| 3 | لری پرنده | Simsons |
<table class="table table-success table-striped table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td> Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
ستونهای راهراه #
از .table-striped-columns برای افزودن راهراه زبرا به هر ستون جدول استفاده کنید.
| # | نام | نام خانوادگی | نام مستعار |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | جیکب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-striped-columns table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
ستونهای راهراه تیره #
از .table-dark .table-striped-columns برای افزودن راهراه زبرا به هر ستون جدول استفاده کنید.
| # | نام | نام خانوادگی | نام مستعار |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | جیکب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-dark table-striped-columns table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
ستونهای راهراه تیره#
از .table-success .table-striped-columns برای اضافه کردن راهراههای زبرا به هر ستونی از جدول استفاده کنید.
| # | نام | نام خانوادگی | دستگاه |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | جیکوب | تورنتون | @fat |
| 3 | لری پرنده | سیمنسون |
<table class="table table-success table-striped-columns table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
ردیفهای شناور #
.table-hover را اضافه کنید تا وضعیت شناور را برای ردیفهای جدول درون یک <tbody> فعال کنید.
| # | نام | نام خانوادگی | دستگاه |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | جیکوب | تورنتون | @fat |
| 3 | لری پرنده | سیمنسون |
<table class="table table-hover table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
ردیفهای شناور تیره #
.table-dark .table-hover را اضافه کنید تا وضعیت شناور را برای ردیفهای جدول درون یک <tbody> فعال کنید.
| # | نام | نام خانوادگی | دستگاه |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | جیکوب | تورنتون | @fat |
| 3 | لری پرنده | سیمنسون |
<table class="table table-dark table-hover table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جدولهای فعال #
با اضافه کردن کلاس .table-active یک ردیف یا سلول جدول را هایلایت کنید.
| # | نام | نام خانوادگی | دستگاه |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | جیکوب | تورنتون | @fat |
| 3 | لری پرنده | سیمنسون |
<table class="table table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td class="table-active">Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جدولهای فعال تیره#
با اضافه کردن کلاس .table-dark .table-active یک ردیف یا سلول جدول را هایلایت کنید.
| # | نام | نام خانوادگی | دستگاه |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | جیکوب | تورنتون | @fat |
| 3 | لری پرنده | سیمنسون |
<table class="table table-dark table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td class="table-active">Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جدول با حاشیه #
برای حاشیههای همه سمتهای جدول و سلولها .table-bordered را اضافه کنید.
| # | نام | نام خانوادگی | شناسه |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">شناسه</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اوتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری پرنده</td>
<td>سیمپسونها</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جدول با حاشیه رنگی #
برای تغییر رنگها میتوانید .table-bordered و .border-primary را اضافه کنید.
| # | نام | نام خانوادگی | شناسه |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-bordered border-primary table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">شناسه</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اوتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری پرنده</td>
<td>سیمپسونها</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جداول بدون حاشیه #
برای جدول بدون حاشیه .table-borderless را اضافه کنید.
| # | نام | نام خانوادگی | شناسه |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-borderless table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">شناسه</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اوتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری پرنده</td>
<td>سیمپسونها</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جداول تاریک بدون حاشیه #
برای جدول بدون حاشیه و تاریک .table-borderless و .table-dark را اضافه کنید.
| # | نام | نام خانوادگی | شناسه |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-borderless table-dark table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">شناسه</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اوتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری پرنده</td>
<td>سیمپسونها</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جداول کوچک #
برای فشردهتر کردن هر جدول .table-sm را اضافه کنید.
| # | نام | نام خانوادگی | شناسه |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">شناسه</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اوتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری پرنده</td>
<td>سیمپسونها</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جداول کوچک تاریک#
برای فشردهتر کردن هر جدول و مخفی کردن حاشیهها .table-sm و .table-dark را اضافه کنید.
| # | نام | نام خانوادگی | شناسه |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسونها |
<table class="table table-dark table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">شناسه</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اوتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یعقوب</td>
<td>تورنتون</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری پرنده</td>
<td>سیمپسونها</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
جداکنندههای گروه جدول #
یک حاشیه ضخیمتر و تیرهتر بین گروههای جدول—<thead>، <tbody> و <tfoot>—اضافه کنید با .table-group-divider. رنگ را با تغییر border-top-color سفارشی کنید (که در حال حاضر برای آن یک کلاس ابزار مفید ارائه نمیدهیم).
| # | نام | نام خانوادگی | حساب کاربری |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری پرنده | سیمپسون |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simpsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
ترازبندی عمودی #
سلولهای جدول <thead> همیشه به پایین تراز میشوند. سلولهای جدول در <tbody> تراز خود را از <table> به ارث میبرند و به طور پیشفرض به بالا تراز میشوند. از کلاسهای تراس عمودی برای تراز مجدد در صورت نیاز استفاده کنید.
| عنوان 1 | عنوان 2 | عنوان 3 | عنوان 4 |
|---|---|---|---|
این سلول vertical-align: middle; را از جدول به ارث میبرد |
این سلول vertical-align: middle; را از جدول به ارث میبرد |
این سلول vertical-align: middle; را از جدول به ارث میبرد |
این متن جایگزین، به منظور اشغال فضای عمودی زیاد، برای نمایش نحوه کارکرد ترازبندی عمودی در سلولهای قبلی طراحی شده است. |
این سلول vertical-align: bottom; را از ردیف جدول به ارث میبرد |
این سلول vertical-align: bottom; را از ردیف جدول به ارث میبرد |
این سلول vertical-align: bottom; را از ردیف جدول به ارث میبرد |
این متن جایگزین، به منظور اشغال فضای عمودی زیاد، برای نمایش نحوه کارکرد ترازبندی عمودی در سلولهای قبلی طراحی شده است. |
این سلول vertical-align: middle; را از جدول به ارث میبرد |
این سلول vertical-align: middle; را از جدول به ارث میبرد |
این سلول به بالا تراز شده است. | این متن جایگزین، به منظور اشغال فضای عمودی زیاد، برای نمایش نحوه کارکرد ترازبندی عمودی در سلولهای قبلی طراحی شده است. |
<table class="table align-middle table-centered">
<thead>
<tr>
<th scope="col" class="w-25">Heading 1</th>
<th scope="col" class="w-25">Heading 2</th>
<th scope="col" class="w-25">Heading 3</th>
<th scope="col" class="w-25">Heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>این سلول <code>vertical-align: middle;</code> را از جدول به ارث میبرد</td>
<td>این سلول <code>vertical-align: middle;</code> را از جدول به ارث میبرد</td>
<td>این سلول <code>vertical-align: middle;</code> را از جدول به ارث میبرد</td>
<td>این متن جایگزین، به منظور اشغال فضای عمودی زیاد، برای نمایش نحوه کارکرد ترازبندی عمودی در سلولهای قبلی طراحی شده است.</td>
</tr>
<tr class="align-bottom">
<td>این سلول <code>vertical-align: bottom;</code> را از ردیف جدول به ارث میبرد</td>
<td>این سلول <code>vertical-align: bottom;</code> را از ردیف جدول به ارث میبرد</td>
<td>این سلول <code>vertical-align: bottom;</code> را از ردیف جدول به ارث میبرد</td>
<td>این متن جایگزین، به منظور اشغال فضای عمودی زیاد، برای نمایش نحوه کارکرد ترازبندی عمودی در سلولهای قبلی طراحی شده است.</td>
</tr>
<tr>
<td>این سلول <code>vertical-align: middle;</code> را از جدول به ارث میبرد</td>
<td>این سلول <code>vertical-align: middle;</code> را از جدول به ارث میبرد</td>
<td class="align-top">این سلول به بالا تراز شده است.</td>
<td>این متن جایگزین، به منظور اشغال فضای عمودی زیاد، برای نمایش نحوه کارکرد ترازبندی عمودی در سلولهای قبلی طراحی شده است.</td>
</tr>
</tbody>
</table>
جدول تو در تو#
سبکهای حاشیه، سبکهای فعال و نوعهای جدول توسط جدولهای تو در تو به ارث نمیرسند.
| # | اول | آخر | حساب کاربری | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | مارک | اوتو | @mdo | ||||||||||||
|
|||||||||||||||
| 3 | لری | پرنده | |||||||||||||
<table class="table table-bordered table-striped table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">سرعنوان</th>
<th scope="col">سرعنوان</th>
<th scope="col">سرعنوان</th>
</tr>
</thead>
<tbody>
<tr>
<td>الف</td>
<td>اول</td>
<td>آخر</td>
</tr>
<tr>
<td>ب</td>
<td>اول</td>
<td>آخر</td>
</tr>
<tr>
<td>ج</td>
<td>اول</td>
<td>آخر</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
سرجدول #
مشابه جداول و جداول تیره، از کلاسهای اصلاحکننده .table-light برای ایجاد سرجدولهای روشن یا تیره استفاده کنید.
| # | اول | آخر | حساب کاربری |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری | پرنده |
<table class="table table-centered">
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
سرجدول تیره#
مشابه جداول و جداول تیره، از کلاسهای اصلاحکننده .table-dark برای ایجاد سرجدولهای روشن یا تیره استفاده کنید.
| # | اول | آخر | حساب کاربری |
|---|---|---|---|
| 1 | مارک | اوتو | @mdo |
| 2 | یعقوب | تورنتون | @fat |
| 3 | لری | پرنده |
<table class="table table-centered">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
پاورقی جدول#
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | یدکاب | تورن | @fat |
| 3 | لری | پرنده | |
| پاورقی | پاورقی | پاورقی | پاورقی |
<table class="table table-centered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">نام کاربری</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یدکاب</td>
<td>تورن</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>پاورقی</td>
<td>پاورقی</td>
<td>پاورقی</td>
<td>پاورقی</td>
</tr>
</tfoot>
</table>
عنوانها#
یک <caption> مانند عنوانی برای یک جدول عمل میکند. این به کاربران با استفاده از صفحهخوان کمک میکند تا یک جدول را پیدا کنند و بفهمند که در مورد چه چیزی است و تصمیم بگیرند که آیا میخواهند آن را بخوانند یا خیر.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | یدکاب | تورن | @fat |
| 3 | لری پرنده | سیمپسون |
<table class="table table-centered">
<caption>لیست کاربران</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">نام کاربری</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یدکاب</td>
<td>تورن</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری پرنده</td>
<td>سیمپسون</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
عنوانها#
شما همچنین میتوانید <caption> را در بالای جدول با .caption-top قرار دهید.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | اتو | @mdo |
| 2 | یدکاب | تورن | @fat |
| 3 | لری | پرنده |
<table class="table caption-top table-centered">
<caption>لیست کاربران</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">نام</th>
<th scope="col">نام خانوادگی</th>
<th scope="col">نام کاربری</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>مارک</td>
<td>اتو</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>یدکاب</td>
<td>تورن</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>لری</td>
<td>پرنده</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
همیشه واکنشگرا#
در هر نقطه شکست، از .table-responsive برای جداولی که به صورت افقی پیمایش میشوند استفاده کنید.
| # | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان |
|---|---|---|---|---|---|---|---|---|---|
| 1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
<th scope="col">عنوان</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr>
<td>2</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
</tr>
<tr>
<td>3</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
<td>سلول</td>
</tr>
</tbody>
</table>
</div>
با آواتارها #
فهرستی از تمام کاربران در حساب شما شامل نام، عنوان، ایمیل و نقش آنها.
| نام | عنوان | ایمیل | نقش | عملیات |
|---|---|---|---|---|
تونی م. کارتر |
طراح | tonymcarter@jourrapide.com | عضو | ویرایش |
جیمز ای. چمب |
طراح UI/UX | jamesechambliss@teleworm.us | مدیر | ویرایش |
شارلوت جی. تورس |
کپیرایتر | charlotte@jourrapide.com | عضو | ویرایش |
مری جی. ژرمن |
فول استک | maryjgermain@jourrapide.com | مدیر عامل | ویرایش |
کوین سی. رییس |
مدیر محصول | kevincreyes@jourrapide.com | عضو | ویرایش |
<table class="table table-hover table-centered">
<thead class="table-light">
<tr>
<th scope="col">نام</th>
<th scope="col">عنوان</th>
<th scope="col">ایمیل</th>
<th scope="col">نقش</th>
<th scope="col">عملیات</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-2.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0"> تونی م. کارتر</h5>
</div>
</div>
</td>
<td>طراح</td>
<td>tonymcarter@jourrapide.com</td>
<td>عضو</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-1.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">جیمز ای. چمب</h5>
</div>
</div>
</td>
<td>طراح UI/UX</td>
<td>jamesechambliss@teleworm.us</td>
<td>مدیر</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-4.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">شارلوت جی. تورس</h5>
</div>
</div>
</td>
<td>کپیرایتر</td>
<td>charlotte@jourrapide.com</td>
<td>عضو</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr class="table-active">
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0 d-flex align-items-center gap-1">مری جی. ژرمن<i class='bx bxs-badge-check text-success'></i></h5>
</div>
</div>
</td>
<td>فول استک</td>
<td>maryjgermain@jourrapide.com</td>
<td>مدیر عامل</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-7.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">کوین سی. رییس</h5>
</div>
</div>
</td>
<td>مدیر محصول</td>
<td>kevincreyes@jourrapide.com</td>
<td>عضو</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
</tbody>
</table>
با چک باکسها #
فهرستی از تمام کاربران در حساب شما شامل نام، عنوان، ایمیل و نقش آنها.
|
|
نام | عنوان | ایمیل | نقش | عملیات |
|---|---|---|---|---|---|
|
|
تونی م. کارتر | طراح | tonymcarter@jourrapide.com | عضو | ویرایش |
|
|
جیمز ای. چمب | طراح UI/UX | jamesechambliss@teleworm.us | مدیر | ویرایش |
|
|
شارلوت جی. تورس | کپیرایتر | charlotte@jourrapide.com | عضو | ویرایش |
|
|
مری جی. ژرمن | فول استک | maryjgermain@jourrapide.com | مدیر عامل | ویرایش |
|
|
کوین سی. رییس | مدیر محصول | kevincreyes@jourrapide.com | عضو | ویرایش |
<table class="table table-striped table-borderless table-centered">
<thead class="table-light">
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
</div>
</th>
<th scope="col">نام</th>
<th scope="col">عنوان</th>
<th scope="col">ایمیل</th>
<th scope="col">نقش</th>
<th scope="col">عملیات</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td>
<td>تونی م. کارتر</td>
<td>طراح</td>
<td>tonymcarter@jourrapide.com</td>
<td>عضو</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
</div>
</td>
<td>جیمز ای. چمب</td>
<td>طراح UI/UX</td>
<td>jamesechambliss@teleworm.us</td>
<td>مدیر</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3">
</div>
</td>
<td>شارلوت جی. تورس</td>
<td>کپیرایتر</td>
<td>charlotte@jourrapide.com</td>
<td>عضو</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
</div>
</td>
<td>مری جی. ژرمن <i class='bx bxs-badge-check text-success'></i></td>
<td>فول استک</td>
<td>maryjgermain@jourrapide.com</td>
<td>مدیر عامل</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
</div>
</td>
<td>کوین سی. رییس</td>
<td>مدیر محصول</td>
<td>kevincreyes@jourrapide.com</td>
<td>عضو</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">ویرایش</a></td>
</tr>
</tbody>
</table>
جدول تو در تو #
استایلهای مرز، استایلهای فعال و واریانتهای جدول توسط جداول تو در تو به ارث برده نمیشوند.
| شماره فاکتور | مبلغ فاکتور | تأیید مشتری | تاریخ پرداخت برنامهریزیشده | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| F-011221/21 | $ 879.500 | 11/05/2023 | 12/05/2023 | ||||||||||||||||
|
|||||||||||||||||||
| F-011221/19 | $ 93.250 | 9/05/2023 | 10/05/2023 | ||||||||||||||||
<table class="table table-bordered table-striped table-centered">
<thead>
<tr>
<th scope="col">شماره فاکتور</th>
<th scope="col">مبلغ فاکتور</th>
<th scope="col">تأیید مشتری</th>
<th scope="col">تاریخ پرداخت برنامهریزیشده</th>
</tr>
</thead>
<tbody>
<tr>
<td>F-011221/21</td>
<td>$ 879.500</td>
<td>11/05/2023</td>
<td>12/05/2023</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">شماره ERP</th>
<th scope="col">نهاد قانونی حامل</th>
<th scope="col">مسئول لجستیک</th>
<th scope="col">وضعیت</th>
</tr>
</thead>
<tbody>
<tr>
<td>3-128-3</td>
<td>به مدیریت دارایی بروکفیلد</td>
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-7.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">کوین سی. رییس</h5>
</div>
</div>
</td>
<td><span class="badge bg-success-subtle text-success py-1 px-2">تأیید شده</span></td>
</tr>
<tr>
<td>3-128-2</td>
<td>مدیریت دارایی بروکفیلد</td>
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">مری جی. ژرمن</h5>
</div>
</div>
</td>
<td><span class="badge bg-warning-subtle text-warning py-1 px-2">در حال بررسی</span></td>
</tr>
<tr>
<td>3-128-1</td>
<td>مدیریت دارایی وستفیلد</td>
<td>
<div class="d-flex align-items-center gap-1">
<img src="/images/users/avatar-8.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">شارلوت جی. تورس</h5>
</div>
</div>
</td>
<td><span class="badge bg-danger-subtle text-danger py-1 px-2">رد شده</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>F-011221/19</td>
<td>$ 93.250</td>
<td>9/05/2023</td>
<td>10/05/2023</td>
</tr>
</tbody>
</table>