How to Add a Responsive HTML Table in Blogger (Simple Guide)

 

আপনি কি কখনো Blogger পোস্টে Table যোগ করতে গিয়ে কি সমস্যায় পড়ছেন? আমি তো পড়েছি ভাই। অনেক সময় দেখা যায় Table ডেস্কটপে ঠিকঠাক দেখা যায়, কিন্তু মোবাইলে এলোমেলো হয়ে যায়। স্ক্রিনের বাইরে চলে যায় বা পড়তে অসুবিধা হয়। কখনো সেল এর ভিতর লিখাগুলো এলোমেলো হয়ে যায়। এই আর্টিকেলটি লিখার সময় ইন্টারনেটে দেখলাম অনেক টিউটোরিয়াল আছে, কিন্তু বেশিরভাগ টেবিলই responsive না। ডিজাইনও খুব পুরোনো ধরনের লাগে।

সো, আজ এই লেখায় আমি খুব সহজ একটি পদ্ধতি দেখাবো। এর মাধ্যমে আপনি Blogger পোস্টে একটি সুন্দর এবং responsive HTML table যোগ করতে পারবেন। এখানে কোনো JavaScript লাগবে না। শুধু একটি ছোট HTML কোড ব্যবহার করলেই হবে।

চাইলে আপনি টেবিলের color, font, এমনকি hover effect ও পরিবর্তন করতে পারবেন। চলুন ধাপে ধাপে দেখি।

Blogger এ Responsive Table কীভাবে যোগ করবেন

নিচের ধাপগুলো অনুসরণ করুন।

• প্রথমে Blogger Dashboard এ যেতে হবে।
• New Post এ ক্লিক করুন অথবা পুরোনো কোনো পোস্ট edit করুন।
• এখন editor থেকে HTML View এ চলে যান।
• নিচের HTML টেবিল কোডটি সেখানে পেস্ট করুন।
• আপনার প্রয়োজন অনুযায়ী Table এর ডাটা পরিবর্তন করুন।
• পোস্টটি Publish করে দিন।

এখন আপনার Blogger পোস্টে responsive HTML table দেখা যাবে।

Code for HTML Table

<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Abhishek</td>
        <td>Padhi</td>
        <td>90</td>
        <td>96</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>2</td>
        <td>Udit</td>
        <td>Narayan</td>
        <td>95</td>
        <td>98</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>3</td>
        <td>Rohit</td>
        <td>Thakur</td>
        <td>90</td>
        <td>93</td>
        <td>89</td>
      </tr>
      
    </tbody>
  </table>
</div>


<style> 
.table {
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-behavior: smooth;
} 
  
 .table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    color: white;
    background: darkcyan;
}
  
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
  
 table th {
    padding: 16px;
    text-align: inherit;
    border-bottom: 1px solid black;
   color:white!important;
}
  
  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
  
 table:not(.tr-caption-container) {
    min-width: 100%;
    border-radius: 3px;
}
</style>

আপনি চাইলে এখানে নিজের ডাটা বসাতে পারবেন। যেমন নাম, নম্বর বা অন্য কোনো তথ্য।

Advanced HTML CSS Responsive Table Generator

আপনি যদি টেবিলের ডিজাইন আরো কাস্টমাইজ করতে চান, তাহলে একটি advanced HTML table generator ব্যবহার করতে পারেন। এ ধরনের টুল দিয়ে আপনি Table এর অনেক কিছু পরিবর্তন করতে পারবেন, যেমন:

• cell padding
• text color
• background color
• mobile view design
• hover animation

নিচে আরেকটি টেবিলের উদাহরণ দেওয়া হলো।

 <div class="table-container">
      <h2 class="table-heading">Sample HTML Table 2</h2>

      <table style="white-space: nowrap;">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Percentage</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td data-heading="First Name">Abhishek</td>
            <td data-heading="Last Name">padhi</td>
            <td data-heading="Percentage">90</td>
          </tr>

          <tr>
            <td data-heading="First Name">Happy</td>
            <td data-heading="Last Name">singh</td>
            <td data-heading="Percentage">85</td>
          </tr>

          <tr>
            <td data-heading="First Name">Virat</td>
            <td data-heading="Last Name">kohli</td>
            <td data-heading="Percentage">80</td>
          </tr>



        </tbody>
      </table>
    </div>
    
<style>    
    .table-container {
  font-family: system-ui;
}
  
 .table-container table {
    width: 100%;
    background: #fff;
    color: #222;
    box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4);
    border-collapse: collapse;
}

.table-container h2.table-heading {
  text-align: center;
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.table-container table {
  width: 100%;
  background: #fff;
  color: #222;
  padding: 24px;
  box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4);
  border-collapse: collapse;
}

.table-container table thead tr {
  background: #222;
  color: #fff;
}

.table-container table td,
.table-container table th {
  padding: 16px 32px;
  text-align: center;
}

.table-container table tr {
  border-bottom: 1px solid #eee;
}
  
  table thead th {
    color: white!important;
  }
</style>

এখানে আপনি নিজের প্রয়োজন অনুযায়ী heading এবং data পরিবর্তন করতে পারবেন।

Conclusion

অনলাইনে অনেক HTML table generator আছে, কিন্তু অনেক সময় সেগুলো Blogger এর সাথে ঠিকভাবে কাজ করে না। কিছু Table মোবাইলে ঠিকভাবে দেখা যায় না। এই পদ্ধতিটি খুব সহজ এবং সব ধরনের ডিভাইসে ঠিকভাবে কাজ করবে। শুধু HTML view এ কোডটি paste করুন, তারপর নিজের ডাটা দিয়ে পরিবর্তন করুন। তাহলেই আপনার Blogger পোস্টে সুন্দর একটি responsive table তৈরি হয়ে যাবে।

আশা করি এই পদ্ধতিটি আপনার কাজে লাগবে। ভালো লাগলে বন্ধুদের সাথে শেয়ার করতে পারেন।