طراحی جدول ها در بوت استرپ

جدول ها در Bootstrap

جداول ساده‌ی بوت استرپ، دارای padding کم و خطوط افقی برای جدا کردن ردیف ها هستند. برای ایجاد این استایل ساده می توانید کلاس table. را به جدول خود اضافه کنید. مثال:

    <div class="container">
        <h2>جداول ساده</h2>
        <p>کلاس .table یک ظاهر طراحی اولیه (روکش سبک و تقسیم افقی) را به یک جدول اضافه می کند:</p>            
        <table class="table">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

اگر بخواهیم ردیف های جدول را به شکل جداول اداری یکی در میان خط کشی کنیم باید کلاس table-striped. را به آن اضافه کنیم:

    <div class="container">
        <h2>جداول ساده</h2>
        <p>کلاس .table یک ظاهر طراحی اولیه (روکش سبک و تقسیم افقی) را به یک جدول اضافه می کند:</p>            
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

حاشیه برای جدول ها

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

    <div class="container">
        <h2>حاشیه برای جدول‌ها</h2>
        <p>کلاس .table-borded مرز در همه طرف جدول و سلول ها مرز اضافه می کند:</p>            
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

قابلیت hover در ردیف‌ها

حتما تا به حال دیده اید که برخی از جداول قابلیت خاصی دارند؛ اگر موس را روی آن ها ببرید، ردیف مربوطه شان پررنگ تر شده یا به طور کل تغییر می کند تا خواننده بتواند اطلاعات را واضح تر ببیند. برای ایجاد چنین قابلیت باید کلاس table-hover. را به جدول خود اضافه کنید:

    <div class="container">
        <h2>hover در ردیف‌ها</h2>
        <p>کلاس .tover-hover حالت شناور (پس زمینه خاکستری را روی ماوس) در سطرهای جدول ایجاد می کند:</p>            
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

جداول تیره (night mode)

ممکن است شما از دسته افرادی باشید که قالب وب سایتتان را به دو صورت عادی و حالت شب طراحی کرده اید تا کاربران بتوانند راحت تر مطالب را ببینند. اگر اینطور است تنها کافی است به جدول هایتان کلاس table-dark. را اضافه کنید:

    <div class="container">
        <h2>جداول تیره (night mode)</h2>
        <p>کلاس .table-dark پس زمینه سیاه را به جدول اضافه می کند:</p>            
        <table class="table table-dark">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

ترکیب کلاس ها

همانطور که میدانید در زبان HTML اجازه ی استفاده از چندین کلاس برای یک عنصر را دارید. بنابراین می توانیم کلاس های بوت استرپ را نیز ترکیب کنیم. به طور مثال اگر بخواهیم جدولی تیره (حالت شب) داشته باشیم و همچنین ردیف هایش را یکی در میان تیره و روشن کنیم (حالت جداول اداری) می توانیم کلاس های table-striped. و table-dark. را ترکیب کنیم:

    <div class="container">
        <h2>ترکیب کلاس‌ها</h2>          
        <table class="table table-dark table-striped">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

همچنین با استفاده از کلاس table-hover. می توانیم افکت hover را روی جدول های تیره ی خود نیز پیاده کنیم:

    <div class="container">
        <h2>افکت هاور را روی جدول های تیره</h2>          
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

حذف حاشیه ها

اگر دوست دارید جدول شما بدون هیچ گونه حاشیه ای باشد باید از کلاس table-borderless. استفاده کنید:

    <div class="container">
        <h2>حذف حاشیه‌ها</h2>          
        <table class="table table-borderless">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

کلاس های زمینه ای

این نوع کلاس ها زمینه ی هر ردیف را تعیین می کنند. به طور مثال فلان ردیف چقدر مهم است؟ آیا ردیفی از جدول در bootstrap در حال اخطار دادن به کاربر است؟ و هر نوع اطلاعات دیگری که ردیف های جدول را معنا دار کند معمولا در این قسمت قرار می گیرد. این اهمیت ها معمولا با رنگ اعمال می شوند:

مثال زیر را ببینید:

    <div class="container">
        <h2>کلاس های زمینه‌ای</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>پیش فرض</td>
                    <td>توضیحات</td>
                    <td>def@def.com</td>
                </tr>      
                <tr class="table-primary">
                    <td>Primary</td>
                    <td>علی</td>
                    <td>Ali@example.com</td>
                </tr>
                <tr class="table-success">
                    <td>Success</td>
                    <td>رضا</td>
                    <td>Reza@example.com</td>
                </tr>
                <tr class="table-danger">
                    <td>Danger</td>
                    <td>علیرضا</td>
                    <td>Alireza@example.com</td>
                </tr>
                <tr class="table-info">
                    <td>Info</td>
                    <td>محدثه</td>
                    <td>Mohadeseh@example.com</td>
                </tr>
                <tr class="table-warning">
                    <td>Warning</td>
                    <td>رها</td>
                    <td>Raha@example.com</td>
                </tr>
                <tr class="table-active">
                    <td>Active</td>
                    <td>حسین</td>
                    <td>Hosein@example.com</td>
                </tr>
                <tr class="table-secondary">
                    <td>Secondary</td>
                    <td>حسن</td>
                    <td>Hasan@example.com</td>
                </tr>
                <tr class="table-light">
                    <td>Light</td>
                    <td>حاجی محمدی</td>
                    <td>Hajimohammadi@example.com</td>
                </tr>
                <tr class="table-dark text-dark">
                    <td>Dark</td>
                    <td>نیلوفر</td>
                    <td>Nilofar@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

تغییر head جدول

head جداول همان ردیف اول و سر جدول است که توضیحات ستون های جدول را در خود دارد. کلاس thead-dark. به این head ها رنگ تیره تر میدهد تا آن ها را از خود جدول جدا کند. اگر می خواهید به جای رنگ تیره از رنگ خاکستری استفاده شود می توانید از کلاس thead-light. استفاده کنید. مثال:

    <div class="container">
        <h2>تغییر head جدول</h2>
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>

        <table class="table">
            <thead class="thead-light">
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

جداول کوچک

کلاس table-sm. با نصف کردن مقدار padding، جدول ها را کوچک تر می کند:

    <div class="container">
        <h2>جداول کوچک</h2>          
        <table class="table table-bordered table-sm">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>مری</td>
                    <td>اسمیت</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>جولی</td>
                    <td>اسمیت</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

نمونه مثال:

جدول های واکنش گرا (responsive)

همانطور که میدانید واکنش گرا بودن به خاطر تفاوت اندازه ی صفحات دستگاه های مختلف است؛ چنانچه جدول ما عادی باشد و فردی با تلفن همراه از سایت ما بازدید کند دیگر نمی تواند به خوبی جدول را ببیند. به طور مثال یا جدول به هم میریزد و یا اینکه از کادر صفحه خارج می شود.

برای حل این مسئله می توانید کلاس table-responsive. را به جدول هایتان اضافه کنید تا در صورت کوچک بودن صفحه ی کاربر یک اسکرول بار افقی به جدول اضافه شود و اطلاعات موجود آن از صفحه خارج نشوند. با این کلاس اگر عرض صفحه ی کاربر کمتر از 992px باشد اسکرول بار اضافه می شود و در غیر این صورت اتفاقی نمی افتد:

    <div class="container">
        <h2>جدول های واکنش گرا (responsive)</h2>
        
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                    <th>#</th>
                    <th>نام</th>
                    <th>نام خانوادگی</th>
                    <th>سن</th>
                    <th>شهر</th>
                    <th>گشور</th>
                    <th>جنسیت</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    <th>مثال</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>1</td>
                    <td>جان</td>
                    <td>ویک</td>
                    <td>35</td>
                    <td>New York</td>
                    <td>USA</td>
                    <td>مرد</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    <td>بله</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

نمونه مثال:

البته شما می توانید خودتان تعیین کنید که اسکرول بار چه زمانی به صفحه اضافه شود: