How to Create a Fully Responsive Table in Blogger (Step-by-Step Guide)

ব্লগারে রেস্পনসিভ পাঠ্যবই টেবিল তৈরির সম্পূর্ণ টিউটোরিয়াল (তিনটি পদ্ধতি + সুবিধা-অসুবিধা)

ব্লগারে রেস্পনসিভ পাঠ্যবই টেবিল তৈরির সম্পূর্ণ টিউটোরিয়াল ব্যানার

ব্লগারে রেস্পনসিভ পাঠ্যবই টেবিল তৈরি: তিনটি সহজ পদ্ধতি

শিক্ষামূলক ব্লগ বা ওয়েবসাইটে ক্লাস রুটিন, পরীক্ষার রেজাল্ট, সিলেবাস, মানবণ্টন ইত্যাদি তথ্য সুন্দরভাবে উপস্থাপনের জন্য টেবিল অপরিহার্য। কিন্তু সাধারণ টেবিল মোবাইলে দেখতে গেলে প্রায়ই সমস্যা হয়— কলাম ভেঙে যায় বা সম্পূর্ণ স্ক্রল করতে হয়। এই টিউটোরিয়ালে আমরা শিখবো কীভাবে একটি পাঠ্যবই-উপযোগী, সম্পূর্ণ রেস্পনসিভ টেবিল ব্লগার ওয়েবসাইটে তৈরি করতে হয়। সেই সঙ্গে শিখবো সাইটে CSS সংযুক্ত করার তিনটি ভিন্ন ভিন্ন পদ্ধতি এবং বিস্তারিতভাবে জানব এগুলো ব্যবহারের সুবিধা-অসুবিধার কথা।

📌 টেবিলটির বিশেষত্ব

বড় টেবিলও (৫-৭টি কলাম) মোবাইলে কার্ড আকারে ভেঙে দেখায়।
প্রতিটি সেলের সঙ্গে প্রাসঙ্গিক লেবেল সংযুক্ত থাকে, তাই তথ্য বুঝতে অসুবিধা হয় না।
ডেস্কটপে পরিষ্কার জেব্রা স্ট্রাইপ ও হোভার ইফেক্টযুক্ত প্রফেশনাল চেহারা।
শিক্ষার্থী-শিক্ষক সবার জন্য সহজে ব্যবহারযোগ্য।

🛠️ CSS সংযুক্ত করার তিনটি পদ্ধতি

ব্লগারে এই টেবিলের CSS আপনি তিনভাবে সংযুক্ত করতে পারেন। নিচে প্রতিটির ধাপ, সুবিধা ও অসুবিধা বিস্তারিত তুলে ধরা হলো—

✅ পদ্ধতি ১: Add CSS (সর্বোত্তম ও স্থায়ী)

স্থান: ব্লগার ড্যাশবোর্ড → থিম → কাস্টমাইজ → অ্যাডভান্সড → Add CSS

কীভাবে করবেন:

ব্লগার ড্যাশবোর্ড থেকে থিম → কাস্টমাইজ → অ্যাডভান্সড → Add CSS-এ যান।
নিচের দেওয়া সম্পূর্ণ CSS কোডটি (শুধু CSS অংশ, <style> ট্যাগ ছাড়া) পেস্ট করুন।
Apply to Blog বাটনে ক্লিক করে সেভ করুন।

সুবিধা:

পুরো ব্লগের সব পোস্ট ও পেজে একবার সেট করলেই কাজ করে।
ভবিষ্যতে ডিজাইন পরিবর্তন করতে চাইলে এক জায়গায় এডিট করলেই সব টেবিল আপডেট হয়ে যায়।
পোস্টের HTML হালকা ও পরিষ্কার থাকে।
ব্লগারের নিজস্ব ব্যবস্থাপনার অংশ বলে স্থিতিশীল ও নিরাপদ।

অসুবিধা:

যাঁরা থিম কাস্টমাইজেশনে একেবারেই নতুন, তাঁদের প্রথমবার একটু গাইডলাইন দরকার হতে পারে।

⚠️ পদ্ধতি ২: HTML/JavaScript গ্যাজেট (বিকল্প পদ্ধতি)

স্থান: ব্লগার ড্যাশবোর্ড → লেআউট → Add a Gadget → HTML/JavaScript

কীভাবে করবেন:

লেআউট পেজে গিয়ে Add a Gadget-এ ক্লিক করুন।
HTML/JavaScript গ্যাজেট সিলেক্ট করুন।
টাইটেল ফাঁকা রাখুন (অথবা "টেবিল CSS" লিখতে পারেন)।
কন্টেন্ট বক্সে নিচের CSS কোডটি <style>...</style> ট্যাগসহ পেস্ট করুন।
গ্যাজেটটি এমন একটি সেকশনে রাখুন যা সব পেজে লোড হয় (যেমন সাইডবার বা ফুটার), নাহলে নির্দিষ্ট পেজ ছাড়া অন্য কোথাও কাজ করবে না।
সেভ করুন।

সুবিধা:

থিমের কোনো কোডে হাত না দিয়ে সহজেই CSS যোগ করা যায়।
যাঁরা থিম এডিট করতে স্বাচ্ছন্দ্যবোধ করেন না, তাঁদের জন্য এটি নিরাপদ।
চাইলে নির্দিষ্ট পেজ বা পোস্টের জন্য আলাদা CSS দেওয়া যায় (গ্যাজেট ভিজিবিলিটি সেটিং ব্যবহার করে) — তবে এই ক্ষেত্রে সম্পূর্ণ ব্লগে কাজ করবে না।

অসুবিধা:

গ্যাজেটটি যদি ভুল জায়গায় রাখা হয় বা ভিজিবিলিটি ঠিকমতো সেট না করা হয়, তাহলে CSS সব পোস্টে কাজ করবে না।
থিমের অংশ নয় বলে পেজ লোডের সময় কিছুটা বাড়তি সময় লাগতে পারে (রেন্ডার ব্লকিং) — যদিও এই ছোট CSS-তে তেমন প্রভাব পড়ে না।
পরবর্তীতে এই CSS খুঁজে এডিট করা কিছুটা ঝামেলার হতে পারে (বিশেষ করে যদি ব্লগে অনেক গ্যাজেট থাকে)।

❌ পদ্ধতি ৩: প্রতিটি পোস্টের ভেতর `<style>` ট্যাগ (সাময়িক ব্যবহার)

স্থান: পোস্ট এডিটর → HTML ভিউ

কীভাবে করবেন:

যে পোস্টে টেবিল ব্যবহার করবেন, তার HTML ভিউ-তে যান।
পোস্টের শুরুতেই <style>...</style> ট্যাগের ভেতর সম্পূর্ণ CSS কোড পেস্ট করে দিন।
এরপর টেবিলের HTML অংশ যোগ করুন।

সুবিধা:

একেবারেই সহজ — একটি মাত্র পোস্টে CSS ও HTML একসাথে কপি-পেস্ট করলেই কাজ শেষ।
থিম বা লেআউটে কিছুই পরিবর্তন করতে হয় না।
নতুন ব্যবহারকারীদের জন্য সবচেয়ে কম জটিল।

অসুবিধা:

প্রতিটি পোস্টে একই CSS বারবার লিখতে হয় — এতে পোস্টের আকার বড় হয় এবং অপ্রয়োজনীয় পুনরাবৃত্তি তৈরি হয়।
ভবিষ্যতে ডিজাইন পরিবর্তন করতে চাইলে সব পোস্ট আলাদাভাবে খুঁজে খুঁজে এডিট করতে হবে — যা সময়সাপেক্ষ ও বিরক্তিকর।
একটি CSS-এ ভুল থাকলে পুরো পোস্টের ডিজাইন নষ্ট হতে পারে।

💡 আমাদের সুপারিশ: দীর্ঘমেয়াদি সুবিধা, পরিষ্কার ব্যবস্থাপনা ও পেশাদারিত্বের জন্য Add CSS পদ্ধতি (পদ্ধতি ১)-ই সর্বোত্তম। নিচে আমরা সেটির জন্যই সম্পূর্ণ CSS কোড এবং HTML টেমপ্লেট দিয়ে দিচ্ছি। আপনি যদি একান্তই থিমে যেতে না চান, তবে গ্যাজেট পদ্ধতি (পদ্ধতি ২) ব্যবহার করতে পারেন।

📦 প্রয়োজনীয় CSS (Add CSS বা গ্যাজেটে পেস্ট করুন)

Add CSS-এর জন্য: নিচের কোডটি সরাসরি পেস্ট করুন (<style> ট্যাগ ছাড়া)।
গ্যাজেটের জন্য: নিচের কোডটি <style>...</style> ট্যাগের ভেতরে রেখে পেস্ট করুন।


.edu-table-wrapper {
    max-width: 900px;
    margin: 20px auto;
    font-family: 'Hind Siliguri', 'Segoe UI', Tahoma, sans-serif;
    padding: 0 10px;
}
.edu-table-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}
table.edu-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
table.edu-table thead th {
    background: #2c3e50;
    color: white;
    padding: 12px 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    border: 1px solid #1a252f;
}
table.edu-table tbody td {
    padding: 10px;
    border: 1px solid #d1d5db;
    color: #334155;
    font-size: 0.9rem;
    vertical-align: top;
}
table.edu-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}
table.edu-table tbody tr:hover {
    background-color: #eef2ff;
}
.edu-highlight {
    font-weight: 600;
    color: #0f172a;
}
@media screen and (max-width: 600px) {
    table.edu-table thead { display: none; }
    table.edu-table tbody td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid #e2e8f0;
        border-right: none;
        border-left: none;
        font-size: 0.88rem;
    }
    table.edu-table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        text-align: left;
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
    }
    table.edu-table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        background: #ffffff;
    }
    table.edu-table tbody tr:nth-child(even) { background: #ffffff; }
    table.edu-table tbody td:last-child { border-bottom: none; }
}

📄 পোস্টে ব্যবহারের জন্য HTML টেমপ্লেট

CSS সংযুক্ত করার পর, নিচের HTML অংশটি আপনার পোস্ট বা পেজের HTML ভিউ-তে পেস্ট করুন। প্রয়োজনমতো কলাম, ডাটা, শিরোনাম পরিবর্তন করে নিন।


<div class="edu-table-wrapper">
  <div class="edu-table-title">📘 সপ্তম শ্রেণির ক্লাস রুটিন — ২০২৬</div>
  <table class="edu-table">
    <thead>
      <tr>
        <th>দিন</th>
        <th>১ম পিরিয়ড</th>
        <th>২য় পিরিয়ড</th>
        <th>৩য় পিরিয়ড</th>
        <th>৪র্থ পিরিয়ড</th>
        <th>৫ম পিরিয়ড</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="দিন" class="edu-highlight">শনিবার</td>
        <td data-label="১ম পিরিয়ড">বাংলা</td>
        <td data-label="২য় পিরিয়ড">ইংরেজি</td>
        <td data-label="৩য় পিরিয়ড">গণিত</td>
        <td data-label="৪র্থ পিরিয়ড">বিজ্ঞান</td>
        <td data-label="৫ম পিরিয়ড">ইতিহাস</td>
      </tr>
      <tr>
        <td data-label="দিন" class="edu-highlight">রবিবার</td>
        <td data-label="১ম পিরিয়ড">ইংরেজি</td>
        <td data-label="২য় পিরিয়ড">গণিত</td>
        <td data-label="৩য় পিরিয়ড">ভূগোল</td>
        <td data-label="৪র্থ পিরিয়ড">বাংলা</td>
        <td data-label="৫ম পিরিয়ড">শারীরিক শিক্ষা</td>
      </tr>
      <tr>
        <td data-label="দিন" class="edu-highlight">সোমবার</td>
        <td data-label="১ম পিরিয়ড">গণিত</td>
        <td data-label="২য় পিরিয়ড">বিজ্ঞান</td>
        <td data-label="৩য় পিরিয়ড">ইতিহাস</td>
        <td data-label="৪র্থ পিরিয়ড">ইংরেজি</td>
        <td data-label="৫ম পিরিয়ড">চারু ও কারুকলা</td>
      </tr>
      <tr>
        <td data-label="দিন" class="edu-highlight">মঙ্গলবার</td>
        <td data-label="১ম পিরিয়ড">বিজ্ঞান</td>
        <td data-label="২য় পিরিয়ড">বাংলা</td>
        <td data-label="৩য় পিরিয়ড">ইংরেজি</td>
        <td data-label="৪র্থ পিরিয়ড">গণিত</td>
        <td data-label="৫ম পিরিয়ড">ধর্ম</td>
      </tr>
    </tbody>
  </table>
  <p style="text-align:center; font-size:0.85rem; color:#64748b; margin-top:6px;">
    * ক্লাস সময়: সকাল ৮টা - দুপুর ১টা
  </p>
</div>

🔍 লাইভ প্রিভিউ

নিচের টেবিলটি দেখতে ঠিক কেমন হবে, তার একটি নমুনা—

📘 সপ্তম শ্রেণির ক্লাস রুটিন — ২০২৬

দিন	১ম পিরিয়ড	২য় পিরিয়ড	৩য় পিরিয়ড	৪র্থ পিরিয়ড	৫ম পিরিয়ড
শনিবার	বাংলা	ইংরেজি	গণিত	বিজ্ঞান	ইতিহাস
রবিবার	ইংরেজি	গণিত	ভূগোল	বাংলা	শারীরিক শিক্ষা
সোমবার	গণিত	বিজ্ঞান	ইতিহাস	ইংরেজি	চারু ও কারুকলা
মঙ্গলবার	বিজ্ঞান	বাংলা	ইংরেজি	গণিত	ধর্ম

* ক্লাস সময় : সকাল ১০:৫০টা - বিকেল ৪:৩০টা

➕ কীভাবে কলাম যোগ করবেন?

নতুন একটি কলাম (যেমন "৬ষ্ঠ পিরিয়ড") যোগ করতে:

<thead>-এর <tr>-এ <th>৬ষ্ঠ পিরিয়ড</th> যোগ করুন।
প্রতিটি <tr>-এ <td data-label="৬ষ্ঠ পিরিয়ড">বিষয়ের নাম</td> যোগ করুন।
সব রো-তে একই ক্রমে নতুন কলাম রাখতে হবে, নাহলে টেবিল ভেঙে যাবে।

🎨 কাস্টমাইজেশন

উপরের CSS কোডে নিচের মানগুলো পরিবর্তন করে নিজের ব্লগের সাথে মানিয়ে নিতে পারেন:

উপাদান	কোড অংশ	ডিফল্ট মান	পরিবর্তনের উদাহরণ
হেডার ব্যাকগ্রাউন্ড	`background: #2c3e50;`	গাঢ় নীল	#4f46e5 (বেগুনি)
জেব্রা রো	`tr:nth-child(even)`	#f8fafc	#f1f5f9
হোভার রং	`tr:hover`	#eef2ff	#e0e7ff
ফন্ট	`font-family`	Hind Siliguri	আপনার পছন্দের ফন্ট

✅ শেষকথা

এই একটি মাত্র CSS ও HTML ব্যবহার করে আপনি আপনার শিক্ষামূলক ব্লগে অসংখ্য টেবিল যোগ করতে পারবেন। বড় রুটিন, মানবণ্টন, রেজাল্ট শিট — সবই মোবাইলে দারুণ দেখাবে।

💡 মনে রাখবেন: CSS থিমে বা গ্যাজেটে একবার যোগ করার পর, প্রতিবার পোস্টে শুধু HTML টেমপ্লেট কপি-পেস্ট করলেই কাজ শেষ। আলাদা কোনো স্টাইল বা স্ক্রিপ্ট লাগবে না।

এই টিউটোরিয়ালটি অনুসরণ করলে আপনার ব্লগের শিক্ষামূলক কন্টেন্ট হবে আরও সমৃদ্ধ ও পাঠকবান্ধব। কোনো প্রশ্ন থাকলে কমেন্টে জানান! 😊