Pure.CSS এ Data Tables এবং Pagination তৈরি করা খুবই সহজ এবং কার্যকরী। Pure.CSS আপনাকে একটি সিম্পল এবং দ্রুত ডেভেলপমেন্ট অভিজ্ঞতা প্রদান করে, যা সঠিকভাবে টেবিল ডেটা প্রদর্শন এবং পেজিনেশন সিস্টেম তৈরি করতে সাহায্য করে।
Pure.CSS-এ Data Tables তৈরি করা
Pure.CSS এর মধ্যে একটি Data Table তৈরি করতে, আপনি সিম্পল pure-table ক্লাস ব্যবহার করতে পারেন। এটি একটি স্টাইল করা টেবিল তৈরি করে, যা সব ব্রাউজারে সঠিকভাবে প্রদর্শিত হয়।
উদাহরণ: Basic Data Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Data Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.table-container {
margin: 20px;
}
</style>
</head>
<body>
<div class="table-container">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>29</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>3</td>
<td>Michael Johnson</td>
<td>45</td>
<td>Chicago</td>
</tr>
<tr>
<td>4</td>
<td>Emily Davis</td>
<td>25</td>
<td>San Francisco</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-table: এটি Pure.CSS এর ক্লাস, যা একটি সাধারণ টেবিল তৈরি করে।
- pure-table-bordered: এই ক্লাসটি টেবিলের চারপাশে বর্ডার যোগ করে।
- thead, tbody, th, এবং td: সাধারণ HTML টেবিল ট্যাগ, যেগুলি ডেটার শিরোনাম এবং ডেটা সেল তৈরি করে।
এটি একটি সিম্পল Data Table তৈরি করবে, যেখানে টেবিলের চারপাশে বর্ডার থাকবে এবং তথ্যটি সুন্দরভাবে প্রদর্শিত হবে।
Pure.CSS এ Pagination তৈরি করা
Pagination হল একটি টুল যা আপনাকে বড় ডেটা সেট বা দীর্ঘ তালিকাগুলিকে ছোট ছোট অংশে ভাগ করে দেখাতে সাহায্য করে। Pure.CSS এ পেজিনেশন তৈরি করার জন্য আপনি pure-pagination ক্লাস ব্যবহার করতে পারেন।
উদাহরণ: Pagination তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Pagination</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pagination-container {
margin: 20px;
}
</style>
</head>
<body>
<div class="pagination-container">
<ul class="pure-pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-pagination: Pure.CSS এর ক্লাস, যা সিম্পল পেজিনেশন তৈরি করতে ব্যবহৃত হয়।
- « এবং »: এগুলি HTML এর প্রিপটিক পেজিনেশন সাইডার (এলিফ,
<<এবং>>) হিসেবে কাজ করে। - li > a: প্রতিটি পেজের জন্য একটি link (এনকারি) তৈরি হয়, যেখানে আপনি পেজ নম্বর বা পূর্ববর্তী/পরবর্তী পেজে যেতে পারবেন।
Pure.CSS এর সাথে Pagination এবং Data Table একত্রিত করা:
এখন, আমরা Data Table এবং Pagination একত্রিত করতে পারি, যাতে আপনি একটি বড় ডেটা সেট পেজিনেশন ব্যবহার করে দেখতে পারবেন।
উদাহরণ: Data Table + Pagination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Data Table with Pagination</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.table-container {
margin: 20px;
}
.pagination-container {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>29</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>3</td>
<td>Michael Johnson</td>
<td>45</td>
<td>Chicago</td>
</tr>
<tr>
<td>4</td>
<td>Emily Davis</td>
<td>25</td>
<td>San Francisco</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
<div class="pagination-container">
<ul class="pure-pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
- Data Table: টেবিলটি ডেটা সেল এবং হেডার সহ তৈরি করা হয়েছে।
- Pagination: টেবিলের নিচে পেজিনেশন সিস্টেম যোগ করা হয়েছে, যেখানে আপনি পেজ ১ থেকে ৬ পর্যন্ত যেতে পারবেন।
- pure-pagination: এটি পেজিনেশন সিস্টেমের জন্য ব্যবহৃত ক্লাস।
Pure.CSS এর মাধ্যমে Data Tables এবং Pagination তৈরি করা সহজ এবং কার্যকরী। এর গ্রিড এবং বেসিক টেবিল স্টাইলিং ক্লাস ব্যবহার করে আপনি দ্রুত সুন্দর এবং রেসপন্সিভ ডেটা টেবিল এবং পেজিনেশন সিস্টেম তৈরি করতে পারবেন। Pure.CSS খুবই হালকা এবং দ্রুত, ফলে এটি ওয়েব পেজের লোডিং স্পিডে কোনও প্রভাব ফেলে না এবং সহজে কাস্টমাইজ করা যায়।
