Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা responsive tables এবং highlighted rows তৈরি করার জন্য প্রয়োজনীয় টুল এবং স্টাইল প্রদান করে। ওয়েব ডিজাইনে টেবিল একটি গুরুত্বপূর্ণ উপাদান যা বিভিন্ন ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। Responsive tables ওয়েবসাইটের মোবাইল-ফ্রেন্ডলি ডিজাইনে সহায়ক, এবং highlighted rows ব্যবহারকারীকে বিশেষ কোনো রেকর্ড বা ডেটা সহজে আলাদা করতে সহায়ক।
এখানে Materialize CSS-এ Responsive Tables এবং Highlighted Rows কিভাবে তৈরি এবং কনফিগার করা হয় তা বিস্তারিতভাবে আলোচনা করা হলো।
Responsive Tables
Responsive tables এমন টেবিল, যা ছোট স্ক্রীনে বা মোবাইল ডিভাইসে স্ক্রল করা যায়, যাতে তথ্যগুলি সহজে দেখা যায়। Materialize CSS এর মাধ্যমে আপনি সহজেই রেসপন্সিভ টেবিল তৈরি করতে পারেন। এর জন্য responsive-table ক্লাস ব্যবহৃত হয়।
১. Responsive Table তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Responsive Table</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Responsive Table -->
<div class="container">
<table class="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>Mark Wilson</td>
<td>25</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
<!-- Materialize JS and jQuery -->
<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>
কোড ব্যাখ্যা:
- .responsive-table: Materialize CSS এর এই ক্লাসটি টেবিলকে মোবাইল-ফ্রেন্ডলি (responsive) বানাতে ব্যবহৃত হয়। এটি টেবিলের কনটেন্ট মোবাইল ডিভাইসে স্ক্রলযোগ্য করে তোলে।
- thead, tbody: টেবিলের হেডার এবং বডি তৈরি করতে ব্যবহৃত হয়।
Responsive tables এ সাধারণভাবে scrollable ফিচার যোগ করা হয় যাতে ছোট স্ক্রীনে টেবিলের কনটেন্ট সঠিকভাবে দেখা যায়।
Highlighted Rows
Highlighted rows হল এমন টেবিলের সারি, যেগুলি বিশেষভাবে প্রদর্শন করতে বা ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য আলাদা করা হয়। এটি সাধারণত ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ বা নির্বাচিত রেকর্ড প্রদর্শন করতে ব্যবহৃত হয়। Materialize CSS-এ আপনি সহজেই highlighted rows তৈরি করতে পারেন।
২. Highlighted Row তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Highlighted Rows</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 with Highlighted Row -->
<div class="container">
<table class="highlight">
<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 class="highlighted">
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mark Wilson</td>
<td>25</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
<!-- Materialize JS and jQuery -->
<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>
কোড ব্যাখ্যা:
- .highlight: এটি টেবিলের সারিগুলোর জন্য একটি স্টাইল প্রদান করে, যাতে টেবিলের কনটেন্টের প্রতি ব্যবহারকারীর দৃষ্টি আকর্ষণ করা হয়।
- .highlighted: টেবিলের নির্দিষ্ট সারি হাইলাইট করার জন্য highlighted ক্লাস ব্যবহার করা হয়েছে।
- Materialize CSS এর highlighted row কাস্টম স্টাইলিং করার জন্য এটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট সারিকে আলাদা ভাবে প্রদর্শন করে।
৩. Custom Highlighted Row Styling
আপনি হাইলাইটেড রো এর রঙ বা ব্যাকগ্রাউন্ড কাস্টমাইজ করতে পারেন। উদাহরণ:
<style>
.highlighted {
background-color: #ffeb3b; /* Yellow background for highlighted row */
color: #000; /* Text color */
}
</style>
এখানে, highlighted ক্লাসের মাধ্যমে টেবিলের হাইলাইটেড সারির ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করা হয়েছে।
উপসংহার
Responsive tables এবং highlighted rows হল ওয়েব ডিজাইন এবং ডেভেলপমেন্টে ব্যবহৃত অত্যন্ত গুরুত্বপূর্ণ উপাদান। Materialize CSS এর মাধ্যমে আপনি সহজেই responsive tables তৈরি করতে পারেন, যা মোবাইল ডিভাইসে সুন্দরভাবে প্রদর্শিত হবে এবং আপনি highlighted rows ব্যবহার করে গুরুত্বপূর্ণ ডেটা বা রেকর্ডকে আলাদা করে উপস্থাপন করতে পারবেন। Materialize CSS এর এই ফিচারগুলো ওয়েবসাইটে ডেটার প্রদর্শনকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
