bootstrap

جدول در Bootstrap

جدول در Bootstrap
20 آوریل

جداول ابزار اصلی برای نمایش داده‌های ساخت‌یافته در وب هستند. در حالی که جداول HTML پایه چارچوب را فراهم می‌کنند، Bootstrap مجموعه‌ای غنی از کلاس‌ها و ابزارها را ارائه می‌دهد که جداول را از جدول‌های ساده به نمایش‌هایی بصری، واکنش‌گرا و کاربردی ارتقا می‌دهد. این راهنما به بررسی کامل امکانات جدول در Bootstrap برای استایل‌دهی، واکنش‌گرایی و سفارشی‌سازی پیشرفته می‌پردازد.

پایه کار: استایل‌دهی ساده جدول در Bootstrap

در ابتدایی‌ترین سطح، Bootstrap با کلاس .table، استایل پایه‌ای و مینیمالی برای تگ <table> فراهم می‌کند. این کلاس ویژگی‌هایی مانند موارد زیر را اضافه می‌کند:

  • فاصله داخلی (Padding) ملایم: برای خوانایی بهتر محتوا در سلول‌ها
  • خط‌های افقی: برای جداسازی ظریف بین ردیف‌ها
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Table</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Bootstrap Table</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

بهبود ظاهر: انواع جدول‌ها و خطوط راه‌راه (Striped)

Bootstrap کلاس‌های متعددی برای تغییر ظاهر جداول ارائه می‌دهد:

✅ انواع جدول‌ها (Table Variants)

کلاس‌هایی مانند .table-primary، .table-success، .table-danger و غیره به تگ <table> اضافه می‌شوند تا رنگ پس‌زمینه و متن جدول را تغییر دهند، معمولاً بر اساس معنای رنگی.

<table class="table table-success">...</table>

✅ ردیف‌های راه‌راه (.table-striped)

برای خوانایی بهتر، ردیف‌های داخل <tbody> به صورت یکی در میان رنگ متفاوتی می‌گیرند.

<table class="table table-striped">...</table>

✅ جدول تیره (.table-dark)

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

<table class="table table-dark table-striped">...</table>

✅ جدول با حاشیه (.table-bordered)

برای افزودن قاب دور همه سلول‌ها.

<table class="table table-bordered">...</table>

✅ جدول بدون حاشیه (.table-borderless)

برای حذف همه قاب‌های دور سلول‌ها.

<table class="table table-borderless">...</table>

کلاس‌های مفهومی (Contextual Classes)

برای تأکید یا نمایش وضعیت خاص ردیف‌ها یا سلول‌ها می‌توانید از کلاس‌های مفهومی مانند .table-success, .table-danger, .table-warning استفاده کنید:

<tr class="table-success">...</tr>
<td class="table-warning">سلول برجسته‌شده</td>

جداول واکنش‌گرا: جلوگیری از سرریز در صفحات کوچک

زمانی که جدول شامل ستون‌های زیادی باشد، در صفحه‌نمایش‌های کوچک ممکن است سرریز افقی ایجاد شود. برای جلوگیری از این مشکل، Bootstrap کلاس .table-responsive را فراهم کرده:

✅ پیچیدن جدول در یک div با کلاس .table-responsive

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

✅ واکنش‌گرایی با نقطه شکست خاص

با استفاده از کلاس‌هایی مانند .table-responsive-sm, .table-responsive-md, .table-responsive-lg و غیره می‌توانید تعیین کنید از چه سایزی به پایین جدول اسکرول‌پذیر شود.

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

ویژگی‌ها و سفارشی‌سازی پیشرفته:

✅ عنوان جدول (<caption>)

برای افزودن عنوان یا خلاصه‌ای از محتوا:

<table class="table">
  <caption class="text-center fst-italic">لیست کاربران</caption>
  ...
</table>

✅ تقسیم‌بندی جدول با <thead>, <tbody>, <tfoot>

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

CSS سفارشی:

برای استایل‌دهی پیچیده‌تر، می‌توانید از CSS سفارشی استفاده کنید:

:nth-child(even) {
  background-color: #f9f9f9;
}

ارتقاء با جاوااسکریپت:

برای قابلیت‌هایی مانند مرتب‌سازی، فیلتر کردن، یا صفحه‌بندی، می‌توانید از کتابخانه‌هایی مانند DataTables یا Tabulator استفاده کنید. Bootstrap فقط ساختار و ظاهر اولیه را فراهم می‌کند.

ملاحظات دسترسی‌پذیری:

  • استفاده درست از <thead>, <tbody>, و <tfoot>
  • افزودن ویژگی scope="col" یا scope="row" به <th> برای کمک به کاربران با فناوری‌های کمکی
  • استفاده از <caption> برای توضیح هدف جدول
  • اطلاعات مهم نباید فقط از طریق رنگ منتقل شوند

ایده‌های طراحی خاص با Bootstrap:

  • جداول مینیمال: استفاده از .table-borderless با هایلایت شدن ردیف‌ها در حالت hover
  • داشبوردهای داده‌محور: ترکیب .table-sm, .table-striped, و .table-responsive-lg برای نمایش کارآمد
  • جداول قیمت‌گذاری تعاملی: استفاده از کلاس‌های مفهومی برای برجسته‌سازی پلن‌های محبوب، همراه با اسکریپت جاوااسکریپت برای تغییر قیمت
  • لیست‌های داده موضوعی: استفاده از واریانت‌ها برای تفکیک دیداری داده‌ها
  • جداول مقایسه‌ای: برجسته کردن تفاوت‌های کلیدی با کلاس‌های مفهومی روی سلول‌ها

مثال ۱: جدول پایه در Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Table Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Bootstrap Table</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Product</th>
                    <th>Price</th>
                    <th>Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Laptop</td>
                    <td>€1200</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Mouse</td>
                    <td>€25</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Keyboard</td>
                    <td>€75</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

مثال ۲: انواع جدول و ردیف‌های راه‌راه

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Table Variants and Stripping</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Table Variants</h2>
        <table class="table table-primary">
            <thead><tr><th>#</th><th>Name</th></tr></thead>
            <tbody><tr><td>1</td><td>Alice</td></tr><tr><td>2</td><td>Bob</td></tr></tbody>
        </table>

        <h2 class="mt-3">Striped Table</h2>
        <table class="table table-striped">
            <thead><tr><th>#</th><th>Item</th></tr></thead>
            <tbody><tr><td>1</td><td>Apple</td></tr><tr><td>2</td><td>Banana</td></tr><tr><td>3</td><td>Cherry</td></tr></tbody>
        </table>

        <h2 class="mt-3">Dark Striped Table</h2>
        <table class="table table-dark table-striped">
            <thead><tr><th>#</th><th>Setting</th></tr></thead>
            <tbody><tr><td>1</td><td>Option A</td></tr><tr><td>2</td><td>Option B</td></tr><tr><td>3</td><td>Option C</td></tr></tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

مثال ۳: جدول‌های با حاشیه و بدون حاشیه

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Bordered and Borderless Tables</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Bordered Table</h2>
        <table class="table table-bordered">
            <thead><tr><th>#</th><th>City</th></tr></thead>
            <tbody><tr><td>1</td><td>Berlin</td></tr><tr><td>2</td><td>Hamburg</td></tr></tbody>
        </table>

        <h2 class="mt-3">Borderless Table</h2>
        <table class="table table-borderless">
            <thead><tr><th>#</th><th>Country</th></tr></thead>
            <tbody><tr><td>1</td><td>Germany</td></tr><tr><td>2</td><td>France</td></tr></tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

مثال ۴: کلاس‌های مفهومی برای ردیف‌ها و سلول‌ها

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Contextual Table Classes</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Contextual Classes</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Status</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td class="table-success">Completed</td>
                    <td>Task finished successfully.</td>
                </tr>
                <tr class="table-warning">
                    <td>2</td>
                    <td>Pending</td>
                    <td>Waiting for review.</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Active</td>
                    <td class="table-info">Currently being processed.</td>
                </tr>
                <tr class="table-danger">
                    <td>4</td>
                    <td>Error</td>
                    <td>Something went wrong.</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

مثال ۵: جدول واکنش‌گرا (.table-responsive)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Responsive Table</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Add some extra content to force horizontal scrolling on small screens */
        .long-data { white-space: nowrap; }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h2>Responsive Table</h2>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Very Long Header 1</th>
                        <th>Another Very Long Header 2</th>
                        <th>And Yet Another Long Header 3</th>
                        <th>One More Long Header 4</th>
                        <th>You Get the Idea 5</th>
                        <th>Still Going 6</th>
                        <th>Almost There 7</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td class="long-data">Some lengthy data here that will cause overflow on small screens.</td>
                        <td class="long-data">More extensive information for this cell.</td>
                        <td class="long-data">Even more detailed content to demonstrate scrolling.</td>
                        <td class="long-data">This cell contains a significant amount of text.</td>
                        <td class="long-data">Just adding more and more data for the example.</td>
                        <td class="long-data">Still here, scrolling is about to happen.</td>
                        <td class="long-data">Finally, the last cell with long content.</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td class="long-data">More long data.</td>
                        <td class="long-data">More long data.</td>
                        <td class="long-data">More long data.</td>
                        <td class="long-data">More long data.</td>
                        <td class="long-data">More long data.</td>
                        <td class="long-data">More long data.</td>
                        <td class="long-data">More long data.</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h2 class="mt-3">Responsive Table (Medium Breakpoint)</h2>
        <div class="table-responsive-md">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                        <th>Header 4</th>
                        <th>Header 5</th>
                        <th>Header 6</th>
                        <th>Header 7</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

مثال ۶: جدول با عنوان (Caption)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Table with Caption</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Table with Caption</h2>
        <table class="table">
            <caption>User Account Details</caption>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>101</td>
                    <td>john.doe</td>
                    <td>john.doe@example.com</td>
                </tr>
                <tr>
                    <td>102</td>
                    <td>jane.smith</td>
                    <td>jane.smith@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

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

سیستم جدول Bootstrap یک روش قدرتمند و انعطاف‌پذیر برای نمایش داده‌ها در وب فراهم می‌کند. از استایل‌دهی پایه و بهبودهای بصری گرفته تا واکنش‌گرایی پیشرفته و ساختاردهی معنایی، Bootstrap ابزارهای لازم برای ساخت جدول‌هایی مؤثر و در دسترس برای هر نوع پروژه را در اختیارتان قرار می‌دهد.

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

انعطاف‌پذیری جدول‌های Bootstrap را بپذیرید و ارائه داده‌های خود را به تجربه‌ای روان، کاربرپسند و حرفه‌ای تبدیل کنید.ول با عنوان (Caption)

جدیدتر فرم‌ در Bootstrap
بازگشت به لیست
قدیمی تر تصاویر در بوت استرپ (Images in Bootstrap)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *