ব্লগার ওয়েবসাইটে কিভাবে রিসপেনসিভ টেবিল বানাবেন | how to make responaive table in blogger website

 ব্লগার ওয়েবসাইটে কিভাবে রিসপেনসিভ টেবিল বানাবেন  |  how to make responaive table in blogger website

আজকের আর্টিকেলে আমরা শিখব কিভাবে আপনারা আপনাদের ব্লগার ওয়েবসাইটের জন্য Responsive Table তৈরি করবেন। বন্ধুরা আপনারা যদি জব ওয়েবসাইট তৈরি করেন কিভাবে কোন অ্যাপ্লিকেট ওয়েবসাইট তৈরি করেন তাহলে কিন্তু অবশ্যই আপনাদেরকে টেবিলের প্রয়োজন পড়বে না হলে আপনি আপনার কনটেন্ট সুন্দর করে গুছিয়ে আপনার ইউজারদের সামনে তুলে ধরতে পারবেন না।

 রিস্পনসিভ টেবিলের দ্বারা আপনি আপনার ওয়েবসাইটের দেওয়া তথ্য গুলি সুন্দরভাবে visitor দের সামনে উপস্থাপন করতে পারবেন। তাহলে বন্ধুরা আপনারা যদি একজন ব্লগার হয়ে থাকেন তাহলে অবশ্যই আমাদের এই আর্টিকেলটি সম্পন্ন করবেন এবং জেনে নেবেন কিভাবে আপনারা Responsive Table তৈরি করবেন।

How to Making Responsive Table on Blogger Posst?

 আপনার ব্লগার পোস্ট এর ভিতর Responsive টেবিল সেট করবার জন্য আপনাদেরকে যে সমস্ত স্টেপ ফলো করতে হবে আমরা তা নিচে বিস্তারিত আলোচনা করে দিলাম।

•  নিচে দেওয়া CSS কোড দিকে প্রথমে কপি করতে হবে
•  তারপর আপনি আপনার ব্লগার এ ড্যাসবোডে যাবেন
•  থিম অপশনটিতে ক্লিক করবেন
• Edit Html ক্লিক করবেন
• Past করবেন </head> অপশনটির ওপরে সমস্ত css code

Name	Email	Location	Age
Prokash Technical	prokashdurlov1@gmail. com	India	24
Mark Ruffalo	prokashdurlov@gmail.com	United States	54
Tom Holland	TomHolland@gmail.com	United Kingdom	25
Tony Stark	Tony@gmail.com	United States	57
Benedict	Benedict@gmail.com	UK	45

এই টাইপেরResponsive Table তৈরি করার জন্য আপনাদেরকে আপনার পোস্টের ভিতরে নির্দিষ্ট জায়গায় বসিয়ে দিতে হবে।

HTML

<div class="Side_scroll_table">

<table>

  <thead>

    <tr>

      <th>Name</th>

      <th>Email</th>

      <th>Location</th>

      <th>Age</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Abhishek</td>

      <td>Abhishek@gmail.com</td>

      <td>India</td>

      <td>24</td>

    </tr>

    <tr>

      <td>Mark Ruffalo</td>

      <td>MarkRuffalo@gmail.com</td>

      <td>United States</td>

      <td>54</td>

    </tr>

    <tr>

      <td>Tom Holland</td>

      <td>TomHolland@gmail.com</td>

      <td>United Kingdom</td>

      <td>25</td>

    </tr>

    <tr>

      <td>Tony Stark</td>

      <td>Tony@gmail.com</td>

      <td>United States</td>

      <td>57</td>

    </tr>

    <tr>

      <td>Benedict</td>

      <td>Benedict@gmail.com</td>

      <td>UK</td>

      <td>45</td>

    </tr>

  </tbody>

</table>

</div>  

<style> 

.Side_scroll_table {margin: 1.5rem 0;overflow: auto;white-space: nowrap;}

table {border-collapse: collapse;border-spacing: 0;width: 100%;}

th, td {padding: 1rem 1.5rem;text-align: left;}

th {background-color: #008c5f; /* header background color */ color: #fff; /* header text color */font-weight: 600;}

tr {padding: 0;}

td {vertical-align: top;}

tr:nth-child(even) td {background-color: rgba(0, 0, 0, .075); /* striped background color */}

</style>

Note: বন্ধুরা হয়তো এবার আপনারা আমাদের এই আর্টিকেল থেকে কিছু বিষয়বস্তু বুঝতে পেরেছেন কিভাবে আপনারা আপনাদের ওয়েবসাইটের জন্য Responsive Table তৈরি করবেন। আশা করি আপনাদের দেওয়া এই আর্টিকেলটি আপনাদের যদি কোন কাজে লেগে থাকে আপনারা অবশ্যই আমাদের কমেন্ট বক্সে জানাবেন।