ব্লগার থিমে CSS রেখে রেস্পনসিভ টেবিল তৈরির সম্পূর্ণ টিউটোরিয়াল (রো-কলাম যোগসহ)

Complete Guide: Responsive Table in Blogger with Theme CSS (Row & Column Tips)

ব্লগার থিমে CSS কোড দিয়ে রেস্পনসিভ টেবিল তৈরির সম্পূর্ণ গাইড - নেহা কম্পিউটার এইডস
ব্লগার থিমে CSS যুক্ত করে প্রফেশনাল ও রেস্পনসিভ টেবিল তৈরির সহজ উপায়।

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

🎯 এই টিউটোরিয়ালে যা যা থাকছে

  • ব্লগার থিমে স্টাইলিশ CSS যোগ করার সহজ পদ্ধতি
  • পোস্টে ব্যবহারের জন্য রেডিমেড HTML টেমপ্লেট
  • মোবাইল, ট্যাব ও ডেস্কটপে সমান সুন্দর রেস্পনসিভ ডিজাইন
  • রো (Row) ও কলাম (Column) কীভাবে বাড়াবেন তার স্পষ্ট ব্যাখ্যা
  • স্ট্যাটাস ব্যাজ, অ্যাভাটারসহ প্রফেশনাল উপাদান

📌 ধাপ ১: থিমে CSS কোড যুক্ত করুন (শুধু একবার করতে হবে)

প্রথমেই সম্পূর্ণ CSS কোডটি ব্লগার থিমে যুক্ত করতে হবে। নিচের পদ্ধতি অনুসরণ করুন:

  1. ব্লগার ড্যাশবোর্ড → থিম (Theme) → কাস্টমাইজ (Customize) বাটনে ক্লিক করুন।
  2. বাঁ পাশের মেনু থেকে অ্যাডভান্সড (Advanced) → একেবারে নিচে CSS যোগ করুন (Add CSS) অপশনে ক্লিক করুন।
  3. নিচের পুরো CSS কোডটি কপি করে ঐ বক্সে পেস্ট করে Apply to Blog বাটনে ক্লিক করে সেভ করুন।

🚩 ঐচ্ছিক কিন্তু সুপারিশকৃত: বাংলা ও ইংরেজি ফন্ট সুন্দর দেখানোর জন্য থিমে গুগল ফন্ট যুক্ত করতে:

থিম → Edit HTML → <head> ট্যাগের ভেতরে নিচের লাইনটি পেস্ট করুন:

<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

থিমে দেওয়ার জন্য সম্পূর্ণ CSS কোড:


/* ========== রেস্পনসিভ টেবিলের জন্য CSS (থিমে রাখুন) ========== */
:root {
    --primary-color: #4f46e5;
    --primary-light: #eef2ff;
    --header-bg: #1e293b;
    --header-text: #ffffff;
    --row-even: #f8fafc;
    --row-odd: #ffffff;
    --row-hover: #e0e7ff;
    --border-color: #e2e8f0;
    --text-dark: #1e293b;
    --text-light: #475569;
    --badge-success-bg: #dcfce7;
    --badge-success-text: #166534;
    --badge-warning-bg: #fef9c3;
    --badge-warning-text: #854d0e;
    --badge-danger-bg: #fee2e2;
    --badge-danger-text: #991b1b;
    --badge-info-bg: #dbeafe;
    --badge-info-text: #1e40af;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --radius-lg: 16px;
    --radius-md: 12px;
    --transition: all 0.25s ease;
}
.table-wrapper {
    font-family: 'Hind Siliguri', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 10px;
}
.table-header-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px; padding: 0 4px;
}
.table-title {
    font-size: 1.4rem; font-weight: 700; color: var(--text-dark);
    display: flex; align-items: center; gap: 8px;
}
.table-title .icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--primary-light); color: var(--primary-color); font-size: 1.1rem;
}
.table-scroll-container {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    background: #ffffff; border: 1px solid var(--border-color);
    scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9;
}
.table-scroll-container::-webkit-scrollbar { height: 7px; }
.table-scroll-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.table-scroll-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

table.responsive-table {
    width: 100%; border-collapse: collapse; min-width: 750px;
    font-size: 0.95rem; white-space: nowrap;
}
table.responsive-table thead th {
    background: var(--header-bg); color: var(--header-text);
    font-weight: 600; font-size: 0.9rem; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 15px 16px; text-align: left;
    border-bottom: 2px solid #334155;
}
table.responsive-table thead th:first-child { padding-left: 20px; }
table.responsive-table thead th:last-child { padding-right: 20px; }
table.responsive-table tbody tr {
    transition: var(--transition); border-bottom: 1px solid var(--border-color);
}
table.responsive-table tbody tr:nth-child(even) { background-color: var(--row-even); }
table.responsive-table tbody tr:nth-child(odd)  { background-color: var(--row-odd); }
table.responsive-table tbody tr:hover {
    background-color: var(--row-hover); transform: scale(1.003);
    box-shadow: var(--shadow-sm);
}
table.responsive-table tbody td {
    padding: 14px 16px; color: var(--text-dark); vertical-align: middle;
}
table.responsive-table tbody td:first-child { padding-left: 20px; font-weight: 500; }
table.responsive-table tbody td:last-child { padding-right: 20px; }

.badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2px; }
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-text); }
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-text); }

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}

@media screen and (max-width: 768px) {
    .table-title { font-size: 1.2rem; }
    table.responsive-table { min-width: 600px; font-size: 0.85rem; }
    table.responsive-table thead th { padding: 12px 10px; font-size: 0.78rem; }
    table.responsive-table tbody td { padding: 10px 10px; }
    .badge { font-size: 0.72rem; padding: 4px 10px; }
    .user-avatar { width: 28px; height: 28px; font-size: 0.75rem; }
}
@media screen and (max-width: 480px) {
    table.responsive-table { min-width: 500px; font-size: 0.8rem; }
    table.responsive-table thead th { padding: 10px 8px; font-size: 0.72rem; }
    table.responsive-table tbody td { padding: 8px 8px; }
}

এই CSS একবার সেভ করলেই আপনার ব্লগের সব পোস্টে এই টেবিল ডিজাইন কাজ করবে।

📌 ধাপ ২: পোস্টে টেবিলের HTML ব্যবহার করুন

এবার আপনি যেকোনো পোস্ট বা পেজে গিয়ে HTML ভিউ-তে নিচের HTML কোডটি পেস্ট করুন। এখানে কোনো <style> ট্যাগ লাগবে না। প্রয়োজনমতো ডাটা পরিবর্তন করে নিন।


<div class="table-wrapper">
    <div class="table-header-bar">
        <div class="table-title">
            <span class="icon">📋</span>
            আপনার টেবিলের শিরোনাম
        </div>
        <div style="font-size:0.875rem;color:#475569;background:#f1f5f9;padding:7px 14px;border-radius:20px;">
            মোট রেকর্ড: ৩টি
        </div>
    </div>

    <div class="table-scroll-container">
        <table class="responsive-table">
            <thead>
                <tr>
                    <th># আইডি</th>
                    <th>নাম</th>
                    <th>ইমেইল</th>
                    <th>পণ্য</th>
                    <th>মূল্য</th>
                    <th>তারিখ</th>
                    <th>স্ট্যাটাস</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>#1024</strong></td>
                    <td>
                        <div class="user-cell">
                            <div class="user-avatar">RS</div>
                            <span>রাকিব সাহা</span>
                        </div>
                    </td>
                    <td>rakib@email.com</td>
                    <td>ওয়ারলেস ইয়ারফোন</td>
                    <td><strong>৳২,৪৯৯</strong></td>
                    <td>২৪ জুলাই, ২০২৬</td>
                    <td><span class="badge badge-success">সম্পন্ন ✓</span></td>
                </tr>
                <tr>
                    <td><strong>#1023</strong></td>
                    <td>
                        <div class="user-cell">
                            <div class="user-avatar">NJ</div>
                            <span>নুসরাত জাহান</span>
                        </div>
                    </td>
                    <td>nusrat@email.com</td>
                    <td>কীবোর্ড (মেকানিকাল)</td>
                    <td><strong>৳৪,৮৫০</strong></td>
                    <td>২৩ জুলাই, ২০২৬</td>
                    <td><span class="badge badge-warning">প্রক্রিয়াধীন ⏳</span></td>
                </tr>
                <tr>
                    <td><strong>#1022</strong></td>
                    <td>
                        <div class="user-cell">
                            <div class="user-avatar">AH</div>
                            <span>আরিফ হোসেন</span>
                        </div>
                    </td>
                    <td>arif@email.com</td>
                    <td>ল্যাপটপ স্ট্যান্ড</td>
                    <td><strong>৳১,২০০</strong></td>
                    <td>২২ জুলাই, ২০২৬</td>
                    <td><span class="badge badge-danger">বাতিল ✗</span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

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

📋 সাম্প্রতিক অর্ডার
মোট রেকর্ড: ৩টি
# আইডিনামইমেইলপণ্যমূল্যতারিখস্ট্যাটাস
#1024
RS
রাকিব সাহা
 rakib@email.comওয়ারলেস ইয়ারফোন৳২,৪৯৯২৪ জুলাই, ২০২৬ সম্পন্ন ✓
#1023
NJ
নুসরাত জাহান
 nusrat@email.comকীবোর্ড (মেকানিকাল)৳৪,৮৫০২৩ জুলাই, ২০২৬ প্রক্রিয়াধীন ⏳
#1022
AH
আরিফ হোসেন
 arif@email.comল্যাপটপ স্ট্যান্ড৳১,২০০২২ জুলাই, ২০২৬ বাতিল ✗

➕ কীভাবে রো (Row) যোগ করবেন

টেবিলের বডি <tbody> এর মধ্যে <tr> ট্যাগ দিয়ে প্রতিটি রো তৈরি হয়। নতুন রো যোগ করতে চাইলে শেষ <tr> ব্লকের পরে নিচের মতো একটি ব্লক বসান:


<tr>
    <td><strong>#1025</strong></td>
    <td>
        <div class="user-cell">
            <div class="user-avatar">FI</div>
            <span>ফারিয়া ইসলাম</span>
        </div>
    </td>
    <td>faria@email.com</td>
    <td>মোবাইল চার্জার</td>
    <td><strong>৳১,৮৯০</strong></td>
    <td>২৫ জুলাই, ২০২৬</td>
    <td><span class="badge badge-info">শিপিং 🚚</span></td>
</tr>

💡মনে রাখবেন: প্রতিটি <td> এর সংখ্যা হেডারের <th> সংখ্যার সমান হতে হবে (উদাহরণে ৭টি)।

➕ কীভাবে কলাম (Column) যোগ করবেন

ধরুন, আপনি "ফোন নম্বর" নামে একটি নতুন কলাম যোগ করতে চান। তাহলে:

  1. হেডারে (<thead>) নতুন একটি <th> যোগ করুন: 
    <th>ফোন নম্বর</th>
  2. প্রতিটি রো-তে (<tr>) সঠিক অবস্থানে নতুন <td> যোগ করুন: 
    <td>+880 1712-345678</td>

💡 মনে রাখবেন: যেসব রো-তে ডাটা নেই সেখানে <td>—</td> দিতে পারেন। সব রো-তেই একই সিরিয়ালে কলাম দিতে হবে, না হলে টেবিল ভেঙে যাবে।

📱 রেস্পনসিভ ডিজাইন কীভাবে কাজ করে?

এই টেবিলটি ছোট স্ক্রিনে অনুভূমিক স্ক্রল দেখায়। মোবাইলে পুরো টেবিল ছোট হয়ে না গিয়ে স্ক্রল করে দেখা যায়। এতে ডাটা সবসময় পরিষ্কার থাকে।

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

থিমের CSS-এ :root সিলেক্টরের ভেরিয়েবলগুলোর মান পরিবর্তন করে আপনি টেবিলের রং, ব্যাকগ্রাউন্ড, শ্যাডো ইত্যাদি নিজের ব্লগের সাথে মানিয়ে নিতে পারবেন। কিছু উদাহরণ:

উপাদানCSS ভেরিয়েবলডিফল্ট মানপরিবর্তনের উদাহরণ
হেডার ব্যাকগ্রাউন্ড--header-bg#1e293b#0f172a
জোড় রো-এর রং--row-even#f8fafc#f1f5f9
হোভার রং--row-hover#e0e7ff#dbeafe
সফলতার ব্যাজ--badge-success-bg#dcfce7#d1fae5

✅ সুবিধা একনজরে

  • CSS থিমে থাকায় পোস্টের HTML হালকা ও পরিষ্কার হয়।
  • ডিজাইন পরিবর্তন করতে চাইলে এক জায়গায় CSS এডিট করলেই সব টেবিল আপডেট হয়।
  • একই টেবিল স্টাইল যত খুশি পোস্টে পুনরায় ব্যবহার করা যায়।
  • মোবাইল, ট্যাব, ডেস্কটপ সর্বত্র সমান সুন্দর প্রদর্শন।

💡 মনে রাখবেন: থিমে CSS যুক্ত করার পর প্রতিবার পোস্টে টেবিল তৈরি করতে উপরের HTML টেমপ্লেটটি কপি-পেস্ট করুন, শুধু ডাটা আপডেট করে নিন। কোনো <style> ট্যাগ লাগবে না।

এই টিউটোরিয়ালটি অনুসরণ করলে আপনি ব্লগারে খুব সহজেই সুন্দর ও পেশাদার টেবিল তৈরি করতে পারবেন। কোনো প্রশ্ন থাকলে কমেন্টে জানান! 😊

আরও টুলস দেখুন :
: ইতিহাস বই

Posted by : ইতিহাস বই

Desktop & Laptop Computer service center in South Kolkata

Post a Comment

0 Comments

আপনার পছন্দের আরও কিছু লেখা :

জনপ্রিয় পোস্ট

ন্যানো ব্যানানা (Nano Banana) দিয়ে AI ছবি তৈরির জাদুকরী পরিভাষা: সম্পূর্ণ প্রম্পট গাইড

ন্যানো ব্যানানা (Nano Banana) দিয়ে AI ছবি তৈরির জাদুকরী পরিভাষা: সম্পূর্ণ প্রম্পট গাইড

June 11, 2026
ব্লগারে সুন্দর কোড বক্স তৈরি করার সহজ টিউটোরিয়াল | 3টি নিয়মে CSS যোগ করুন

ব্লগারে সুন্দর কোড বক্স তৈরি করার সহজ টিউটোরিয়াল | 3টি নিয়মে CSS যোগ করুন

July 22, 2026
PDF to Image & Watermark – Free Online Tool

PDF to Image & Watermark – Free Online Tool

May 12, 2026
দৈর্ঘ্য কনভার্টার | মিটার, ফুট, ইঞ্চি, কিলোমিটার, মাইল রূপান্তর

দৈর্ঘ্য কনভার্টার | মিটার, ফুট, ইঞ্চি, কিলোমিটার, মাইল রূপান্তর

May 14, 2026
ব্লগারের থিমে Prism.js যোগ করুন | স্বয়ংক্রিয় কোড হাইলাইটিং গাইড (২০২৬)

ব্লগারের থিমে Prism.js যোগ করুন | স্বয়ংক্রিয় কোড হাইলাইটিং গাইড (২০২৬)

May 30, 2026
ব্লগস্পটে কাস্টম রিলেটেড পোস্ট উইজেট: থাম্বনেইল, মার্কার ও সম্পূর্ণ নিয়ন্ত্রণ

ব্লগস্পটে কাস্টম রিলেটেড পোস্ট উইজেট: থাম্বনেইল, মার্কার ও সম্পূর্ণ নিয়ন্ত্রণ

July 12, 2026
Merge & Split PDF – Free Online Tool

Merge & Split PDF – Free Online Tool

May 12, 2026
স্ট্রাকচার্ড ডেটা (Schema Markup) কী? কেন, কোথায় ও কীভাবে ব্যবহার করবেন — সম্পূর্ণ বাংলা গাইড

স্ট্রাকচার্ড ডেটা (Schema Markup) কী? কেন, কোথায় ও কীভাবে ব্যবহার করবেন — সম্পূর্ণ বাংলা গাইড

July 15, 2026
ব্লগারে hreflang ট্যাগ ব্যবহার করে যুক্তরাষ্ট্রের পাঠক টার্গেট করার সম্পূর্ণ গাইড (২০২৬)

ব্লগারে hreflang ট্যাগ ব্যবহার করে যুক্তরাষ্ট্রের পাঠক টার্গেট করার সম্পূর্ণ গাইড (২০২৬)

May 30, 2026
সস্তায় কম্পিউটার সারাইয়ের দোকান

সস্তায় কম্পিউটার সারাইয়ের দোকান

February 02, 2022
🏠 সকল অনলাইন টুলস দেখুন