جداول

جدول ساده
نام تاریخ ایجاد شماره وضعیت
محمد ۳۰ آذر ۱۴۰۰ 0912123456 تکمیل‌شده
مونیکا ۱۰ اردیبهشت ۱۴۰۳ 0912123456 ناموفق
ساناز ۹ آذر ۱۴۰۳ 0912123456 موفق
بهاره ۲۸ اسفند ۱۴۰۲ 0912123456 در انتظار 
<div class="table-responsive" >
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th>نام</th>
                <th>تاریخ ایجاد</th>
                <th>شماره</th>
                <th>وضعیت</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>محمد</th>
                <td>۳۰ آذر ۱۴۰۰</td>
                <td>0912123456</td>
                <td><span class="badge bg-outline-primary">تکمیل‌شده</span></td>
            </tr>
            <tr>
                <th>مونیکا</th>
                <td>۱۰ اردیبهشت ۱۴۰۳</td>
                <td>0912123456</td>
                <td><span class="badge bg-outline-warning">ناموفق</span></td>
            </tr>
            <tr>
                <th>ساناز</th>
                <td>۹ آذر ۱۴۰۳</td>
                <td>0912123456</td>
                <td><span class="badge bg-outline-success">موفق</span></td>
            </tr>
            <tr>
                <th>بهاره</th>
                <td>۲۸ اسفند ۱۴۰۲</td>
                <td>0912123456</td>
                <td><span class="badge bg-outline-secondary">در انتظار</span></td>
            </tr>
        </tbody>
    </table>
</div>
جدول‌های با حاشیه
کاربر وضعیت ایمیل عملیات
img محمد
فعال kimosukuro@gmail.com
img هانیه
غیر فعال هانیه2132@gmail.com
img نوید
فعال azimokhan421@gmail.com
img سارا
فعال julianasams143@gmail.com 
<div class="table-responsive">
    <table class="table text-nowrap table-bordered">
        <thead>
            <tr>
                <th scope="col">کاربر</th>
                <th scope="col">وضعیت</th>
                <th scope="col">ایمیل</th>
                <th scope="col">عملیات</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/13.jpg" alt="img">
                        </span>محمد
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">فعال</span></td>
                <td>kimosukuro@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 offline avatar-rounded">
                            <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/6.jpg" alt="img">
                        </span>هانیه
                    </div>
                </th>
                <td><span class="badge bg-light text-dark">غیرفعال</span></td>
                <td>هانیه2132@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/15.jpg" alt="img">
                        </span>نوید
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">فعال</span></td>
                <td>azimokhan421@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/5.jpg" alt="img">
                        </span>سارا
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">فعال</span></td>
                <td>julianasams143@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
جدول با حاشیه‌ی اصلی
سفارش تاریخ مشتری عملیات
#0007 1403-10-05
img مریم
رزرو شده
#0008 1403-10-05
img هانیه
رزرو شده
#0009 1403-10-05
img نرگس
رزرو شده 
<div class="table-responsive">
        <table class="table text-nowrap table-bordered border-primary">
            <thead>
                <tr>
                    <th scope="col">Order</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        #0007
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1403-10-05</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/3.jpg" alt="img">
                            </span>مریم
                        </div>
                    </td>
                    <td><span class="badge bg-primary-transparent">رزرو شده</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0008
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1403-10-05</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/6.jpg" alt="img">
                            </span>هانیه
                        </div>
                    </td>
                    <td><span class="badge bg-primary-transparent">رزرو شده</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0009
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1403-10-05</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/1.jpg" alt="img">
                            </span>نرگس
                        </div>
                    </td>
                    <td><span class="badge bg-primary-transparent">رزرو شده</span></td>
                </tr>

            </tbody>
        </table>
    </div>
جدول مرزبندی شده موفق
سفارش تاریخ مشتری وضعیت
#0011 1402-10-05
img محمد
تحویل داده شد
#0012 1402-10-05
img بردیا
تحویل داده شد
#0013 1402-10-05
img کامران
تحویل داده شد 
<div class="table-responsive">
        <table class="table text-nowrap table-bordered border-success">
            <thead>
                <tr>
                    <th scope="col">Order</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        #0011
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1402-10-05</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/10.jpg" alt="img">
                            </span>محمد
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent">تحویل داده شد</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0012
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1402-10-05</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/14.jpg" alt="img">
                            </span>بردیا
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent">تحویل داده شد</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0013
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1402-10-05</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/12.jpg" alt="img">
                            </span>کامران
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent">تحویل داده شد</span></td>
                </tr>
            </tbody>
        </table>
    </div>
جدول با حاشیه هشدار
سفارش تاریخ مشتری عملیات
#0014 1403-04-15
img محمد
پذیرفته شد
#0018 1403-04-15
img سامان
پذیرفته شد
#0020 1403-04-15
img پریا
پذیرفته شد 
<div class="table-responsive">
        <table class="table text-nowrap table-bordered border-warning">
            <thead>
                <tr>
                    <th scope="col">Order</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        #0014
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1403-04-15</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/13.jpg" alt="img">
                            </span>محمد
                        </div>
                    </td>
                    <td><span class="badge bg-warning-transparent">پذیرفته شد</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0018
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1403-04-15</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/11.jpg" alt="img">
                            </span>سامان
                        </div>
                    </td>
                    <td><span class="badge bg-warning-transparent">پذیرفته شد</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0020
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">1403-04-15</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://codeigniter.spruko.com/meno/meno/assets/images/faces/2.jpg" alt="img">
                            </span>پریا
                        </div>
                    </td>
                    <td><span class="badge bg-warning-transparent">پذیرفته شد</span></td>
                </tr>
            </tbody>
        </table>
    </div>
جدول بدون حاشیه
نام کاربری شناسه تراکنش ایجاد شده وضعیت
نام کاربری #5182-3467 24 مهر 1403 ثابت
نام کاربری #5182-3412 24 مهر 1403 در حال پیشرفت
نام کاربری #5182-3423 24 مهر 1403 تکمیل شده
سامان #5182-3456 24 مهر 1403 در انتظار 
<div class="table-responsive">
        <table class="table text-nowrap table-borderless">
            <thead>
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">نام کاربری</th>
                    <td>#5182-3467</td>
                    <td>24 مهر 1403</td>
                    <td><span class="badge bg-primary">ثابت</span></td>
                </tr>
                <tr>
                    <th scope="row">نام کاربری</th>
                    <td>#5182-3412</td>
                    <td>24 مهر 1403</td>
                    <td><span class="badge bg-warning">در حال پیشرفت</span></td>
                </tr>
                <tr>
                    <th scope="row">نام کاربری</th>
                    <td>#5182-3423</td>
                    <td>24 مهر 1403</td>
                    <td><span class="badge bg-success">تکمیل شده</span></td>
                </tr>
                <tr>
                    <th scope="row">سامان</th>
                    <td>#5182-3456</td>
                    <td>24 مهر 1403</td>
                    <td><span class="badge bg-danger">در انتظار</span></td>
                </tr>
            </tbody>
        </table>
    </div>
تقسیم‌بندی جدول
محصول فروشنده درصد فروش تعداد فروش
ساعت هوشمند یاس 24.23% 250/1786
کتانی سفید پوشاک 12.45% 123/985
چوب بیسبال اسپرتی 06.64% 124/232
هودی سیاه لباس یک 14.42% 192/2456 
<div class="table-responsive">
            <table class="table text-nowrap">
                <thead>
                    <tr>
                        <th scope="col">محصول</th>
                        <th scope="col">فروشنده</th>
                        <th scope="col">درصد فروش</th>
                        <th scope="col">تعداد فروش</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    <tr>
                        <th scope="row">ساعت هوشمند</th>
                        <td>یاس</td>
                        <td><a href="javascript:void(0);" class="text-success">24.23%<i
                                    class="ri-arrow-up-fill ms-1"></i></a></td>
                        <td>250/1786</td>
                    </tr>
                    <tr>
                        <th scope="row">کتانی سفید</th>
                        <td>پوشاک</td>
                        <td><a href="javascript:void(0);" class="text-danger">12.45%<i
                                    class="ri-arrow-down-fill ms-1"></i></a></td>
                        <td>123/985</td>
                    </tr>
                    <tr>
                        <th scope="row">چوب بیسبال</th>
                        <td>اسپرتی</td>
                        <td><a href="javascript:void(0);" class="text-success">06.64%<i
                                    class="ri-arrow-up-fill ms-1"></i></a></td>
                        <td>124/232</td>
                    </tr>
                    <tr>
                        <th scope="row">هودی سیاه</th>
                        <td>لباس یک</td>
                        <td><a href="javascript:void(0);" class="text-success">14.42%<i
                                    class="ri-arrow-up-fill ms-1"></i></a></td>
                        <td>192/2456</td>
                    </tr>
                </tbody>
            </table>
        </div>