Bulma CSS ফ্রেমওয়ার্কে Table তৈরি করা এবং স্টাইলিং করা খুবই সহজ। এটি আপনাকে বিভিন্ন ধরনের টেবিল তৈরির জন্য বিভিন্ন ক্লাস সরবরাহ করে, যেমন টেবিলের সীমান্ত (bordering), পংক্তির স্ট্রিপিং (striping), টেবিলের আকার এবং অন্যান্য কাস্টমাইজেশন। এখানে আমরা Bulma এর টেবিল স্টাইলিং, বর্ডারিং এবং স্ট্রিপিং নিয়ে আলোচনা করবো।
১. বুলমা টেবিলের মৌলিক গঠন
Bulma তে টেবিল তৈরি করার জন্য table ক্লাস ব্যবহার করা হয়। এটি টেবিলের মৌলিক কাঠামো তৈরি করে এবং স্বাভাবিকভাবে একটি সাধারণ টেবিল তৈরি করে।
উদাহরণ:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>28</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>34</td>
</tr>
</tbody>
</table>
এখানে, table ক্লাস ব্যবহার করে একটি মৌলিক টেবিল তৈরি করা হয়েছে, যেখানে thead এবং tbody এর মাধ্যমে শিরোনাম এবং ডেটা বিভাগ আলাদা করা হয়েছে।
২. টেবিলের বর্ডারিং (Bordering)
Bulma এ টেবিলের সীমান্ত বা বর্ডার যোগ করতে is-bordered ক্লাস ব্যবহার করা হয়। এটি টেবিলের সমস্ত সেল এবং সারির চারপাশে বর্ডার যোগ করে।
উদাহরণ:
<table class="table is-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>28</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>34</td>
</tr>
</tbody>
</table>
এখানে, is-bordered ক্লাসটি টেবিলের সেলগুলোর চারপাশে সীমানা তৈরি করেছে। আপনি চাইলে শুধু সারি বা কলামের সীমান্তও করতে পারেন, তবে Bulma ফ্রেমওয়ার্কে মূলত is-bordered ক্লাসটি সব সেলে বর্ডার তৈরি করতে ব্যবহৃত হয়।
৩. টেবিল স্ট্রিপিং (Striping)
Striping টেবিলের পংক্তিগুলির মধ্যে আলাদা আলাদা রং ব্যবহার করে একে আরেকটি থেকে পার্থক্য করা হয়। Bulma এর is-striped ক্লাসের মাধ্যমে আপনি টেবিলের পংক্তিগুলোতে স্ট্রিপিং (alternating row colors) যোগ করতে পারেন।
উদাহরণ:
<table class="table is-bordered is-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>28</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>34</td>
</tr>
<tr>
<td>Sam Wilson</td>
<td>samwilson@example.com</td>
<td>23</td>
</tr>
</tbody>
</table>
এখানে, is-striped ক্লাসটি টেবিলের পংক্তিগুলোতে স্ট্রিপিং যুক্ত করেছে, অর্থাৎ পরপর পংক্তিগুলির মধ্যে পার্থক্য দেখা যাবে, যা ব্যবহারকারীকে টেবিলটি পড়তে সহজ করে।
৪. টেবিলের আকার এবং অন্যান্য কাস্টমাইজেশন
Bulma আপনাকে টেবিলের আকার এবং অন্যান্য স্টাইলিং কাস্টমাইজ করতে দেয়। টেবিলের আকার নিয়ন্ত্রণ করতে is-fullwidth এবং is-narrow ক্লাস ব্যবহার করা যেতে পারে।
৪.১. পূর্ণ প্রস্থ টেবিল (Full-width Table)
যদি আপনি টেবিলটিকে পুরো প্রস্থে (100%) চাইছেন, তবে is-fullwidth ক্লাস ব্যবহার করতে পারেন।
<table class="table is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>28</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>34</td>
</tr>
</tbody>
</table>
এখানে, is-fullwidth ক্লাসটি টেবিলকে তার প্যারেন্ট কন্টেইনারের পুরো প্রস্থে প্রসারিত করেছে।
৪.২. সংকীর্ণ টেবিল (Narrow Table)
যদি আপনি টেবিলের প্রস্থ সংকীর্ণ রাখতে চান, তবে is-narrow ক্লাস ব্যবহার করুন।
<table class="table is-narrow">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>28</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>34</td>
</tr>
</tbody>
</table>
এখানে, is-narrow ক্লাসটি টেবিলের সেলগুলোর মধ্যে ব্যবধান কমিয়ে দিয়ে এটি সংকীর্ণ করেছে।
৫. টেবিলের সজ্জা এবং কাস্টমাইজেশন
টেবিলের সেলগুলোতে আরও উন্নত সজ্জা করতে, যেমন টেক্সট এলাইনমেন্ট বা সেল প্যাডিং পরিবর্তন করতে, আপনি Bulma এর বিভিন্ন ক্লাস ব্যবহার করতে পারেন। যেমন:
- has-text-centered: টেক্সট কেন্দ্রভিত্তিক করা।
- is-hoverable: সেলগুলোতে hover করার সময় রঙ পরিবর্তন করা।
উদাহরণ:
<table class="table is-bordered is-striped is-hoverable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>28</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>34</td>
</tr>
</tbody>
</table>
এখানে, is-hoverable ক্লাসটি টেবিলের সেলগুলোর উপর হভার করলে একটি হালকা রঙের পরিবর্তন করবে, যা ব্যবহারকারীকে ইন্টারঅ্যাকটিভ অনুভূতি দেয়।
সারাংশ
Bulma CSS ফ্রেমওয়ার্কের Table কম্পোনেন্টে সহজে বিভিন্ন স্টাইলিং, বর্ডারিং এবং স্ট্রিপিং অ্যাপ্লাই করা যায়। is-bordered ক্লাস ব্যবহার করে টেবিলের সীমান্ত যোগ করা যায়, is-striped ক্লাস দিয়ে পংক্তির মধ্যে স্ট্রিপিং (alternating row colors) তৈরি করা যায়, এবং is-hoverable ক্লাস ব্যবহার করে সেলে হভার ইফেক্ট যোগ করা যায়। এছাড়া is-fullwidth এবং is-narrow ক্লাস ব্যবহার করে টেবিলের আকার কাস্টমাইজ করা যায়। Bulma এর টেবিল স্টাইলিং খুবই ফ্লেক্সিবল এবং ব্যবহারকারী বান্ধব।
Read more
