Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ওয়েব ডিজাইনের বিভিন্ন উপাদান এবং কম্পোনেন্ট সরবরাহ করে। এর মধ্যে tables (টেবিল) ব্যবহার করা খুবই সহজ এবং এটি ব্যবহারকারীর জন্য ডেটা বা ইনফরমেশন উপস্থাপন করতে সহায়ক। Materialize CSS-এ আপনি striped tables এবং bordered tables তৈরি করতে পারেন, যা আপনার টেবিলগুলোকে আরো সজ্জিত এবং ব্যবহারকারী-বান্ধব করে তোলে।
এখানে striped tables এবং bordered tables তৈরির পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Striped Tables
Striped tables এমন টেবিল যা সীমানা পরিবর্তন করে, অর্থাৎ row গুলোর ব্যাকগ্রাউন্ড রঙ পরপর পরিবর্তিত হয়। এটি ব্যবহারকারীর জন্য টেবিলের মধ্যে ডেটা দেখার প্রক্রিয়া সহজ করে তোলে, বিশেষত যখন ডেটা অনেক বেশি থাকে। Materialize CSS-এ striped 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</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<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>
</head>
<body>
<div class="container">
<table class="striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>(123) 456-7890</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>(987) 654-3210</td>
</tr>
<tr>
<td>Robert Brown</td>
<td>robertb@example.com</td>
<td>(555) 123-4567</td>
</tr>
</tbody>
</table>
</div>
<script>
// Initialize Materialize components
$(document).ready(function() {
// No additional initialization needed for striped tables
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- .striped: এটি Materialize CSS-এ প্রস্তুতকৃত ক্লাস, যা টেবিলের সারিগুলোর ব্যাকগ্রাউন্ড রঙ পরপর পরিবর্তিত করে। এক সারি হালকা এবং পরবর্তী সারি গা dark ় হয়ে থাকে।
- thead এবং tbody: টেবিলের শিরোনাম এবং কন্টেন্ট অংশ।
- টেবিলের ভিতরে tr, td এবং th এলিমেন্ট ব্যবহার করা হয়েছে।
Bordered Tables
Bordered tables এমন টেবিল যা প্রতি সেল এবং সারির চারপাশে সীমানা বা বর্ডার থাকে। এটি ডেটা উপস্থাপন করার সময় ব্যবহারকারীকে টেবিলের মধ্যে আলাদা আলাদা সেল এবং রো শনাক্ত করতে সাহায্য করে। Materialize CSS-এ bordered 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</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<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>
</head>
<body>
<div class="container">
<table class="bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>(123) 456-7890</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>(987) 654-3210</td>
</tr>
<tr>
<td>Robert Brown</td>
<td>robertb@example.com</td>
<td>(555) 123-4567</td>
</tr>
</tbody>
</table>
</div>
<script>
// Initialize Materialize components
$(document).ready(function() {
// No additional initialization needed for bordered tables
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- .bordered: এই ক্লাসটি টেবিলের প্রতিটি সেলের চারপাশে বর্ডার তৈরি করবে।
- thead এবং tbody: শিরোনাম এবং কন্টেন্ট অংশ।
- এখানে tr, td, এবং th এলিমেন্ট ব্যবহার করা হয়েছে।
Combining Striped and Bordered Tables
এখন, আপনি চাইলে striped এবং bordered ক্লাস দুটি একসাথে ব্যবহার করে একটি টেবিল তৈরি করতে পারেন যা উভয় সুবিধাই প্রদান করবে — সারি পরিবর্তনশীল ব্যাকগ্রাউন্ড রঙ এবং প্রতিটি সেলের চারপাশে বর্ডার।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Striped and Bordered Table</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<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>
</head>
<body>
<div class="container">
<table class="striped bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>(123) 456-7890</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>janesmith@example.com</td>
<td>(987) 654-3210</td>
</tr>
<tr>
<td>Robert Brown</td>
<td>robertb@example.com</td>
<td>(555) 123-4567</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
// Initialize Materialize components
});
</script>
</body>
</html>
উপসংহার
Materialize CSS এ striped tables এবং bordered tables ব্যবহার করে আপনি একটি আকর্ষণীয় এবং সংগঠিত টেবিল তৈরি করতে পারেন। Striped tables ডেটা পড়তে সুবিধা করে এবং bordered tables প্রতিটি সেলের সীমানা স্পষ্টভাবে প্রদর্শন করে। আপনি চাইলে এই দুটি ক্লাস একসাথে ব্যবহার করে আরও উন্নত এবং সুন্দর টেবিল তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য ওয়েব পেজের ডেটা দৃশ্যমান এবং সহজবোধ্য করে তোলে।
Read more
