Table তৈরি এবং Styling করা

Pure.CSS ফ্রেমওয়ার্কে table তৈরি এবং styling করা খুবই সহজ। Pure.CSS-এর pure-table ক্লাসের মাধ্যমে আপনি সহজে এবং দ্রুত সিম্পল, সুন্দর এবং রেসপন্সিভ টেবিল তৈরি করতে পারবেন। এটি টেবিলের জন্য এক্সট্রা স্টাইল যোগ করে, যেমন বর্ডার, প্যাডিং, আলাদা রো এবং কলাম হাইলাইটিং, যা টেবিলকে দেখতে আরও প্রফেশনাল এবং ব্যবহারকারী-বান্ধব করে তোলে।

Pure.CSS এ Table তৈরি এবং Styling করা

1. Simple Table

এটি একটি সাধারণ টেবিল তৈরি করার উদাহরণ:

<table class="pure-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

এখানে pure-table ক্লাস ব্যবহার করা হয়েছে, যা টেবিলটির জন্য বেসিক স্টাইলিং প্রয়োগ করবে। এই টেবিলটি রেসপন্সিভ হবে এবং সহজে দেখতে সুন্দর হবে।

2. Table with Striped Rows

আপনি চাইলে টেবিলের রো স্ট্রাইপ করতে পারেন, যাতে প্রতিটি সেপারেট রো আলাদা রঙে দেখায়। Pure.CSS এ এটি pure-table-striped ক্লাস দিয়ে করা যায়:

<table class="pure-table pure-table-striped">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
    </tr>
  </tbody>
</table>

pure-table-striped ক্লাসটি টেবিলের রো-কে স্ট্রাইপেড (alternating colors) করে, যাতে ব্যবহারকারী সহজে রো পার্থক্য বুঝতে পারে।

3. Table with Bordered Rows

আপনি যদি টেবিলের রো এবং কলামগুলোকে বর্ডার করতে চান, তাহলে pure-table-bordered ক্লাস ব্যবহার করতে পারেন:

<table class="pure-table pure-table-bordered">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

এখানে pure-table-bordered ক্লাস বর্ডার দেয় এবং টেবিলটির চারপাশ এবং ভিতরের রো/কলামগুলির মধ্যে সীমানা তৈরি করে।

4. Table with Hover Effect

আপনি টেবিলের রো-তে হোভার ইফেক্ট যোগ করতে পারেন, যাতে যখন ব্যবহারকারী রো-তে মাউস হোভার করেন, তখন সেই রো হাইলাইট হয়। এটি pure-table-hover ক্লাস দিয়ে করা যায়:

<table class="pure-table pure-table-bordered pure-table-hover">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

pure-table-hover ক্লাসটি হোভার করলে রো-এর ব্যাকগ্রাউন্ড পরিবর্তন করবে, যা টেবিলকে আরও ইন্টারঅ্যাকটিভ করে তোলে।

5. Table with Compact Styling

pure-table-compact ক্লাস দিয়ে আপনি টেবিলটি কমপ্যাক্ট (ছোট) করতে পারেন। এটি টেবিলের ভেতরের প্যাডিং কমিয়ে টেবিলের আকার ছোট করে।

<table class="pure-table pure-table-compact">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

এটি টেবিলের আকার ছোট করে, যাতে আপনার ওয়েবসাইটে বেশি জায়গা বাঁচে এবং টেবিলটি আরও কমপ্যাক্ট দেখতে লাগে।

6. Responsive Table

Pure.CSS স্বয়ংক্রিয়ভাবে রেসপন্সিভ টেবিল সাপোর্ট করে। তবে, আপনি যদি আরও উন্নত রেসপন্সিভ টেবিল চান, তাহলে pure-table-responsive ক্লাস ব্যবহার করতে পারেন।

<div class="pure-table-responsive">
  <table class="pure-table pure-table-bordered">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
  </table>
</div>

এখানে, pure-table-responsive ক্লাস টেবিলটিকে ছোট স্ক্রীনে স্ক্রোলেবল করে তোলে।

সারাংশ

Pure.CSS দিয়ে টেবিল তৈরি এবং স্টাইলিং করা খুবই সহজ এবং দ্রুত। আপনি pure-table, pure-table-striped, pure-table-bordered, pure-table-hover, এবং pure-table-compact ক্লাস ব্যবহার করে টেবিলের বিভিন্ন ডিজাইন এবং স্টাইলিং প্রভাব তৈরি করতে পারেন। এর ফলে আপনি খুব সহজেই সুন্দর এবং রেসপন্সিভ টেবিল তৈরি করতে পারবেন যা আপনার ওয়েবসাইটে প্রফেশনাল লুক যোগ করবে। Pure.CSS এর সহজ ব্যবহার এবং ছোট সাইজের কারণে এটি ওয়েব ডেভেলপমেন্টে খুবই জনপ্রিয় একটি সিএসএস লাইব্রেরি।