برای استفاده از سادهترین جدول، کلاس .table را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | وضعیت | حقوق | تماس |
|---|---|---|---|---|---|---|
| 1 |  کامران نیکنفس | معمار | تهران | فعال | 320,800 | +98 (021) 466-7506 |
| 2 |  محمد گررت | حسابدار | اصفهان | در انتظار | 170,750 | +98 (031) 476-9505 |
| 3 |  آرش کاظمی | تکنسین | شیراز | در انتظار | 86,000 | +98 (071) 375-6641 |
| 4 |  صدرا کمالی | توسعهدهنده | تهران | فعال | 433,060 | +98 (021) 619-7749 |
| 5 |  آیرین ستوده | حسابدار | اصفهان | در انتظار | 162,700 | +98 (031) 465-2290 |
| 6 |  رضا ولیمی | یکپارچهسازی | مشهد | فعال | 372,000 | +98 (051) 793-6446 |
برای استفاده از جدول تیره، کلاس .table-dark را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | سن | حقوق |
|---|---|---|---|---|---|
| 1 | کامران نیکنفس | معمار | تهران | 61 | 320,800 |
| 2 | محمد گررت | حسابدار | اصفهان | 63 | 170,750 |
| 3 | آرش کاظمی | تکنسین | شیراز | 66 | 86,000 |
| 4 | صدرا کمالی | توسعهدهنده | تهران | 22 | 433,060 |
| 5 | آیرین ستوده | حسابدار | اصفهان | 33 | 162,700 |
| 6 | رضا ولیمی | یکپارچهسازی | مشهد | 33 | 162,700 |
برای جدول دارای کادر از کلاس .table-bordered استفاده کنید و برای جدول راهراه از کلاس .table-striped استفاده نمایید.
| شناسه | نام | سمت | دفتر | وضعیت | حقوق |
|---|---|---|---|---|---|
| 1 | | معمار | تهران | فعال | 320,800 |
| 2 | | حسابدار | اصفهان | در انتظار | 170,750 |
| 3 | | تکنسین | شیراز | در انتظار | 86,000 |
| 4 | | توسعهدهنده | تهران | فعال | 433,060 |
| 5 | | حسابدار | اصفهان | در انتظار | 162,700 |
| 6 | | یکپارچهسازی | مشهد | فعال | 162,700 |
برای استفاده از جدول بدون کادر، کلاس .table-borderless را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | سن | حقوق |
|---|---|---|---|---|---|
| 1 | کامران نیکنفس | فعال | تهران | 61 | 320,800 |
| 2 | محمد گررت | در انتظار | اصفهان | 63 | 170,750 |
| 3 | آرش کاظمی | در انتظار | شیراز | 66 | 86,000 |
| 4 | صدرا کمالی | فعال | تهران | 22 | 433,060 |
| 5 | آیرین ستوده | در انتظار | اصفهان | 33 | 162,700 |
| 6 | رضا ولیمی | فعال | مشهد | 33 | 162,700 |
برای فعالسازی قابلیت هاور روی سطرهای جدول، کلاس .table-hover را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | وضعیت | حقوق | تماس |
|---|---|---|---|---|---|---|
| 1 | کامران نیکنفس | معمار | تهران | فعال | 320,800 | +98 (021) 466-7506 |
| 2 | محمد گررت | حسابدار | اصفهان | در انتظار | 170,750 | +98 (031) 476-9505 |
| 3 | آرش کاظمی | تکنسین | شیراز | در انتظار | 86,000 | +98 (071) 375-6641 |
| 4 | صدرا کمالی | توسعهدهنده | تهران | فعال | 433,060 | +98 (021) 619-7749 |
| 5 | آیرین ستوده | حسابدار | اصفهان | در انتظار | 162,700 | +98 (031) 465-2290 |
| 6 | رضا ولیمی | یکپارچهسازی | مشهد | فعال | 162,700 | +98 (051) 793-6446 |
برای ایجاد جدول کوچک، کلاس .table-sm را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | سن | حقوق |
|---|---|---|---|---|---|
| 1 | کامران نیکنفس | معمار | تهران | 61 | 320,800 |
| 2 | محمد گررت | حسابدار | اصفهان | 63 | 170,750 |
| 3 | آرش کاظمی | تکنسین | شیراز | 66 | 86,000 |
| 4 | صدرا کمالی | توسعهدهنده | تهران | 22 | 433,060 |
| 5 | آیرین ستوده | حسابدار | اصفهان | 33 | 162,700 |
| 6 | رضا ولیمی | یکپارچهسازی | مشهد | 33 | 162,700 |
برای ایجاد جدول بزرگ، کلاس .table-lg را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | وضعیت | حقوق |
|---|---|---|---|---|---|
| 1 | کامران نیکنفس | معمار | تهران | فعال | 320,800 |
| 2 | محمد گررت | حسابدار | اصفهان | در انتظار | 170,750 |
| 3 | آرش کاظمی | تکنسین | شیراز | در انتظار | 86,000 |
| 4 | صدرا کمالی | توسعهدهنده | تهران | فعال | 433,060 |
| 5 | آیرین ستوده | حسابدار | اصفهان | در انتظار | 162,700 |
| 6 | رضا ولیمی | یکپارچهسازی | مشهد | فعال | 162,700 |
برای افزودن کادر در پایین جدول، کلاس .table-bottom-border را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | تیم | حقوق |
|---|---|---|---|---|---|
| 1 | کامران نیکنفس | معمار | تهران | 320,800 | |
| 2 | محمد گررت | حسابدار | اصفهان | 170,750 | |
| 3 | آرش کاظمی | تکنسین | شیراز | 86,000 | |
| 4 | احمد اورت | توسعهدهنده | مشهد | 36,000 | |
| 5 | حمید مرزبان | حسابدار | مشهد | 62,000 | |
| 6 | رضا ولیمی | توسعهدهنده | مشهد | 894,000 |
برای فعالسازی نوارهای راهراه در ستونها، کلاس .table-striped-columns را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | سن | حقوق |
|---|---|---|---|---|---|
| 1 | کامران نیکنفس | معمار | تهران | 61 | 320,800 |
| 2 | محمد گررت | حسابدار | اصفهان | 63 | 170,750 |
| 3 | آرش کاظمی | تکنسین | شیراز | 66 | 86,000 |
| 4 | صدرا کمالی | توسعهدهنده | تهران | 22 | 433,060 |
| 5 | آیرین ستوده | حسابدار | اصفهان | 33 | 162,700 |
| 6 | رضا ولیمی | یکپارچهسازی | مشهد | 33 | 162,700 |
برای استفاده از جدول با رنگهای متنوع، کلاس .table-Variants را به تگ جدول اضافه کنید.
| شناسه | نام | سمت | دفتر | سن | حقوق |
|---|---|---|---|---|---|
| 1 | کامران نیکنفس | معمار | تهران | 61 | 320,800 |
| 2 | محمد گررت | حسابدار | اصفهان | 63 | 170,750 |
| 3 | آرش کاظمی | تکنسین | شیراز | 66 | 86,000 |
| 4 | صدرا کمالی | توسعهدهنده | تهران | 22 | 433,060 |
| 5 | آیرین ستوده | حسابدار | اصفهان | 33 | 162,700 |
| 6 | رضا ولیمی | یکپارچهسازی | مشهد | 33 | 162,700 |
سبکهای کادر، حالت فعال و رنگبندی در جدولهای تو در تو به ارث برده نمیشوند.
| # | نام | نام خانوادگی | شناسه کاربری | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | مهدی | یوسفی | @mdo | |||||||||
| ||||||||||||
| 3 | علی | کاظمی | ||||||||||
| 4 | امیر | ملکی | ||||||||||
| 5 | حسین | پاکزاد | ||||||||||
برای راستچین کردن ستون آخر، کلاس .text-end را به تگ مربوطه اضافه کنید.
| نام | حقوق |
|---|---|
| کامران نیکنفس | 320,800 |
| محمد گررت | 170,750 |
| آرش کاظمی | 86,000 |
| رضا ولیمی | 547,000 |
با استفاده از کلاس .table-responsive-"sm","md","lg","xl","xxl" میتوانید جدولها را در صفحهنمایشهای کوچک بهصورت اسکرول افقی نمایش دهید.
| # | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان | عنوان |
|---|---|---|---|---|---|---|---|---|---|
| 1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 4 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
