Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা আপনাকে সহজে স্টাইলিশ এবং রেসপন্সিভ টেবিল তৈরি করতে সহায়তা করে। যেহেতু টেবিলের জন্য ডিজাইন এবং স্টাইলিং একটি সাধারণ ওয়েব ডেভেলপমেন্ট টাস্ক, Pure.CSS আপনাকে এর জন্য বেশ কিছু কাস্টম স্টাইল প্রদান করে।
Custom Table Styling in Pure.CSS
Pure.CSS-এর মধ্যে টেবিলের জন্য pure-table ক্লাস রয়েছে, যা টেবিলের ডিফল্ট স্টাইলিং প্রদান করে। তবে আপনি চাইলে এটি কাস্টমাইজ করে আরও উন্নত ডিজাইন তৈরি করতে পারেন, যেমন বর্ডার, প্যাডিং, রং, টেক্সট সাইজ, বা হোভার ইফেক্ট। নিচে কিছু কাস্টম স্টাইলিং কৌশল দেওয়া হয়েছে যেগুলি Pure.CSS-এ টেবিল তৈরির সময় ব্যবহার করা যেতে পারে।
1. Basic Table Styling with Pure.CSS
প্রথমে, Pure.CSS এর pure-table ক্লাস ব্যবহার করে একটি বেসিক টেবিল তৈরি করা হয়, যা টেবিলের জন্য ডিফল্ট স্টাইল প্রদান করে।
উদাহরণ: Basic 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 Table Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<table class="pure-table">
<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>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
pure-table: এটি টেবিলের জন্য ডিফল্ট স্টাইল প্রদান করে। এটি সেল, রো এবং হেডিংগুলোকে সুন্দরভাবে সাজিয়ে দেয়।
2. Adding Borders and Padding to Table Cells
যখন আপনি টেবিলের সেলগুলোর মধ্যে বর্ডার এবং প্যাডিং যোগ করতে চান, তখন আপনি border এবং padding প্রপার্টি ব্যবহার করতে পারেন। Pure.CSS এ, সেলগুলোর মধ্যে বর্ডার যোগ করার জন্য আপনি কাস্টম CSS কোড ব্যবহার করতে পারেন।
উদাহরণ: Custom Border and Padding for Table Cells
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Borders and Padding</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
table.pure-table td, table.pure-table th {
border: 1px solid #ddd;
padding: 8px 12px;
}
table.pure-table thead {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table class="pure-table">
<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>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
border: 1px solid #ddd;: সেলগুলিতে একটি হালকা গ্রে বর্ডার যোগ করা হয়েছে।padding: 8px 12px;: সেলগুলির মধ্যে প্যাডিং বাড়ানো হয়েছে, যাতে সেলগুলির মধ্যে যথেষ্ট জায়গা থাকে।background-color: #f2f2f2;: টেবিলের হেডারে হালকা ব্যাকগ্রাউন্ড কালার যোগ করা হয়েছে।
3. Hover Effect on Table Rows
আপনি চাইলে টেবিল রোতে হোভার ইফেক্টও যোগ করতে পারেন, যাতে ব্যবহারকারী যখন একটি রোতে মাউস নিয়ে যাবে, তখন সেটি আলাদা হয়ে দেখায়।
উদাহরণ: Table Row Hover Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Hover Effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
table.pure-table tbody tr:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table class="pure-table">
<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>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
table.pure-table tbody tr:hover { background-color: #f0f0f0; }: যখন ব্যবহারকারী একটি টেবিল রোতে মাউস নিয়ে যাবে, তখন রোটি হালকা গ্রে ব্যাকগ্রাউন্ড পাবে।
4. Striping Table Rows for Better Readability
টেবিলের রোকে স্ট্রাইপ করে দিলে (অর্থাৎ প্রতি দ্বিতীয় রো আলাদা ব্যাকগ্রাউন্ড রঙে প্রদর্শিত হলে) পঠনযোগ্যতা আরও ভালো হয়। Pure.CSS তে pure-table-striped ক্লাস ব্যবহার করে আপনি সহজেই স্ট্রাইপিং প্রভাব তৈরি করতে পারেন।
উদাহরণ: Striped Table Rows
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<table class="pure-table pure-table-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>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
pure-table-striped: এই ক্লাসটি টেবিলের রো গুলিতে স্ট্রাইপ প্রভাব প্রয়োগ করে। এটি প্রতি দ্বিতীয় রোতে আলাদা ব্যাকগ্রাউন্ড কালার প্রদান করে।
5. Responsive Tables
Pure.CSS তে টেবিলগুলি রেসপন্সিভ করার জন্য আপনি pure-table-responsive ক্লাস ব্যবহার করতে পারেন। এই ক্লাসটি টেবিলের ভিতরে স্ক্রোলিং যোগ করবে যাতে ছোট স্ক্রীনগুলিতে টেবিল উপাদানগুলি সহজে দেখা যায়।
উদাহরণ: Responsive Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-table-responsive">
<table class="pure-table">
<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>
</tbody>
</table>
</div>
</body>
</html>
ব্যাখ্যা:
pure-table-responsive: এই ক্লাসটি টেবিলের জন্য স্ক্রোলিং সক্ষম করে, যাতে ছোট স্ক্রীনে এটি সহজে স্ক্রোল করা যায়।
Pure.CSS ব্যবহার করে টেবিল স্টাইলিং অনেক সহজ এবং দ্রুত করা যায়। pure-table ক্লাসের মাধ্যমে আপনি একটি সুন্দর এবং ক্লিন টেবিল তৈরি করতে পারবেন, এবং pure-table-striped, pure-table-responsive, pure-table-bordered ক্লাসের মাধ্যমে আপনার টেবিলের স্টাইল আরও উন্নত করতে পারবেন। Media queries ব্যবহার করে টেবিলকে রেসপন্সিভ করা যায়, যাতে এটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়। Pure.CSS আপনার টেবিল ডিজাইন করার প্রক্রিয়া অনেক সহজ করে দেয়, এবং এটি দ্রুত ওয়েব পেজ লোড করার জন্য একটি আদর্শ পছন্দ।
Read more
