Read more

আপনি কি আপনার Blogger পোস্ট বা পৃষ্ঠায় সুন্দরভাবে তথ্য প্রদর্শন করতে চান? একটি রেসপন্সিভ HTML টেবিল হতে পারে একদম উপযুক্ত সমাধান! এই গাইডে আপনি শিখবেন কীভাবে Blogger-এ সহজ কোড ও ধাপে ধাপে নির্দেশনার মাধ্যমে একটি রেসপন্সিভ HTML টেবিল যোগ করবেন।

✅ কেন Blogger-এ রেসপন্সিভ টেবিল ব্যবহার করবেন?

টেবিলগুলো দুর্দান্তভাবে কাজ করে নিচের বিষয়গুলো প্রদর্শনের জন্যঃ

  • পণ্যের তুলনা
  • মূল্য নির্ধারণের বিস্তারিত
  • ক্লাসের সময়সূচি
  • তথ্যচিত্র / ডেটা চার্ট

কিন্তু সাধারণ টেবিল মোবাইলে ভেঙে যায়। একটি রেসপন্সিভ HTML টেবিল স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রিন সাইজ অনুযায়ী মানিয়ে নেয়—ফলে আপনার ব্লগটি হয়ে ওঠে মোবাইল-ফ্রেন্ডলি এবং প্রফেশনাল।

📌 ধাপে ধাপে: Blogger-এ রেসপন্সিভ HTML টেবিল যোগ করার পদ্ধতি

১. আপনার Blogger ড্যাশবোর্ডে লগইন করুন
Blogger-এ যান এবং যে ব্লগে আপনি টেবিল যুক্ত করতে চান তা নির্বাচন করুন।

২. একটি নতুন পোস্ট/পৃষ্ঠায় যান অথবা সম্পাদনা করুন
নতুন একটি পোস্ট লিখুন বা যেকোনো একটি পোস্ট/পেজ সম্পাদনা করুন যেখানে আপনি টেবিলটি রাখতে চান।

৩. HTML ভিউতে যান
পোস্ট এডিটরের ভিতরে Compose মোড থেকে HTML ভিউতে যান।

৪. নিচের রেসপন্সিভ টেবিল কোডটি পেস্ট করুন

<style>
.responsive-table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

.responsive-table table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.responsive-table th {
  background-color: #f4f4f4;
}
</style>

<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th>পণ্য</th>
        <th>মূল্য</th>
        <th>রেটিং</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>নোটবুক</td>
        <td>$5.99</td>
        <td>★★★★☆</td>
      </tr>
      <tr>
        <td>কলম সেট</td>
        <td>$2.49</td>
        <td>★★★☆☆</td>
      </tr>
    </tbody>
  </table>
</div>
এই কোড এর Result এটা

 

৫. প্রিভিউ ও পাবলিশ করুন
আবার Compose মোডে ফিরে যান এবং আপনার টেবিলটি কেমন দেখাচ্ছে তা প্রিভিউ করুন। সব ঠিক থাকলে Publish বোতামে ক্লিক করুন।

{getProduct} $button={View Now} $price={Free} $free={yes} $icon={gift}

💡 শেষ কথা

এখন আপনি জানেন কীভাবে Blogger-এ মাত্র কয়েক লাইন কোড দিয়ে একটি রেসপন্সিভ HTML টেবিল যোগ করা যায়। এটি সহজ, কার্যকর, এবং আপনার ব্লগের ডিজাইন ও ব্যবহারযোগ্যতা বাড়িয়ে তোলে।

মনে রাখবেনঃ

  • প্রাসঙ্গিক হেডার ট্যাগ <th> ব্যবহার করুন
  • ডিজাইনটি পরিষ্কার ও মিনিমাল রাখুন
  • মোবাইল ডিভাইসে রেসপনসিভ চেক করুন