How To Add Responsive Table In Blogger

এই পোস্টে আপনি শিখবেন, কিভাবে HTML এবং CSS কোডের সাহায্যে ব্লগারের ভিতরে একটি Responsive Table তৈরি করতে হয়। এবং একসাথে আপনি Responsive Table কি এবং এটি কিভাবে কাজ করে তা শিখবেন।

যে টেবিলটি স্বয়ংক্রিয়ভাবে ডিভাইসের স্ক্রীনের আকার অনুযায়ী তার আকার পরিবর্তন করতে পারে তাকে Responsive Table বলে। Responsive Table বিভিন্ন আকারের ডিভাইসে ভিন্নভাবে দেখা যায় যেমন আপনি যদি এটি মোবাইলে খোলেন তাহলে এটি মোবাইলের আকারে দৃশ্যমান হবে এবং আপনি এটি ট্যাবলেটে খুললে এটি তার আকারে প্রদর্শিত হবে এবং আপনি এটি কম্পিউটারে খুললে এটি হবে। কম্পিউটার সাইজের তাই এইভাবে Responsive Table কাজ করে।

আপনার ওয়েবসাইট বা ব্লগের থিম যদি একটি রেসপন্সিভ থিম হয়, তাহলে আপনি শুধুমাত্র একটি Responsive Table ব্যবহার করুন। আপনি যদি Responsive Theme-এর ভিতরে Responsive Table ব্যবহার না করেন, তাহলে কেউ যখন মোবাইলে আপনার ওয়েবসাইট বা ব্লগ খুলবে, তখন আপনার টেবিলটি তার কাছে পুরোপুরি দেখা যাবে না এবং এর ফলে আপনার ওয়েবসাইটে খুব খারাপ প্রভাব পড়বে। তাই আপনি সবসময় একটি প্রতিক্রিয়াশীল থিম ভিতরে একটি Responsive Table ব্যবহার করা উচিত.

ব্লগারের ভিতরে Responsive Table কিভাবে তৈরি করবেন? আপনি ব্লগারের ভিতরে HTML এবং CSS কোডের সাহায্যে সহজেই একটি Responsive Table তৈরি করতে পারেন। ব্লগারে Responsive Table তৈরি করতে যে HTML এবং CSS কোড লাগবে, দুটি কোডই নিচে দেওয়া আছে এবং সেই কোডগুলো কোথায় রাখবেন এবং কীভাবে রাখবেন তাও বলা আছে। তাই নিচের প্রদত্ত সকল ধাপগুলো মনোযোগ সহকারে পড়ুন এবং সেই কোডগুলো আপনার ব্লগারে যোগ করুন যেভাবে বলা হয়েছে।

ব্লগারে কিভাবে CSS কোড যোগ করবেন? ব্লগারে একটি প্রতিক্রিয়াশীল টেবিল তৈরি করতে, প্রথমে আপনাকে আপনার ব্লগারে নিম্নলিখিত CSS কোড যোগ করতে হবে।

Responsive Table এর জন্য CSS কোড-

 /* CSS Post Table by www.onlinesahayata.com*/
.post-body table th, .post-body table td, .post-body table caption{border:1px solid #2E2E2E;padding:.2em .5em;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #2E2E2E;}
.post-body th{font-weight:600;}
.post-body table caption{border:none;font-style:Arial;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;border:1px solid #010101;}
.post-body th{background:#007874;color:#ffff;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%} 

ব্লগারে CSS কোড যোগ করার দুটি উপায় আছে। আপনি দুটি উপায়ে ব্লগারে CSS কোড যোগ করতে পারেন। যদি প্রথম পদ্ধতিটি কাজ না করে তবে আপনি দ্বিতীয় পদ্ধতিটি ব্যবহার করতে পারেন।

ব্লগারে CSS কোড যোগ করার প্রথম পদ্ধতিটি

‍১. প্রথমে ব্লগারের ভিতরে Theme অপশনে ক্লিক করুন।
২. এরপর Edit HTML অপশনে ক্লিক করুন।
৩. এর পর আপনার সামনে Blogger এর HTML ওপেন হবে। এখন আপনাকে HTML এর ভিতরে একবার ক্লিক করতে হবে এবং তারপর কীবোর্ড থেকে Ctrl+F চাপতে হবে। Ctrl+F চাপলে, HTML এর উপরের ডানদিকে একটি সার্চ বক্স খুলবে। সেই অনুসন্ধান বাক্সে, আপনাকে ]]> লিখে অনুসন্ধান করতে হবে। আপনি যদি এই কোড থেকে কিছু না পান, তাহলে লিখে সার্চ করতে পারেন। এই কোড লিখে সার্চ করার সাথে সাথে এই কোডটি HTML এর ভিতরে যেখানেই থাকুক না কেন, হাইলাইট হয়ে যাবে।
৪. এখন আপনাকে উপরের CSS কোডটি কপি করে ]]> কোডের উপরে পেস্ট করতে হবে। মনে রাখবেন যে আপনাকে ]]> এর আগে CSS কোড পেস্ট করতে হবে।
৫. এটি করার পর, Save theme এ ক্লিক করে থিমটি সংরক্ষণ করুন।

ব্লগারে CSS কোড যোগ করার দ্বিতীয় পদ্ধতিটি

যদি আপনার CSS কোডটি প্রথম উপায়ে কাজ না করে বা আপনি যদি প্রথম উপায়ে ব্লগারের ভিতরে CSS কোড যোগ করতে না পারেন তবে আরেকটি উপায় রয়েছে যার মাধ্যমে আপনি আপনার ব্লগারে CSS কোড যোগ করতে পারেন। এই পদ্ধতিটি আগের পদ্ধতির চেয়ে সহজ।

১. প্রথমে ব্লগারের ভিতরে Theme অপশনে ক্লিক করুন।
২. এর পরে একটি নতুন পেজ খুলবে, তার ভিতরে আপনি Customize নামে একটি বিকল্প পাবেন, সেটিতে ক্লিক করুন।
৩. এরপর ব্লগার থিম ডিজাইনার আপনার সামনে খুলবে। এখন আপনি Advanced নামে একটি অপশন পাবেন, আপনাকে সেটিতে ক্লিক করতে হবে।
৪. Advanced অপশনে ক্লিক করার পর, আপনি Add CSS নামে একটি অপশন দেখতে পাবেন, সেটিতে ক্লিক করুন।
৫. Add CSS অপশনে ক্লিক করার পর আপনার সামনে Custom CSS বক্স খুলবে। এই বক্সের ভিতরে, আপনি ব্লগারের ভিতরে যে কোন CSS কোড যোগ করতে চান তা যোগ করতে পারেন। এখন আপনাকে উপরের CSS কোডটি কপি করে এই কাস্টম CSS বক্সে পেস্ট করতে হবে।
৬. এর পর “Apply to Blog” অপশনে ক্লিক করুন। এতে করে আপনার ব্লগারে CSS কোড যোগ হয়ে যাবে।

ব্লগারে Responsive Table তৈরি করতে কীভাবে HTML কোড ব্যবহার করবেন?
আপনার ব্লগারে উপরের CSS কোড যোগ করার পর, এখন আপনি সহজেই HTML কোডের সাহায্যে প্রতিক্রিয়াশীল টেবিল তৈরি করতে পারেন। এবার দেখুন যে পেজ বা পোস্টের ভিতরে আপনি Responsive Table তৈরি করতে চান, সেই পেজ বা পোস্টের ভিতরে আপনাকে নিচে দেওয়া HTML কোড যোগ করতে হবে। পোস্ট বা পেজে কিভাবে HTML কোড যোগ করতে হয় তার পদ্ধতিও নিচে ব্যাখ্যা করা হয়েছে।

<table border=1>
<tr>
<th>No.</th>
<th>Social Media</th>
</tr>

<tr>
<td>1.</td>
<td>YouTube</td>
</tr>

<tr>
<td>2.</td>
<td>Facebook</td>
</tr>

<tr>
<td>3.</td>
<td>Twitter</td>
</tr>

<tr>
<td>4.</td>
<td>Instagram</td>
</tr>
</table>

এর পর New post অপশনে ক্লিক করুন।
এর পর আপনাকে HTML অপশনে ক্লিক করতে হবে।
HTML অপশনে ক্লিক করার পর পোস্টের HTML আপনার সামনে খুলে যাবে। এখন উপরে দেওয়া HTML কোডটি পেস্ট করুন যেখানে আপনি পোস্টের ভিতরে Responsive Table রাখতে চান।
এটি করার মাধ্যমে, আপনার ব্লগারের পোস্ট বা পৃষ্ঠার ভিতরে একটি Responsive Table তৈরি করা হবে। উপরের টেবিলের জন্য দেওয়া HTML কোডের ভিতরে ৫ টি সারি এবং ২ টি কলাম তৈরি করা হয়েছে, আপনি চাইলে সেগুলি কমাতে বা বাড়াতে পারেন।

উদহারণঃ-

No.	Social Media
1.	YouTube
2.	Facebook
3.	Twitter
4.	Instagram