Bulma এর Table Component এর ব্যবহার

Bulma CSS ফ্রেমওয়ার্কের Table Component টেবিল তৈরি করার জন্য সহজ ও সজ্জিত উপায় প্রদান করে। এটি একটি ব্যবহারযোগ্য এবং সুন্দর ডিজাইন সহ টেবিল তৈরি করতে সহায়তা করে, যা ডেটা প্রদর্শন করার জন্য আদর্শ। Bulma এর টেবিল বিভিন্ন ধরনের স্টাইলিং এবং কাস্টমাইজেশন সমর্থন করে, যেমন striped, bordered, hoverable, এবং responsive টেবিল।

১. বেসিক টেবিল (Basic Table)

Bulma-এ একটি সাধারণ টেবিল তৈরি করতে, table ক্লাসটি ব্যবহার করতে হবে। এটি একটি সাধারণ, সাদা ব্যাকগ্রাউন্ডসহ টেবিল তৈরি করবে।

উদাহরণ: বেসিক টেবিল

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে table ক্লাস ব্যবহার করা হয়েছে একটি সাধারণ টেবিল তৈরি করার জন্য। thead এবং tbody ট্যাগগুলি টেবিলের হেডিং এবং বডি তৈরি করতে ব্যবহৃত হয়।

২. Striped Table

Striped টেবিলটি ব্যবহার করলে টেবিলের সিটগুলোর ব্যাকগ্রাউন্ড পরিবর্তিত হয়, অর্থাৎ সিটগুলোর মধ্যে সাদা এবং হালকা রঙের প্যাটার্ন তৈরি হয়, যা টেবিলকে আরও স্পষ্ট এবং পড়তে সহজ করে।

উদাহরণ: Striped Table

<table class="table is-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
    <tr>
      <td>Mark Taylor</td>
      <td>marktaylor@example.com</td>
      <td>Editor</td>
    </tr>
  </tbody>
</table>

এখানে is-striped ক্লাস ব্যবহার করা হয়েছে, যা টেবিলের সিটগুলোর মধ্যে হালকা সাদা এবং রঙের প্যাটার্ন তৈরি করবে।

৩. Bordered Table

Bordered টেবিলের সমস্ত সেল এবং রোকে বর্ডার দেওয়ার জন্য is-bordered ক্লাস ব্যবহার করা হয়। এটি টেবিলের প্রতিটি সেলের চারপাশে বর্ডার যুক্ত করবে।

উদাহরণ: Bordered Table

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে is-bordered ক্লাস টেবিলের প্রতিটি সেলের চারপাশে একটি বর্ডার যোগ করেছে।

৪. Hoverable Table

Hoverable টেবিলের জন্য is-hoverable ক্লাস ব্যবহার করা হয়, যা টেবিলের প্রতিটি সেলে হোভার করলে ব্যাকগ্রাউন্ড পরিবর্তন হবে। এটি ইউজারকে টেবিলের উপাদানগুলির প্রতি মনোযোগ আকর্ষণ করতে সহায়তা করে।

উদাহরণ: Hoverable Table

<table class="table is-hoverable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে is-hoverable ক্লাস যোগ করা হয়েছে, যার ফলে টেবিলের রোতে মাউস হোভার করলে সেটির ব্যাকগ্রাউন্ড পরিবর্তিত হবে।

৫. Responsive Table

Bulma-তে টেবিলটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করতে responsive বানানো যেতে পারে। is-responsive ক্লাসটি ব্যবহার করলে টেবিলটি ছোট স্ক্রীনে স্ক্রোলেবল হয়ে যাবে, যাতে সমস্ত কলামগুলি দেখা যায়।

উদাহরণ: Responsive Table

<div class="table-container">
  <table class="table is-striped is-bordered is-hoverable is-fullwidth">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
        <td>Admin</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
        <td>User</td>
      </tr>
    </tbody>
  </table>
</div>

এখানে, is-responsive ক্লাস দিয়ে টেবিলের জন্য একটি কনটেইনার তৈরি করা হয়েছে, যাতে টেবিলটি মোবাইল স্ক্রীনে স্ক্রোলেবল হয়। এটি ব্যবহারকারীকে স্ক্রিনের আকার অনুযায়ী টেবিলটি দেখার সুবিধা দেয়।

৬. Full Width Table

যখন আপনি টেবিলকে সম্পূর্ণ প্রস্থে (full width) চান, তখন is-fullwidth ক্লাস ব্যবহার করতে পারেন। এটি টেবিলকে পেজের সম্পূর্ণ প্রস্থে প্রসারিত করবে।

উদাহরণ: Full Width Table

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে is-fullwidth ক্লাসটি টেবিলকে সম্পূর্ণ প্রস্থে প্রসারিত করেছে।

সারাংশ

Bulma এর Table Component ব্যবহার করে সহজেই সুন্দর এবং কার্যকরী টেবিল তৈরি করা সম্ভব। আপনি striped, bordered, hoverable, responsive, এবং fullwidth ক্লাসের মাধ্যমে টেবিলকে কাস্টমাইজ করতে পারেন। এছাড়াও, responsive টেবিল মোবাইল ফ্রেন্ডলি এবং স্ক্রোলেবল হতে সহায়ক, যা ছোট স্ক্রীনে টেবিলের ডেটা দেখতে সুবিধা দেয়। Bulma টেবিলটি সহজ, সজ্জিত এবং কাস্টমাইজেবল।