Striped এবং Bordered Tables

Bootstrap 5 এর টেবিলস এবং ডেটা টেবিলস - বুটস্ট্রাপ (Bootstrap 5) - Web Development

385

বুটস্ট্রাপ ৫ এ Striped Tables এবং Bordered Tables দুটি সাধারণ টেবিল স্টাইল যা ব্যবহারকারীকে টেবিলের কন্টেন্টকে আরও পরিষ্কার এবং সুসংগঠিতভাবে প্রদর্শন করতে সাহায্য করে। এই স্টাইলগুলো টেবিলের বিভিন্ন রো বা কলামকে আলাদা করে এবং টেবিলের সীমান্তকে দৃশ্যমান করে।

Striped Tables

Striped Tables টেবিলের রো গুলিকে সাদা এবং রঙিন পরিবর্তন করে, যাতে টেবিলের তথ্য সহজে পড়া যায়। এটি বিশেষভাবে বড় টেবিল বা ডেটা ব্যবহারের ক্ষেত্রে উপকারী যেখানে ব্যবহারকারীকে তথ্য দ্রুত শনাক্ত করতে সাহায্য করে।

বুটস্ট্র্যাপ ৫ এ স্ট্রাইপড টেবিল তৈরি করতে table-striped ক্লাস ব্যবহার করতে হয়।

উদাহরণ: Striped Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Striped Table Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>ফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>মারিয়া স্মিথ</td>
                    <td>maria@example.com</td>
                    <td>987-654-3210</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>লুকাস ব্রাউন</td>
                    <td>lucas@example.com</td>
                    <td>456-789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

table-striped: এই ক্লাসটি টেবিলের প্রতিটি রো-এর ব্যাকগ্রাউন্ড রঙকে স্ট্রাইপ হিসেবে পরিবর্তন করে।

Bordered Tables

Bordered Tables টেবিলের চারপাশে এবং সেলের মধ্যে সীমানা (বর্ডার) প্রদর্শন করে, যা টেবিলের ভিজ্যুয়াল উপস্থাপনকে আরো স্পষ্ট ও সুসংগঠিত করে তোলে। এটি বিশেষভাবে তখন উপকারী যখন অনেক কলাম বা তথ্য থাকে এবং ব্যবহারকারীকে দ্রুত তথ্য বিশ্লেষণ করতে সহায়তা করে।

বুটস্ট্র্যাপ ৫ এ বর্ডার টেবিল তৈরি করতে table-bordered ক্লাস ব্যবহার করা হয়।

উদাহরণ: Bordered Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bordered Table Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-4">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>ফোন</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>জন ডো</td>
                    <td>john@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>মারিয়া স্মিথ</td>
                    <td>maria@example.com</td>
                    <td>987-654-3210</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>লুকাস ব্রাউন</td>
                    <td>lucas@example.com</td>
                    <td>456-789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>

এখানে:

table-bordered: এই ক্লাসটি টেবিলের প্রতিটি সেল এবং টেবিলের বাইরের সীমানাকে বর্ডার দিয়ে ঘেরাটোপে আবদ্ধ করে।