Materialize CSS-এ একটি বেসিক টেবিল তৈরি করা খুবই সহজ। Materialize CSS একটি সুন্দর এবং ব্যবহারবান্ধব টেবিল স্টাইল প্রদান করে, যার মাধ্যমে আপনি আপনার ওয়েবসাইটে বা অ্যাপ্লিকেশনে দ্রুত এবং কার্যকরী টেবিল তৈরি করতে পারেন।
এখানে Materialize CSS ব্যবহার করে একটি বেসিক টেবিল তৈরির পদ্ধতি এবং কাস্টমাইজেশনের উপায় বিস্তারিতভাবে আলোচনা করা হলো।
Materialize CSS-এ বেসিক টেবিল তৈরি করা
Materialize CSS-এ টেবিল তৈরির জন্য সাধারণত HTML টেবিল ট্যাগ ব্যবহার করা হয় এবং এর সাথে কিছু প্রি-ডিফাইন্ড ক্লাস যোগ করা হয়, যা টেবিলের ডিজাইনকে সুন্দর এবং সুশৃঙ্খল করে তোলে।
বেসিক টেবিল উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Table Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Table Structure -->
<div class="container">
<h4>Basic Table</h4>
<table class="striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>George Wilson</td>
<td>41</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড ব্যাখ্যা:
<table class="striped">:stripedক্লাস ব্যবহার করা হয়েছে যা টেবিলের সারিগুলোর জন্য স্ট্রাইপ ইফেক্ট দেয়, অর্থাৎ একটি সারি হালকা রঙ এবং পরবর্তী সারি গা dark ় রঙে হবে, যাতে টেবিলটি দেখতে সুন্দর এবং পরিষ্কার হয়।<thead>: এটি টেবিলের হেডার সেকশন, যেখানে কলামের শিরোনাম রাখা হয়।<tbody>: এটি টেবিলের বডি, যেখানে ডেটা বা তথ্য রাখা হয়।<th>: এই ট্যাগটি হেডারে ব্যবহৃত হয়, যা প্রতিটি কলামের শিরোনাম তৈরি করে।<td>: এই ট্যাগটি টেবিলের ডেটা কন্টেন্ট বা মানের জন্য ব্যবহৃত হয়।
Materialize CSS-এ টেবিল কাস্টমাইজেশন
Materialize CSS আপনাকে টেবিলের ডিজাইন কাস্টমাইজ করার জন্য কিছু অতিরিক্ত ক্লাস প্রদান করে। নিচে কিছু সাধারণ কাস্টমাইজেশন অপশন দেখানো হলো।
১. Responsive Table
Materialize CSS একটি responsive টেবিল সিস্টেম প্রদান করে, যাতে ছোট স্ক্রীনে টেবিল হরিজন্টালি স্ক্রলযোগ্য হয়ে ওঠে।
<table class="striped responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>George Wilson</td>
<td>41</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
এখানে:
- responsive-table ক্লাস টেবিলের স্ক্রলযোগ্যতা নিশ্চিত করে, যাতে ছোট স্ক্রীনে টেবিল সুন্দরভাবে উপস্থাপিত হয় এবং ব্যবহারকারী স্ক্রল করতে পারে।
২. Hoverable Table
আপনি যদি টেবিলের সারিগুলোর ওপর হোভার করলে কোনো ইফেক্ট দেখতে চান, তবে hoverable ক্লাস ব্যবহার করতে পারেন।
<table class="striped hoverable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>George Wilson</td>
<td>41</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
এখানে:
- hoverable ক্লাস সারি হোভার করার সময় তাদের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে, যা ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাকটিভ হতে সাহায্য করে।
৩. Bordered Table
আপনি টেবিলের সারির চারপাশে বর্ডার যোগ করতে চাইলে bordered ক্লাস ব্যবহার করতে পারেন।
<table class="bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>George Wilson</td>
<td>41</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
এখানে:
- bordered ক্লাস টেবিলের প্রতিটি সেলের চারপাশে বর্ডার যোগ করবে, যা টেবিলকে আরো স্পষ্ট এবং পরিস্কার দেখাবে।
উপসংহার
Materialize CSS-এ বেসিক টেবিল তৈরি করা অত্যন্ত সহজ এবং দ্রুত। আপনি striped, hoverable, responsive, bordered এবং অন্যান্য বিভিন্ন ক্লাস ব্যবহার করে টেবিলকে কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনার টেবিলটি আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে। Materialize CSS এক্সটেনসিভ টেবিল স্টাইলিং এবং ফিচারগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইটে সুন্দর এবং কার্যকরী টেবিল উপস্থাপন করতে পারবেন।
Read more
