HTML Table 

ওয়েব সাইটে যদি একটা সুন্দর মানানসই টেবিল ব্যবহার না করেন তবে যেন অসম্পূর্ণ থেকে যায়। ওয়েব সাইটের সাথে মিলিয়ে টেবিল তৈরি করতে হয়। একটা মান সম্মত টেবিলও ওয়েবসাইটের শ্রী বৃদ্ধিতে সহায়ক ভূমিকা পালন করে থাকে। যা আপনার ব্যবসায় গতি বৃদ্ধিতে সহায়তা করবে। 

ওয়েবসাইট বা ব্লগে তথ্য সুন্দরভাবে উপস্থাপন করার জন্য **HTML টেবিল** সবচেয়ে জনপ্রিয় একটি মাধ্যম। তবে সাধারণ টেবিল মোবাইল স্ক্রিনে ঠিকভাবে দেখা যায় না। এজন্য দরকার **রেস্পন্সিভ টেবিল**।

এই পোস্টে আমরা দেখব কীভাবে HTML টেবিলকে এমনভাবে ডিজাইন করা যায় যাতে সেটা মোবাইল ও ডেস্কটপ—দুই জায়গাতেই সুন্দরভাবে দেখা যায়।

---

##রেস্পন্সিভ টেবিল 

* ডেস্কটপে লম্বা কলাম ঠিকভাবে দেখা গেলেও মোবাইলে অনেক সময় টেবিল ভেঙে যায়।

* ইউজারদের স্ক্রল করে তথ্য পড়তে হয়।

* যদি টেবিল পাঠযোগ্য না হয়, তাহলে ভিজিটর দ্রুত পেজ ছেড়ে চলে যায়।

---

##রেস্পন্সিভ টেবিলের কোড-

নিচে একটি **Horizontal Scroll Table** এর কোড দেওয়া হলো। এতে টেবিলের প্রতিটি সেলে **কালো বর্ডার** থাকবে, হেডার থাকবে কালো ব্যাকগ্রাউন্ডে সাদা টেক্সট সহ এবং শেষে থাকবে একটি ক্যাপশন।

Black Header Table

Beautiful Table 

এখান থেকে শুরু।

````````````````````````````````````````

<!-- Responsive Table with Caption, Black Header and Black Borders -->

<style>

.table-responsive {

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  margin: 0 auto;

}

.table-responsive table {

  width: 100%;

  border-collapse: collapse;

  min-width: 600px;

  border: 2px solid #000; /* বাইরের কালো বর্ডার */

}

.table-responsive caption {

  caption-side: bottom;  /* ক্যাপশন টেবিলের নিচে */

  padding: 8px;

  font-size: 15px;

  font-weight: 600;

  text-align: center;

  color: #333;

}

.table-responsive th,

.table-responsive td {

  padding: 10px 12px;

  border: 1px solid #000; /* প্রতিটি সেলের কালো বর্ডার */

  text-align: left;

  font-size: 14px;

}

.table-responsive th {

  background: #000;  /* হেডারের কালো ব্যাকগ্রাউন্ড */

  color: #fff;       /* হেডারের সাদা টেক্সট */

  font-weight: 600;

  text-align: center;

}

</style>

<div class="table-responsive">

  <table>

    <caption>প্রোডাক্টের তালিকা ও মূল্য</caption>

    <thead>

      <tr>

        <th>আইটেম</th>

        <th>বর্ণনা</th>

        <th>দাম</th>

        <th>স্টক</th>

        <th>রেটিং</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>A</td>

        <td>Mouse</td>

        <td>$ 5</td>

        <td>১২</td>

        <td>5.00</td>

      </tr>

      <tr>

        <td>B</td>

        <td>Keyboard</td>

        <td>$ 10</td>

        <td>৭</td>

        <td>4.90</td>

      </tr>

    </tbody>

  </table>

</div>

```````````````````````````````````````end

---

## টেবিল কোড ব্যবহারের নিয়ম

1. আপনার Blogger ড্যাশবোর্ডে নতুন পোস্ট তৈরি করুন।

2. **HTML View**-তে গিয়ে উপরোক্ত কোড পেস্ট করুন।

3. Publish করুন এবং মোবাইল ও ডেস্কটপে কেমন দেখা যাচ্ছে চেক করুন।

---

## উপসংহার:-

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

---

```````````````````````````````````````````````````