Pure.CSS ব্যবহার করে Table তৈরি এবং স্টাইলিং করা খুবই সহজ। Pure.CSS সাধারণত minimalistic এবং lightweight ফ্রেমওয়ার্ক হিসেবে কাজ করে, তাই এটি টেবিলের জন্য কিছু ডিফল্ট স্টাইল ক্লাস সরবরাহ করে, যা টেবিলকে সুন্দর এবং রেসপন্সিভ তৈরি করতে সাহায্য করে।
এখানে Striped Tables এবং Bordered Tables তৈরি করার জন্য Pure.CSS এর সাহায্যে কিভাবে টেবিল তৈরি এবং স্টাইল করতে হয় তা বিস্তারিতভাবে আলোচনা করা হলো।
1. Basic Table in Pure.CSS
Pure.CSS ব্যবহার করে একটি সাধারণ টেবিল তৈরি করা খুবই সহজ। শুধুমাত্র pure-table ক্লাসটি ব্যবহার করলেই টেবিলটি সুন্দরভাবে স্টাইল হয়ে যাবে।
<table class="pure-table">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
এটি একটি সাধারণ টেবিল তৈরি করবে যা Pure.CSS এর বেসিক স্টাইল ব্যবহার করে।
2. Striped Table in Pure.CSS
Striped Table এমন একটি টেবিল যেখানে টেবিলের প্রতি দ্বিতীয় সারি হালকা এবং গা dark ় রঙের স্টাইল থাকে, যা টেবিলটি দেখতে আরও স্পষ্ট এবং সহজে পড়ার উপযোগী হয়।
Pure.CSS-এ striped tables তৈরির জন্য pure-table-bordered ক্লাসের পাশাপাশি pure-table-striped ক্লাস ব্যবহার করা হয়।
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
pure-table-stripedক্লাসটি অ্যাপ্লাই করলে টেবিলের প্রতি দ্বিতীয় সারির জন্য হালকা রঙ ব্যবহার হয়, যা টেবিলের মধ্যে স্ট্রাইপিং (alternating row colors) তৈরি করে।
উল্লেখযোগ্য বৈশিষ্ট্য:
- Striped effect: প্রতি দ্বিতীয় সারি আলাদা রঙে শেড হবে।
- Readability: এটি টেবিলের পড়া সহজ করে তোলে, বিশেষ করে বড় টেবিলগুলির জন্য।
3. Bordered Table in Pure.CSS
Bordered Table এমন একটি টেবিল যেখানে টেবিলের কলাম এবং সারির চারপাশে সীমানা (border) থাকে। Pure.CSS এ bordered tables তৈরি করতে pure-table-bordered ক্লাস ব্যবহার করা হয়।
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
pure-table-borderedক্লাস ব্যবহার করলে টেবিলের সব সেল (cell) এবং টেবিলের চারপাশে সীমানা (borders) যোগ হয়।- এই ক্লাসটি টেবিলকে আরও স্পষ্ট এবং প্রফেশনাল লুক দেয়।
উল্লেখযোগ্য বৈশিষ্ট্য:
- Borders around each cell: প্রতিটি সেলে সীমানা দেওয়া হয়।
- Clarity: টেবিলের তথ্য পরিষ্কারভাবে আলাদা হয়ে যায়।
4. Combined Striped and Bordered Table
আপনি Striped এবং Bordered উভয় ক্লাস একসাথে ব্যবহার করে একটি টেবিল তৈরি করতে পারেন, যা সীমানা এবং স্ট্রাইপিং উভয়ই প্রদান করবে। এর জন্য pure-table-bordered এবং pure-table-striped ক্লাস একসাথে ব্যবহার করা হয়।
<table class="pure-table pure-table-bordered pure-table-striped">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
ব্যাখ্যা:
pure-table-bordered: সীমানা যুক্ত করবে প্রতিটি সেলে।pure-table-striped: টেবিলের প্রতি দ্বিতীয় সারির জন্য স্ট্রাইপিং অ্যাপ্লাই করবে।
5. Responsive Tables in Pure.CSS
Pure.CSS-এ আপনি সহজেই responsive tables তৈরি করতে পারেন যাতে টেবিলটি ছোট স্ক্রীন (মোবাইল ডিভাইসে) ব্যবহারের জন্য উপযুক্ত হয়। আপনি pure-table-responsive ক্লাস ব্যবহার করতে পারেন।
<div class="pure-table-responsive">
<table class="pure-table pure-table-bordered pure-table-striped">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
</div>
ব্যাখ্যা:
pure-table-responsive: টেবিলটি রেসপন্সিভ করে, অর্থাৎ স্ক্রীনের সাইজ ছোট হলে টেবিলটি স্ক্রল হতে শুরু করবে।
Pure.CSS ব্যবহার করে Striped Tables এবং Bordered Tables খুব সহজেই তৈরি করা যায়। আপনি চাইলে একটি সাধারণ টেবিল, স্ট্রাইপিং সহ টেবিল, অথবা সীমানাসহ টেবিল তৈরি করতে পারেন। এছাড়াও, responsive tables তৈরি করে, আপনি আপনার টেবিলের ব্যবহারযোগ্যতা বাড়াতে পারেন। Pure.CSS এর এই স্টাইল ক্লাসগুলো ওয়েব ডেভেলপমেন্টে টেবিলের উপস্থাপন এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
