Pure.CSS ফ্রেমওয়ার্কের মাধ্যমে আপনি সহজেই টেবিলের rows এবং columns এর জন্য কাস্টম ক্লাস তৈরি করতে পারেন। Pure.CSS কিছু প্রাথমিক টেবিল স্টাইল প্রদান করে, তবে আপনি টেবিলের লেআউট এবং ডিজাইনকে আরও কাস্টমাইজ করতে পারেন। এই প্রক্রিয়ায়, আপনি টেবিলের রো এবং কলামগুলির জন্য কাস্টম ক্লাস যোগ করতে পারবেন যা টেবিলকে আরও পরিষ্কার এবং আকর্ষণীয় করে তুলবে।
এখানে, Pure.CSS ব্যবহার করে Table Rows এবং Columns এর জন্য কাস্টম ক্লাস তৈরি করার একটি উদাহরণ দেওয়া হলো।
1. Pure.CSS Table Styling with Custom Classes
Pure.CSS সরাসরি টেবিলের জন্য মৌলিক স্টাইল প্রদান করে, কিন্তু আপনি এর সেল, রো, এবং কলামের জন্য কাস্টম স্টাইল যোগ করতে পারেন।
Table Structure with Pure.CSS
<!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 Styling with Custom Classes</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
table.custom-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1em;
text-align: left;
}
table.custom-table th,
table.custom-table td {
padding: 12px;
border: 1px solid #ccc;
}
table.custom-table th {
background-color: #3498db;
color: white;
}
table.custom-table tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Custom Class for Table Rows */
.highlight-row {
background-color: #ffeb3b;
color: #333;
}
/* Custom Class for Table Columns */
.highlight-column {
font-weight: bold;
color: #e74c3c;
}
</style>
</head>
<body>
<table class="pure-table custom-table">
<thead>
<tr>
<th class="highlight-column">ID</th>
<th>Name</th>
<th class="highlight-column">Age</th>
<th class="highlight-column">Country</th>
</tr>
</thead>
<tbody>
<tr class="highlight-row">
<td>1</td>
<td>John Doe</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>25</td>
<td>UK</td>
</tr>
<tr class="highlight-row">
<td>3</td>
<td>Sam Brown</td>
<td>28</td>
<td>Canada</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS Table Classes:
pure-table: এটি Pure.CSS দ্বারা প্রাথমিক টেবিল স্টাইল প্রদান করে।custom-table: কাস্টম ক্লাস যা টেবিলের জন্য অতিরিক্ত স্টাইলিং যোগ করতে ব্যবহৃত হয়েছে।thএবংtdstyling: টেবিলের সেলগুলির জন্য প্যাডিং, সীমা এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।
- Custom Classes:
highlight-row: এই ক্লাসটি টেবিলের নির্দিষ্ট রোকে হাইলাইট করার জন্য ব্যবহার করা হয়েছে। আমরা এখানেbackground-color: #ffeb3bদিয়ে রোটি হলুদ রঙে পরিবর্তন করেছি এবংcolor: #333দিয়ে টেক্সটের রঙ সাদাটে করে দিয়েছি।highlight-column: এই ক্লাসটি টেবিলের নির্দিষ্ট কলামগুলির জন্য ব্যবহার করা হয়েছে। এটি কলামটির ফন্ট-ওয়েটকে bold এবং টেক্সট রঙ red করে দেয়।
nth-child(even): এই CSS সিলেক্টর ব্যবহার করে আমরা টেবিলের জোড়া রোকে আলাদা রঙ (light grey) দিয়ে সাজিয়েছি, যাতে সেগুলি আরও পরিষ্কারভাবে আলাদা করা যায়।
2. Further Customization and Layouts
আপনি যদি columns বা rows এর জন্য আরও কাস্টম স্টাইল করতে চান, আপনি নিম্নলিখিত CSS কৌশলগুলো ব্যবহার করতে পারেন:
Custom Table Styling with Row and Column Grouping:
<style>
/* Custom styling for header row */
table.custom-table th {
background-color: #2c3e50;
color: white;
}
/* Custom styling for even rows */
table.custom-table tr:nth-child(even) {
background-color: #ecf0f1;
}
/* Custom styling for first column */
table.custom-table td:first-child {
font-weight: bold;
color: #2980b9;
}
/* Custom styling for last column */
table.custom-table td:last-child {
text-align: right;
color: #27ae60;
}
/* Custom row hover effect */
table.custom-table tr:hover {
background-color: #f39c12;
color: white;
}
</style>
ব্যাখ্যা:
- Header Row Styling:
thট্যাগগুলির জন্য আলাদা রঙ এবং স্টাইল দেওয়া হয়েছে যাতে হেডারগুলি পরিষ্কারভাবে আলাদা থাকে। - Even Rows Styling:
nth-child(even)দিয়ে টেবিলের সব জোড়া রোকে আলাদা রঙ দেওয়া হয়েছে। - First Column Customization:
td:first-childব্যবহার করে টেবিলের প্রথম কলামের জন্য আলাদা স্টাইল তৈরি করা হয়েছে (যেমন: ফন্ট ওয়েট bold এবং রঙ blue দেওয়া হয়েছে)। - Last Column Customization:
td:last-childব্যবহার করে টেবিলের শেষ কলামের জন্য right alignment এবং green রঙ প্রদান করা হয়েছে। - Row Hover Effect:
tr:hoverব্যবহার করে, যখন আপনি কোনও রোতে হোভার করবেন, তখন তার ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হবে এবং টেক্সট সাদা হয়ে যাবে।
Pure.CSS এর মাধ্যমে table rows এবং columns এর জন্য কাস্টম ক্লাস তৈরি করা অত্যন্ত সহজ। Custom classes ব্যবহার করে আপনি সহজেই টেবিলের ডিজাইন এবং লেআউট কাস্টমাইজ করতে পারেন। এই কাস্টম ক্লাসগুলির মাধ্যমে আপনি:
- টেবিলের রো এবং কলাম হাইলাইট করতে পারেন,
- অ্যালটারনেট রো এর জন্য ব্যাকগ্রাউন্ড রঙ দিতে পারেন,
- প্রথম এবং শেষ কলাম আলাদা স্টাইল করতে পারেন।
এই কৌশলগুলো আপনার টেবিল ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য উপযোগী করে তুলবে। Pure.CSS আপনাকে একটি সিম্পল, ইফেক্টিভ এবং রেসপন্সিভ টেবিল তৈরি করতে সহায়তা করে।
Read more
