<!--MOBILE RESPONSIVE TABLE DOUBLE RED BORDER-->
<style>
.table-full {
  width: 100%;
  border-collapse: collapse;
  border: 3px double red; /* পুরো টেবিলের ডাবল লাইন লাল বর্ডার */
}
.table-full th,
.table-full td {
  padding: 10px 12px;
  border: 3px double red; /* প্রতিটি সেলের ডাবল লাইন লাল বর্ডার */
  text-align: left;
  font-size: 14px;
}
.table-full th {
  background: #f7f7f7;
  font-weight: 600;
}
</style>
<table class="table-full">
  <thead>
    <tr>
      <th>Item</th>
      <th>Html</th>
      <th>Price</th>
      <th>Stock</th>
      <th>Ratting</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.</td>
      <td>Blogger</td>
      <td>$ 5</td>
      <td>1</td>
      <td>5.00</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>WordPress</td>
      <td>$ 5</td>
      <td>1</td>
      <td>5.00</td>
    </tr>
  </tbody>

Table No. 2 – Horizontal Scroll Responsive Table (Black Border)

এই টেবিলটি বিশেষভাবে তৈরি করা হয়েছে Responsive Horizontal Scroll এর জন্য। যখন স্ক্রিন ছোট হবে, তখন টেবিল স্ক্রল করা যাবে।

মূল বৈশিষ্ট্য

• overflow-x: auto;

• মোবাইলে টেবিল ভেঙে যায় না

• পরিষ্কার কালো বর্ডার

• মিনিমাম প্রস্থ নির্ধারণ করা হয়েছে (min-width: 700px;)

কেন Horizontal Scroll দরকার?

অনেক সময় টেবিলে অনেকগুলো কলাম থাকে। মোবাইল স্ক্রিন ছোট হওয়ায় সব কলাম একসাথে দেখানো যায় না। তখন টেবিল ভেঙে যায় বা কন্টেন্ট কেটে যায়। এই সমস্যার সমাধান হলো Scrollable Table।

ব্যবহারের ক্ষেত্র

• ই-কমার্স প্রোডাক্ট তুলনা

• টেকনিক্যাল স্পেসিফিকেশন তালিকা

• মার্কেট প্রাইস লিস্ট

• ইনভেন্টরি রিপোর্ট

SEO দিক থেকে সুবিধা

Google টেবিলের তথ্য বুঝতে পারে যদি সঠিকভাবে <thead> এবং <tbody> ব্যবহার করা হয়। এতে Structured Data উন্নত হয় এবং সার্চ রেজাল্টে ভালো পারফরমেন্স পাওয়া যায়।

Black visible Border Under scroll Table

Table No. 3 – Price & Stock Display Table

এই টেবিলটি তুলনামূলকভাবে সরল এবং প্রোডাক্টের বর্ণনা, মূল্য ও স্টক দেখানোর জন্য উপযোগী।

প্রধান বৈশিষ্ট্য

• পরিষ্কার প্রোডাক্ট লিস্টিং

• টাকা চিহ্ন (৳) ব্যবহার

• কমপ্যাক্ট ডিজাইন

• সহজ পড়ার মতো ফন্ট সাইজ

কেন এই টেবিল কার্যকর?

✔ ছোট অনলাইন শপের জন্য উপযুক্ত
✔ ব্লগে অফার লিস্ট প্রকাশে সুবিধাজনক
✔ প্রাইস আপডেট সহজ
✔ ডেটা কম হলে সুন্দর দেখায়

আপনি চাইলে CSS দিয়ে Hover Effect যোগ করতে পারেন:

.table-responsive tr:hover {
  background-color: #f2f2f2;
}

এতে ইউজার এক্সপেরিয়েন্স আরও উন্নত হবে।

Item	Description	Price	Stock
Light	Night	৳ 1500	23
Fan	Yellow	৳ 2700	5

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

<!--Horizontal scroll responsive table with BLACK visible borders-->

<style>
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  border-radius: 6px;
}
.table-responsive table {
  width: 100%;
  border-collapse: collapse; /* সঠিকভাবে সেল বর্ডার মিলিয়ে দেবে */
  border: 2px solid #000000; /* টেবিলের বাইরের কালো বর্ডার */
  min-width: 700px;
}
.table-responsive th,
.table-responsive td {
  padding: 10px 12px;
  border: 1px solid #000000; /* প্রতিটি সেলের কালো বর্ডার */
  text-align: left;
  font-size: 14px;
}
.table-responsive th {
  background: #f7f7f7;
  font-weight: 600;
}
</style>
<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Nam</th>
        <th>Price</th>
        <th>Stock</th>
        <th>Ratting</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mobile</td>
        <td>Max</td>
        <td>$ 200</td>
        <td>9</td>
        <td>4.3</td>
      </tr>
      <tr>
        <td>Laptop</td>
        <td>Max</td>
        <td>$ 500</td>
        <td>6</td>
        <td>4.7</td>
      </tr>
    </tbody>
  </table></div>

Table No. 4 – Priority Table (Hide Columns on Small Screen)

এই টেবিলটি সবচেয়ে আধুনিক ডিজাইন। এখানে ছোট স্ক্রিনে কিছু কলাম লুকানো হয়।

কিভাবে কাজ করে?

@media (max-width: 720px) {
  .priority-table th:nth-child(4),
  .priority-table td:nth-child(4),
  .priority-table th:nth-child(5),
  .priority-table td:nth-child(5) {
    display: none;
  }
}

অর্থাৎ 720px এর নিচে গেলে 4th ও 5th কলাম অদৃশ্য হয়ে যাবে।

কেন এটা গুরুত্বপূর্ণ?

মোবাইলে সব তথ্য একসাথে দেখানো জরুরি নয়। প্রাধান্য অনুযায়ী কলাম দেখানো ভালো।

উদাহরণ:

• মোবাইলে শুধু প্রোডাক্ট নাম ও দাম দেখানো

• স্টক ও রেটিং লুকানো

• প্রয়োজন হলে “View Details” বাটন যোগ করা

ব্যবহারের ক্ষেত্র

• ই-কমার্স মোবাইল ভিউ

• অফার তালিকা

• রেসপন্সিভ প্রাইসিং টেবিল

• নিউজ পোর্টাল ডাটা টেবিল

<!--COPY-PASTE: Hide low-priority columns on small screens-->
<style>
.priority-table {
  width: 100%;
  border-collapse: collapse;
}
.priority-table th, .priority-table td {
  padding: 10px;
  border: 1px solid #ddd;
}
@media (max-width: 720px) {
  /* hide the 4th column (stock) and 5th column (rating) on small screens */
  .priority-table th:nth-child(4),
  .priority-table td:nth-child(4),
  .priority-table th:nth-child(5),
  .priority-table td:nth-child(5) {
    display: none;
  }
}
</style>
<table class="priority-table">
  <thead>
    <tr>
      <th>আইটেম</th>
      <th>বর্ণনা</th>
      <th>দাম</th>
      <th>স্টক</th>
      <th>রেটিং</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A-1</td>
      <td>T-Shirt</td>
      <td>৳ 450</td>
      <td>15</td>
      <td>4.3</td>
    </tr>
    <tr>
      <td>B-2</td>
      <td>Jaket</td>
      <td>৳ 980</td>
      <td>22</td>
      <td>4.0</td>
    </tr>
  </tbody>
</table>

Responsive Table Design করার সময় যেসব বিষয় খেয়াল রাখবেন

১. Border Collapse ব্যবহার করুন

এতে বর্ডার ডাবল হয়ে বিশ্রী দেখাবে না।

২. Overflow Control

ছোট স্ক্রিনে overflow-x: auto; ব্যবহার করলে কন্টেন্ট নষ্ট হবে না।

৩. Minimum Width দিন

যদি টেবিল বড় হয় তাহলে min-width ব্যবহার করুন।

৪. Media Query ব্যবহার করুন

মোবাইলের জন্য আলাদা ডিজাইন করুন।

৫. পরিষ্কার ফন্ট ব্যবহার করুন

14px – 16px ফন্ট মোবাইলে ভালো কাজ করে।

Blogger-এ Table ব্যবহার করার টিপস

আপনি যেহেতু Blogger ব্যবহার করছেন, তাই কিছু গুরুত্বপূর্ণ বিষয়:

✔ HTML View ব্যবহার করে কোড পেস্ট করুন
✔ একই ক্লাস দুইবার ব্যবহার করলে CSS কনফ্লিক্ট হতে পারে
✔ একাধিক টেবিল থাকলে আলাদা ক্লাস দিন
✔ Footer বা Theme CSS-এ স্টাইল যোগ করলে দ্রুত লোড হয়

Blogger-এ Table ব্যবহার করার টিপস

আপনি যেহেতু Blogger ব্যবহার করছেন, তাই কিছু গুরুত্বপূর্ণ বিষয়:

✔ HTML View ব্যবহার করে কোড পেস্ট করুন
✔ একই ক্লাস দুইবার ব্যবহার করলে CSS কনফ্লিক্ট হতে পারে
✔ একাধিক টেবিল থাকলে আলাদা ক্লাস দিন
✔ Footer বা Theme CSS-এ স্টাইল যোগ করলে দ্রুত লোড হয়

User Experience উন্নত করার উপায়

• Hover Effect যোগ করুন

• Zebra Striping ব্যবহার করুন

• Sticky Header ব্যবহার করতে পারেন

• Sortable Column যোগ করতে পারেন (JavaScript দিয়ে)

উদাহরণ Zebra Style:

.priority-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

Performance ও Speed Optimization

অনেক সময় বড় টেবিল লোডিং স্লো করে। তাই:

✔ অপ্রয়োজনীয় CSS বাদ দিন
✔ Inline CSS কম ব্যবহার করুন
✔ একাধিক টেবিল হলে CSS একবারই লিখুন
✔ JavaScript কম ব্যবহার করুন

কোন টেবিল কখন ব্যবহার করবেন?

উপসংহার

HTML Table এখনো ওয়েব ডিজাইনের একটি অপরিহার্য অংশ। সঠিক CSS ব্যবহার করলে টেবিল দেখতে আধুনিক ও প্রফেশনাল হয়। আপনার দেওয়া চারটি টেবিল ডিজাইন—

• ডাবল বর্ডার টেবিল

• ব্ল্যাক স্ক্রল টেবিল

• প্রাইস লিস্ট টেবিল

• প্রাইওরিটি রেসপন্সিভ টেবিল

সবগুলোই আলাদা প্রয়োজনে ব্যবহারযোগ্য।