جداول در Bootstrap

در بسیاری از وب‌سایت‌ها و پنل‌های مدیریتی، لازم است اطلاعات مختلف را به شکل منظم و قابل خواندن به کاربر نمایش دهیم. برای مثال، در یک فروشگاه اینترنتی ممکن است بخواهیم لیست محصولات، قیمت، موجودی و وضعیت هر محصول را نمایش دهیم یا در یک پنل مدیریت کاربران، نام، ایمیل، تاریخ ثبت‌نام و وضعیت حساب کاربران را نشان دهیم. HTML به‌صورت پیش‌فرض امکان ساخت جدول را در اختیار ما قرار می‌دهد، اما Bootstrap مجموعه‌ای از کلاس‌های آماده برای زیباتر کردن، مرتب‌سازی، واکنش‌گرا کردن و مدیریت بهتر جدول‌ها ارائه می‌کند. در این مقاله با ساخت جدول در Bootstrap، کلاس‌های مختلف برای رنگ‌بندی، حاشیه، ردیف‌های راه‌راه، حالت Hover، جدول‌های کوچک و مهم‌تر از همه جدول‌های Responsive آشنا می‌شویم. همچنین در پایان یک جدول واقعی شبیه جدول‌های مورد استفاده در پنل‌های مدیریتی ایجاد خواهیم کرد.

جدول در HTML چیست؟

جدول یا Table برای نمایش اطلاعات ساختاریافته در قالب سطر و ستون استفاده می‌شود.

یک جدول ساده HTML به شکل زیر است:

<table>
    <tr>
        <th>نام</th>
        <th>ایمیل</th>
        <th>سن</th>
    </tr>

    <tr>
        <td>علی</td>
        <td>ali@example.com</td>
        <td>25</td>
    </tr>

    <tr>
        <td>رضا</td>
        <td>reza@example.com</td>
        <td>30</td>
    </tr>
</table>

در این ساختار:

• table جدول را ایجاد می‌کند.

• tr یک سطر ایجاد می‌کند.

• th یک سلول عنوان ایجاد می‌کند.

• td یک سلول معمولی ایجاد می‌کند.

اما برای اینکه این جدول ظاهر حرفه‌ای‌تری داشته باشد، می‌توانیم از Bootstrap استفاده کنیم.

ساخت جدول با Bootstrap

برای استفاده از قابلیت‌های Bootstrap کافی است کلاس table را به عنصر table اضافه کنیم:

<table class="table">
    <tr>
        <th>نام</th>
        <th>ایمیل</th>
        <th>سن</th>
    </tr>

    <tr>
        <td>علی</td>
        <td>ali@example.com</td>
        <td>25</td>
    </tr>

    <tr>
        <td>رضا</td>
        <td>reza@example.com</td>
        <td>30</td>
    </tr>
</table>

کلاس table مهم‌ترین کلاس Bootstrap برای شروع کار با جدول‌ها است.

ساختار استاندارد جدول

بهتر است جدول‌های HTML را با ساختار کامل‌تر ایجاد کنیم.

<table class="table">
    <thead>
        <tr>
            <th>نام</th>
            <th>ایمیل</th>
            <th>سن</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>ali@example.com</td>
            <td>25</td>
        </tr>

        <tr>
            <td>رضا</td>
            <td>reza@example.com</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

در اینجا:

• thead بخش عنوان جدول است.

• tbody محتوای اصلی جدول است.

• tfoot در صورت نیاز برای بخش پایانی جدول استفاده می‌شود.

استفاده از این ساختار علاوه بر نظم بیشتر، به دسترس‌پذیری و درک بهتر ساختار جدول توسط ابزارهای مختلف نیز کمک می‌کند.

کلاس table

کلاس اصلی جدول Bootstrap به شکل زیر است:

<table class="table">

یک نمونه کامل:

<table class="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$900</td>
            <td>12</td>
        </tr>

        <tr>
            <td>Mouse</td>
            <td>$30</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

Bootstrap ظاهر پایه جدول را مدیریت می‌کند و جدول خواناتر می‌شود.

جدول راه‌راه با table-striped

اگر بخواهیم رنگ پس‌زمینه سطرها به‌صورت یکی در میان تغییر کند، می‌توانیم از table-striped استفاده کنیم.

<table class="table table-striped">
    <thead>
        <tr>
            <th>نام</th>
            <th>ایمیل</th>
            <th>وضعیت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>ali@example.com</td>
            <td>فعال</td>
        </tr>

        <tr>
            <td>رضا</td>
            <td>reza@example.com</td>
            <td>غیرفعال</td>
        </tr>

        <tr>
            <td>مریم</td>
            <td>maryam@example.com</td>
            <td>فعال</td>
        </tr>
    </tbody>
</table>

این قابلیت به‌خصوص زمانی مفید است که جدول تعداد زیادی سطر داشته باشد.

حالت Hover با table-hover

برای تغییر ظاهر سطر هنگام قرار گرفتن نشانگر ماوس روی آن، از table-hover استفاده می‌کنیم.

<table class="table table-hover">
    <thead>
        <tr>
            <th>نام</th>
            <th>ایمیل</th>
            <th>وضعیت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>ali@example.com</td>
            <td>فعال</td>
        </tr>

        <tr>
            <td>رضا</td>
            <td>reza@example.com</td>
            <td>فعال</td>
        </tr>
    </tbody>
</table>

برای پنل‌های مدیریتی این قابلیت می‌تواند باعث شود کاربر راحت‌تر متوجه شود روی کدام سطر قرار گرفته است.

ترکیب table-striped و table-hover

کلاس‌های جدول Bootstrap را می‌توان با یکدیگر ترکیب کرد.

<table class="table table-striped table-hover">

برای مثال:

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>نام</th>
            <th>نقش</th>
            <th>وضعیت</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>

جدول دارای حاشیه با table-bordered

برای نمایش حاشیه اطراف سلول‌ها می‌توانیم از table-bordered استفاده کنیم.

<table class="table table-bordered">

مثال:

<table class="table table-bordered">
    <thead>
        <tr>
            <th>محصول</th>
            <th>قیمت</th>
            <th>موجودی</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$900</td>
            <td>10</td>
        </tr>

        <tr>
            <td>Keyboard</td>
            <td>$50</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

این حالت برای جدول‌هایی که مرزبندی دقیق سلول‌ها اهمیت دارد مناسب است.

جدول بدون حاشیه با table-borderless

گاهی می‌خواهیم جدول ظاهری ساده و مینیمال داشته باشد.

در این شرایط می‌توانیم از:

table-borderless

استفاده کنیم.

<table class="table table-borderless">
    <thead>
        <tr>
            <th>نام</th>
            <th>سمت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>Developer</td>
        </tr>

        <tr>
            <td>رضا</td>
            <td>Designer</td>
        </tr>
    </tbody>
</table>

جدول فشرده با table-sm

اگر فضای صفحه محدود باشد، می‌توانیم فاصله داخلی سلول‌ها را کاهش دهیم.

برای این کار:

<table class="table table-sm">

مثال:

<table class="table table-sm">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Ali</td>
            <td>Active</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Reza</td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

این گزینه برای جدول‌های مدیریتی با تعداد ستون زیاد بسیار کاربردی است.

جدول با پس‌زمینه تیره

Bootstrap امکان ساخت جدول با ظاهر تیره را نیز فراهم می‌کند.

<table class="table table-dark">

مثال:

<table class="table table-dark">
    <thead>
        <tr>
            <th>نام</th>
            <th>ایمیل</th>
            <th>وضعیت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Ali</td>
            <td>ali@example.com</td>
            <td>Active</td>
        </tr>

        <tr>
            <td>Reza</td>
            <td>reza@example.com</td>
            <td>Inactive</td>
        </tr>
    </tbody>
</table>

رنگ‌بندی سطرها

Bootstrap اجازه می‌دهد برای سطرها یا سلول‌های جدول از کلاس‌های رنگی استفاده کنیم.

برخی کلاس‌های رایج عبارت‌اند از:

table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark

برای مثال:

<table class="table">
    <tbody>
        <tr class="table-success">
            <td>عملیات با موفقیت انجام شد</td>
        </tr>

        <tr class="table-warning">
            <td>این مورد نیاز به بررسی دارد</td>
        </tr>

        <tr class="table-danger">
            <td>عملیات ناموفق بود</td>
        </tr>
    </tbody>
</table>

این کلاس‌ها می‌توانند روی tr یا در موارد مناسب روی سلول‌ها استفاده شوند.

مثال جدول وضعیت سفارش‌ها

<table class="table">
    <thead>
        <tr>
            <th>Order</th>
            <th>Customer</th>
            <th>Status</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>#1001</td>
            <td>Ali</td>
            <td class="table-success">Completed</td>
        </tr>

        <tr>
            <td>#1002</td>
            <td>Reza</td>
            <td class="table-warning">Pending</td>
        </tr>

        <tr>
            <td>#1003</td>
            <td>Maryam</td>
            <td class="table-danger">Canceled</td>
        </tr>
    </tbody>
</table>

در اینجا رنگ سلول وضعیت بر اساس مقدار آن انتخاب شده است.

استفاده از thead، tbody و tfoot

در جدول‌های بزرگ‌تر ممکن است به بخش پایانی نیز نیاز داشته باشیم.

<table class="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$900</td>
            <td>2</td>
        </tr>

        <tr>
            <td>Mouse</td>
            <td>$30</td>
            <td>3</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Total</th>
            <th colspan="2">$990</th>
        </tr>
    </tfoot>
</table>

tfoot برای اطلاعاتی مانند جمع، نتیجه یا توضیحات پایانی جدول کاربرد دارد.

جدول Responsive در Bootstrap

یکی از مهم‌ترین قابلیت‌های Bootstrap برای جدول‌ها، Responsive کردن آنها است.

فرض کنید یک جدول دارای ۱۰ ستون باشد. در صفحه دسکتاپ مشکلی وجود ندارد، اما در تلفن همراه عرض صفحه برای نمایش همه ستون‌ها کافی نیست.

به جای اینکه جدول را مجبور کنیم بیش از عرض صفحه شود، می‌توانیم آن را داخل یک Wrapper قرار دهیم:

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

در نمایشگرهای کوچک، کاربر می‌تواند جدول را به صورت افقی پیمایش کند.

مثال جدول Responsive

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>City</th>
                <th>Role</th>
                <th>Status</th>
                <th>Created</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>Ali</td>
                <td>ali@example.com</td>
                <td>09120000000</td>
                <td>Tehran</td>
                <td>User</td>
                <td>Active</td>
                <td>2026-09-01</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Reza</td>
                <td>reza@example.com</td>
                <td>09121111111</td>
                <td>Shiraz</td>
                <td>Admin</td>
                <td>Active</td>
                <td>2026-09-02</td>
            </tr>
        </tbody>
    </table>
</div>

این روش یکی از الگوهای بسیار رایج در پنل‌های مدیریتی است.

Responsive شدن از یک Breakpoint مشخص

Bootstrap علاوه بر table-responsive، نسخه‌های Responsive مبتنی بر Breakpoint نیز دارد.

برای مثال:

<div class="table-responsive-sm">

یا:

<div class="table-responsive-md">

و همچنین:

<div class="table-responsive-lg">

<div class="table-responsive-xl">

<div class="table-responsive-xxl">

برای مثال:

<div class="table-responsive-md">
    <table class="table">
        ...
    </table>
</div>

این حالت باعث می‌شود رفتار Responsive جدول از Breakpoint مشخصی به بعد تغییر کند.

انتخاب نوع Responsive مناسب

در بیشتر پروژه‌ها اگر جدول ستون‌های زیادی دارد، استفاده از:

<div class="table-responsive">

ساده‌ترین انتخاب است.

اگر رفتار جدول باید بر اساس اندازه صفحه کنترل شود، می‌توانیم از نسخه‌های Breakpoint استفاده کنیم.

تنظیم ترازبندی محتوا

می‌توانیم از Utility Classهای Bootstrap برای ترازبندی محتوای سلول‌ها استفاده کنیم.

مثلاً:

<td class="text-center">Active</td>

یا:

<td class="text-end">$900</td>

برای ترازبندی عمودی نیز می‌توان از:

align-middle

استفاده کرد.

مثال:

<table class="table">
    <tbody>
        <tr>
            <td class="align-middle">
                Product
            </td>

            <td class="text-center align-middle">
                10
            </td>

            <td class="text-end align-middle">
                $900
            </td>
        </tr>
    </tbody>
</table>

Caption برای جدول

برای توضیح جدول می‌توانیم از عنصر caption استفاده کنیم.

<table class="table">
    <caption>
        لیست کاربران ثبت‌نام‌شده
    </caption>

    <thead>
        <tr>
            <th>نام</th>
            <th>ایمیل</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>ali@example.com</td>
        </tr>
    </tbody>
</table>

اگر بخواهیم Caption در بالای جدول قرار بگیرد، Bootstrap کلاس زیر را ارائه می‌کند:

caption-top

مثال:

<table class="table caption-top">
    <caption>لیست کاربران</caption>

    <thead>
        <tr>
            <th>نام</th>
            <th>وضعیت</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>فعال</td>
        </tr>
    </tbody>
</table>

Accessibility در جدول‌ها

در طراحی جدول فقط ظاهر اهمیت ندارد. ساختار صحیح HTML نیز مهم است.

برای عنوان ستون‌ها از th استفاده کنید:

<th>نام</th>

همچنین می‌توانیم مشخص کنیم هر th مربوط به ستون است:

<th scope="col">نام</th>
<th scope="col">ایمیل</th>
<th scope="col">وضعیت</th>

برای عنوان یک ردیف نیز می‌توان از:

<th scope="row">

استفاده کرد.

مثال:

<table class="table">
    <thead>
        <tr>
            <th scope="col">محصول</th>
            <th scope="col">قیمت</th>
            <th scope="col">موجودی</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Laptop</th>
            <td>$900</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

این ساختار به فناوری‌های کمکی کمک می‌کند ارتباط بین عنوان‌ها و داده‌ها را بهتر تشخیص دهند.

ترکیب جدول با دکمه‌ها

یکی از کاربردهای مهم جدول در پنل مدیریت، نمایش عملیات مختلف در کنار هر رکورد است.

برای مثال:

<table class="table table-hover">
    <thead>
        <tr>
            <th>نام</th>
            <th>ایمیل</th>
            <th>عملیات</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>علی</td>
            <td>ali@example.com</td>

            <td>
                <button class="btn btn-sm btn-primary">
                    ویرایش
                </button>

                <button class="btn btn-sm btn-danger">
                    حذف
                </button>
            </td>
        </tr>

        <tr>
            <td>رضا</td>
            <td>reza@example.com</td>

            <td>
                <button class="btn btn-sm btn-primary">
                    ویرایش
                </button>

                <button class="btn btn-sm btn-danger">
                    حذف
                </button>
            </td>
        </tr>
    </tbody>
</table>

در اینجا از مطالب مقاله‌های قبلی استفاده کردیم:

• table

• table-hover

• btn

• btn-sm

• btn-primary

• btn-danger

این ترکیب در پروژه‌های واقعی بسیار رایج است.

ایجاد فاصله بین دکمه‌های عملیات

می‌توانیم دکمه‌ها را داخل یک Flex Container قرار دهیم:

<td>
    <div class="d-flex gap-2">
        <button class="btn btn-sm btn-primary">
            ویرایش
        </button>

        <button class="btn btn-sm btn-danger">
            حذف
        </button>
    </div>
</td>

اگر صفحه کوچک باشد و تعداد دکمه‌ها زیاد باشد، می‌توانیم اجازه Wrap شدن نیز بدهیم:

<div class="d-flex flex-wrap gap-2">

جدول داخل Card

در پنل‌های مدیریتی معمولاً جدول‌ها داخل Card قرار می‌گیرند.

<div class="card">
    <div class="card-header">
        کاربران
    </div>

    <div class="card-body">
        <div class="table-responsive">

            <table class="table table-hover align-middle">

                <thead>
                    <tr>
                        <th>نام</th>
                        <th>ایمیل</th>
                        <th>وضعیت</th>
                        <th>عملیات</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>علی</td>
                        <td>ali@example.com</td>
                        <td>فعال</td>

                        <td>
                            <button class="btn btn-sm btn-primary">
                                ویرایش
                            </button>
                        </td>
                    </tr>

                    <tr>
                        <td>رضا</td>
                        <td>reza@example.com</td>
                        <td>فعال</td>

                        <td>
                            <button class="btn btn-sm btn-primary">
                                ویرایش
                            </button>
                        </td>
                    </tr>
                </tbody>

            </table>

        </div>
    </div>
</div>

این ساختار پایه بسیار مناسبی برای ساخت جدول‌های پنل مدیریت است.

یک جدول کامل برای پنل مدیریت محصولات

حالا یک مثال واقعی‌تر ایجاد کنیم.

فرض کنید مدیر سایت می‌خواهد محصولات را مدیریت کند.

اطلاعات جدول شامل موارد زیر است:

• شناسه

• نام محصول

• قیمت

• موجودی

• وضعیت

• عملیات

کد:

<div class="container py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>
            <h1 class="h3 mb-1">
                محصولات
            </h1>

            <p class="text-body-secondary mb-0">
                مدیریت محصولات فروشگاه
            </p>
        </div>

        <button class="btn btn-primary">
            افزودن محصول
        </button>

    </div>

    <div class="card">

        <div class="card-body">

            <div class="table-responsive">

                <table class="table table-striped table-hover align-middle">

                    <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>
                        </tr>
                    </thead>

                    <tbody>

                        <tr>
                            <th scope="row">1</th>

                            <td>
                                Laptop Pro
                            </td>

                            <td>
                                $1,200
                            </td>

                            <td>
                                15
                            </td>

                            <td>
                                <span class="text-success">
                                    فعال
                                </span>
                            </td>

                            <td>
                                <div class="d-flex flex-wrap gap-2">

                                    <button class="btn btn-sm btn-primary">
                                        ویرایش
                                    </button>

                                    <button class="btn btn-sm btn-danger">
                                        حذف
                                    </button>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">2</th>

                            <td>
                                Wireless Mouse
                            </td>

                            <td>
                                $40
                            </td>

                            <td>
                                50
                            </td>

                            <td>
                                <span class="text-success">
                                    فعال
                                </span>
                            </td>

                            <td>
                                <div class="d-flex flex-wrap gap-2">

                                    <button class="btn btn-sm btn-primary">
                                        ویرایش
                                    </button>

                                    <button class="btn btn-sm btn-danger">
                                        حذف
                                    </button>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">3</th>

                            <td>
                                Mechanical Keyboard
                            </td>

                            <td>
                                $90
                            </td>

                            <td>
                                0
                            </td>

                            <td>
                                <span class="text-danger">
                                    ناموجود
                                </span>
                            </td>

                            <td>
                                <div class="d-flex flex-wrap gap-2">

                                    <button class="btn btn-sm btn-primary">
                                        ویرایش
                                    </button>

                                    <button class="btn btn-sm btn-danger">
                                        حذف
                                    </button>

                                </div>
                            </td>
                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

این مثال ترکیبی از چند قابلیت Bootstrap است که تا اینجا یاد گرفته‌ایم.

Container
   ↓
Card
   ↓
Responsive Table
   ↓
Rows and Columns
   ↓
Action Buttons

مدیریت جدول خالی

در پروژه واقعی ممکن است هیچ رکوردی وجود نداشته باشد.

مثلاً:

<tbody>

    <tr>
        <td colspan="6" class="text-center py-5">

            <h2 class="h5">
                محصولی پیدا نشد
            </h2>

            <p class="text-body-secondary">
                هنوز محصولی برای نمایش وجود ندارد.
            </p>

            <button class="btn btn-primary">
                افزودن محصول
            </button>

        </td>
    </tr>

</tbody>

استفاده از colspan باعث می‌شود یک سلول چند ستون جدول را پوشش دهد.

جدول با تعداد زیادی ستون

فرض کنید جدول اطلاعات کاربران شامل ستون‌های زیادی باشد:

<div class="table-responsive">
    <table class="table table-sm table-hover">

        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Role</th>
                <th>City</th>
                <th>Status</th>
                <th>Created</th>
                <th>Updated</th>
                <th>Actions</th>
            </tr>
        </thead>

        <tbody>
            ...
        </tbody>

    </table>
</div>

در چنین شرایطی Responsive Wrapper اهمیت زیادی پیدا می‌کند.

بدون آن ممکن است جدول باعث ایجاد مشکل در نمایش موبایل شود.

اشتباه رایج: استفاده از Table برای Layout

نباید از table برای ساخت Layout اصلی صفحه استفاده کنیم.

برای مثال، استفاده از این روش توصیه نمی‌شود:

<table>
    <tr>
        <td>Menu</td>
        <td>Content</td>
    </tr>
</table>

جدول برای داده‌های جدولی ساخته شده است، نه برای ساخت Layout صفحه.

برای Layout باید از ابزارهایی مانند:

Container
Grid
Flexbox

استفاده کنیم.

اشتباه رایج: قرار دادن جدول بزرگ بدون Responsive Wrapper

این کد:

<table class="table">

ممکن است برای جدول‌های کوچک مناسب باشد.

اما برای جدول‌های بزرگ بهتر است:

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

استفاده شود.

اشتباه رایج: استفاده بیش از حد از رنگ‌ها

اگر تمام سطرها و سلول‌های جدول رنگ‌های مختلف داشته باشند، خوانایی جدول کاهش پیدا می‌کند.

بهتر است رنگ‌ها هدف مشخصی داشته باشند.

مثلاً:

Success → وضعیت موفق یا فعال
Warning → نیازمند توجه
Danger  → خطا یا وضعیت خطر
Info    → اطلاعات

در نتیجه رنگ باید به درک بهتر اطلاعات کمک کند، نه اینکه فقط ظاهر جدول را شلوغ کند.

نکات مهم طراحی جدول

برای ساخت جدول حرفه‌ای به نکات زیر توجه کنید:

۱. جدول را Responsive کنید

برای جدول‌های بزرگ:

<div class="table-responsive">

استفاده کنید.

۲. از Header مناسب استفاده کنید

به جای اینکه همه چیز را با td ایجاد کنیم، عنوان ستون‌ها را با th مشخص کنیم.

۳. جدول را بیش از حد شلوغ نکنید

اگر یک جدول ۲۰ ستون دارد، بررسی کنید آیا واقعاً همه ستون‌ها باید همزمان نمایش داده شوند یا خیر.

۴. عملیات را واضح کنید

برای عملیات‌هایی مانند ویرایش و حذف از دکمه‌های مشخص استفاده کنید.

۵. وضعیت‌ها را قابل تشخیص کنید

برای مثال:

<span class="text-success">فعال</span>

یا:

<span class="text-danger">غیرفعال</span>

۶. موبایل را فراموش نکنید

یک جدول که در Desktop عالی است ممکن است در Mobile بسیار بد نمایش داده شود.

همیشه Responsive بودن را بررسی کنید.

تمرین عملی

یک جدول برای مدیریت کاربران ایجاد کنید.

جدول باید شامل ستون‌های زیر باشد:

ID
Name
Email
Role
Status
Created Date
Actions

الزامات:

1. جدول را داخل table-responsive قرار دهید.

2. از table-striped استفاده کنید.

3. از table-hover استفاده کنید.

4. از align-middle استفاده کنید.

5. برای عملیات دو دکمه Edit و Delete ایجاد کنید.

6. دکمه‌ها را با btn-sm کوچک کنید.

7. برای وضعیت فعال از text-success استفاده کنید.

8. برای وضعیت غیرفعال از text-danger استفاده کنید.

9. برای عنوان ستون‌ها از th استفاده کنید.

10. برای thها از scope="col" استفاده کنید.

تمرین پیشرفته‌تر

یک جدول مدیریت محصولات ایجاد کنید که دارای:

• ۸ محصول

• قیمت

• موجودی

• وضعیت

• دکمه ویرایش

• دکمه حذف

• دکمه مشاهده

• حالت Responsive

• حالت Hover

• ردیف‌های Striped

باشد.

سپس جدول را داخل یک card قرار دهید.

جمع‌بندی

در این مقاله با جدول‌ها در Bootstrap آشنا شدیم. یاد گرفتیم که کلاس table پایه اصلی ساخت جدول Bootstrap است و می‌توانیم با کلاس‌هایی مانند table-striped، table-hover، table-bordered، table-borderless، table-sm و table-dark ظاهر جدول را تغییر دهیم. همچنین با رنگ‌بندی سطرها و سلول‌ها، ساختارهای thead، tbody و tfoot، استفاده از caption، ترازبندی محتوا و نکات مربوط به Accessibility آشنا شدیم. یکی از مهم‌ترین مباحث این مقاله نیز table-responsive بود که برای نمایش صحیح جدول‌های بزرگ در صفحات کوچک و موبایل اهمیت زیادی دارد. در نهایت یک جدول واقعی برای پنل مدیریت محصولات ساختیم و دیدیم چگونه می‌توان جدول را با Card، Grid، Utilityها و Buttonها ترکیب کرد.