جدول ساده
جدول ساده
برای استفاده از جدول ساده کافی است از کلاس .table در جدول خود
استفاده کنید
| شناسه | نام | سمت | اداره | وضعیت | حقوق | تماس |
|---|---|---|---|---|---|---|
| 1 |
طاهر محرابی |
معمار | تهران | فعال | 320800000 | +1 (025) 466-7506 |
| 2 |
گوهر جواهری |
حسابدار | مشهد | معلق | 170750000 | +1 (790) 476-9505 |
| 3 |
احمد کاوه |
تکنیکال | شیراز | معلق | 86000000 | +1 (227) 375-6641 |
| 4 |
سینا کیوان |
توسعه دهنده | تهران | فعال | 433060000 | +1 (213) 619-7749 |
| 5 |
آهو صفاری |
حسابدار | مشهد | معلق | 162700000 | +1 (152) 465-2290 |
| 6 |
وحید جوادی x |
ادغام | اصفهان | فعال | 372000000 | +1 (185) 793-6446 |
جدول تاریک
برای استفاده از جدول حالت تاریک کافی است از کلاس .table-dark
در جدول خود استفاده کنید
| شناسه | نام | سمت | اداره | سن | حقوق |
|---|---|---|---|---|---|
| 1 | طاهر محرابی | معمار | تهران | 61 | 320800000 |
| 2 | گوهر جواهری | حسابدار | مشهد | 63 | 170750000 |
| 3 | احمد کاوه | تکنیکال | شیراز | 66 | 86000000 |
| 4 | سینا کیوان | توسعه دهنده | تهران | 22 | 433060000 |
| 5 | آهو صفاری | حسابدار | مشهد | 33 | 162700000 |
| 6 | وحید جوادی | ادغام | اصفهان | 61 | 372000000 |
جدول حاشیه دار و راه راه
برای استفاده از جدول حاشیه دار کافی است از کلاس
.table-bordered استفاده کنید و برای جدول راه راه از کلاس
.table-striped استفاده کنید
| شناسه | نام | سمت | اداره | وضعیت | حقوق |
|---|---|---|---|---|---|
| 1 |
طاهر محرابی |
معمار | تهران | فعال | 320800000 |
| 2 |
گوهر جواهری |
حسابدار | مشهد | معلق | 170750000 |
| 3 |
احمد کاوه |
تکنیکال | شیراز | معلق | 86000000 |
| 4 |
سینا کیوان |
توسعه دهنده | تهران | فعال | 433060000 |
| 5 |
آهو صفاری |
حسابدار | مشهد | معلق | 162700000 |
| 6 |
وحید جوادی x |
ادغام | اصفهان | فعال | 372000000 |
جدول بدون حاشیه
برای استفاده از جداول بدون حاشیه کافی است از کلاس
.table-borderless استفاده کنید
| شناسه | نام | سمت | اداره | سن | حقوق |
|---|---|---|---|---|---|
| 1 | طاهر محرابی | معمار | تهران | 61 | 320800000 |
| 2 | گوهر جواهری | حسابدار | مشهد | 63 | 170750000 |
| 3 | احمد کاوه | تکنیکال | شیراز | 66 | 86000000 |
| 4 | سینا کیوان | توسعه دهنده | تهران | 22 | 433060000 |
| 5 | آهو صفاری | حسابدار | مشهد | 33 | 162700000 |
| 6 | وحید جوادی | ادغام | اصفهان | 61 | 372000000 |
جدول با قابلیت هاور
برای افزودن قابلیت هاور به جدول خود کافی است از کلاس
.table-hover در جدول خود استفاده کنید
| شناسه | نام | سمت | اداره | وضعیت | حقوق | تماس |
|---|---|---|---|---|---|---|
| 1 |
طاهر محرابی |
معمار | تهران | فعال | 320800000 | +1 (025) 466-7506 |
| 2 |
گوهر جواهری |
حسابدار | مشهد | معلق | 170750000 | +1 (790) 476-9505 |
| 3 |
احمد کاوه |
تکنیکال | شیراز | معلق | 86000000 | +1 (227) 375-6641 |
| 4 |
سینا کیوان |
توسعه دهنده | تهران | فعال | 433060000 | +1 (213) 619-7749 |
| 5 |
آهو صفاری |
حسابدار | مشهد | معلق | 162700000 | +1 (152) 465-2290 |
| 6 |
وحید جوادی x |
ادغام | اصفهان | فعال | 372000000 | +1 (185) 793-6446 |
جدول کوچک
برای استفاده از جدول کوچک کافی است کلاس .table-sm را به جدول
خود اضافه کنید
| شناسه | نام | سمت | اداره | سن | حقوق |
|---|---|---|---|---|---|
| 1 | طاهر محرابی | معمار | تهران | 61 | 320800000 |
| 2 | گوهر جواهری | حسابدار | مشهد | 63 | 170750000 |
| 3 | احمد کاوه | تکنیکال | شیراز | 66 | 86000000 |
| 4 | سینا کیوان | توسعه دهنده | تهران | 22 | 433060000 |
| 5 | آهو صفاری | حسابدار | مشهد | 33 | 162700000 |
| 6 | وحید جوادی | ادغام | اصفهان | 61 | 372000000 |
جدول بزرگ
برای استفاده از جدول بزرگ کافی است کلاس .table-lg را به جدول
خود اضافه کنید
| شناسه | نام | سمت | اداره | وضعیت | حقوق |
|---|---|---|---|---|---|
| 1 | طاهر محرابی | معمار | تهران | فعال | 320800000 |
| 2 | گوهر جواهری | حسابدار | مشهد | معلق | 170750000 |
| 3 | احمد کاوه | تکنیکال | شیراز | فعال | 86000000 |
| 6 | وحید جوادی | ادغام | اصفهان | معلق | 372000000 |
جدول با حاشیه در پایین
برای استفاده از جدول با حاشیه پایین کافی است کلاس
.table-bottom-border
را به جدول خود اضافه کنید
| شناسه | نام | سمت | اداره | تیم | حقوق |
|---|---|---|---|---|---|
| 1 | طاهر محرابی | معمار | تهران |
|
320800000 |
| 2 | گوهر جواهری | حسابدار | مشهد |
|
170750000 |
| 3 | احمد کاوه | تکنیکال | شیراز |
|
86000000 |
| 4 | رویداد | توسعه دهنده | اصفهان |
|
36000000 |
| 5 | مهران | حسابدار | اصفهان |
|
62000000 |
| 6 | وحید جوادی | توسعه دهنده | اصفهان |
|
894000000 |
جدول با ستون های راه راه
برای استفاده از جدول با ستون های راه راه کافی است کلاس
.table-striped-columns
را به جدول خود اضافه کنید
| شناسه | نام | سمت | اداره | سن | حقوق |
|---|---|---|---|---|---|
| 1 | طاهر محرابی | معمار | تهران | 61 | 320800000 |
| 2 | گوهر جواهری | حسابدار | مشهد | 63 | 170750000 |
| 3 | احمد کاوه | تکنیکال | شیراز | 66 | 86000000 |
| 4 | رویداد | وحید جوادی | اصفهان | 60 | 36000000 |
| 5 | مهران | صوتی | اصفهان | 49 | 62000000 |
| 6 | وحید جوادی | ادغام | اصفهان | 56 | 894000000 |
جدول متنوع
برای استفاده از جدول متنوع کافی است کلاس .table-Variants
را به جدول خود اضافه کنید
| شناسه | نام | سمت | اداره | سن | حقوق |
|---|---|---|---|---|---|
| 1 | طاهر محرابی | معمار | تهران | 61 | 320800000 |
| 2 | گوهر جواهری | حسابدار | مشهد | 63 | 170750000 |
| 3 | احمد کاوه | تکنیکال | شیراز | 66 | 86000000 |
| 4 | رویداد | وحید جوادی | اصفهان | 60 | 36000000 |
| 5 | مهران | صوتی | اصفهان | 49 | 62000000 |
| 6 | وحید جوادی | ادغام | اصفهان | 56 | 894000000 |
| 6 | وحید جوادی | ادغام | اصفهان | 56 | 894000000 |
| 6 | وحید جوادی | ادغام | اصفهان | 56 | 894000000 |
جدول تودرتو
استایل های حاشیه ، فعال و جدول متنوع در جدول های تودرتو به ارث نمیرسند
| # | اول | دوم | هندل | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | مهرداد | اوتادی | @mdo | |||||||||
|
||||||||||||
| 3 | لاله | بهادری | ||||||||||
| 4 | الهام | مانوی | ||||||||||
| 5 | لیلا | پهلوانی | ||||||||||
جدول دوطرفه
برای استفاده از جدول دوطرفه کافی است کلاس .text-end را به جدول
خود اضافه کنید
| نام | حقوق |
|---|---|
| طاهر محرابی | 320800000 |
| گوهر جواهری | 170750000 |
| احمد کاوه | 86000000 |
| وحید جوادی | 547000000 |
| ادریس والا | 372000000 |
جدول واکنشگرا
برای جدول واکنشگرا از کلاس های
.table-responsive{-sm|-md|-lg|-xl|-xxl} در جدول خود استفاده
کنید.
| # | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان |
|---|---|---|---|---|---|---|---|---|---|
| 1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 4 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |