• How to popup-table-create-html-code

    Popup HTML Table কী?

    Popup HTML Table হলো এমন একটি টেবিল যা ওয়েবপেজে সরাসরি দেখা যায় না, বরং একটি বাটনে ক্লিক করলে পপ-আপ বা modal আকারে প্রদর্শিত হয়। এই ধরনের টেবিল সাধারণত প্রোডাক্ট লিস্ট, প্রাইস চার্ট, সার্ভিস তালিকা বা গুরুত্বপূর্ণ ডেটা দেখানোর জন্য ব্যবহার করা হয়।

    Popup HTML Table কেন ব্যবহার করবেন?

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

    • ওয়েবপেজ ক্লিন ও প্রফেশনাল দেখায়
    • ইউজার এক্সপেরিয়েন্স উন্নত হয়
    • মোবাইল ও ডেস্কটপে ভালো কাজ করে
    • Google AdSense এর জন্য নিরাপদ

    Popup HTML Table কোথায় ব্যবহার করা যায়?

    Popup HTML Table বিভিন্ন ধরনের ওয়েবসাইটে ব্যবহার করা যায়। এটি শুধু ব্লগেই নয়, বিজনেস ও সার্ভিস ওয়েবসাইটেও খুব কার্যকর।

    • E-commerce ওয়েবসাইটে প্রোডাক্ট প্রাইস লিস্ট
    • Educational ওয়েবসাইটে কোর্স ফি টেবিল
    • Hospital বা Clinic ওয়েবসাইটে সার্ভিস চার্ট
    • Business ওয়েবসাইটে প্যাকেজ ডিটেইলস
    • Blog ওয়েবসাইটে ডেটা বা তুলনামূলক তথ্য

    Popup Table তৈরি করতে কী কী লাগে?

    Popup HTML Table তৈরি করতে মূলত তিনটি ওয়েব টেকনোলজি প্রয়োজন। এগুলো খুবই সাধারণ এবং নতুনরাও সহজে শিখতে পারে।

    1. HTML – টেবিল ও বাটন তৈরি করার জন্য
    2. CSS – ডিজাইন ও popup layout করার জন্য
    3. JavaScript – popup open ও close করার জন্য

    Popup Button কীভাবে কাজ করে?

    Popup Button সাধারণত JavaScript এর মাধ্যমে কাজ করে। ইউজার যখন বাটনে ক্লিক করে, তখন একটি hidden div দৃশ্যমান হয় এবং সেটি modal আকারে স্ক্রিনে দেখায়। Close বাটনে ক্লিক করলে popup আবার বন্ধ হয়ে যায়।

    Popup Table এর ভিতরে কী কী রাখা যায়?

    Popup Table এর ভিতরে শুধু সাধারণ টেক্সট নয়, বরং বিভিন্ন ধরনের তথ্য ও ডেটা রাখা যায়।

    • প্রোডাক্ট নাম ও দাম
    • ডিসকাউন্ট ও অফার তথ্য
    • স্টক বা অ্যাভেইলেবিলিটি
    • রিমার্ক বা নোট
    • লিংক বা অতিরিক্ত তথ্য

    Popup HTML Table কি SEO ও AdSense-friendly?

    হ্যাঁ, সঠিকভাবে ব্যবহার করলে Popup HTML Table Google SEO এবং AdSense এর জন্য সম্পূর্ণ নিরাপদ। তবে popup যেন ইউজারের অনুমতি ছাড়া auto-open না হয় এবং বিজ্ঞাপন ঢেকে না রাখে—এটি নিশ্চিত করতে হবে।

    Popup Table ডিজাইনের সময় যেসব বিষয় খেয়াল রাখবেন

    • Responsive design ব্যবহার করা
    • টেবিল বড় হলে scroll ব্যবস্থা রাখা
    • Close button স্পষ্ট রাখা
    • সহজে পড়া যায় এমন font ব্যবহার করা

    Popup HTML Table ব্যবহারের সুবিধা

    Popup HTML Table ব্যবহার করলে ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স উন্নত হয় এবং পেজ speed বজায় থাকে। একই সাথে ওয়েবসাইট আরও professional দেখায়।

    উপসংহার

    Popup HTML Table আধুনিক ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ। এটি ব্যবহার করে বড় ডেটা সহজে উপস্থাপন করা যায় এবং ওয়েবপেজ পরিষ্কার রাখা সম্ভব হয়। Blogger বা যেকোনো HTML ভিত্তিক ওয়েবসাইটে এই ধরনের popup table ব্যবহার করা খুবই উপকারী।

    নিম্নে Popup Product Price Table কিভাবে বানাবেন তার একটা নমুনা মডেন ও কোড দেওয়া হল। 

    Popup Product Price List Demo Table এর একটা নমুনা মডেল-

    ---------------------------------------------------------------
    এখান থেকে কোড কপি করুন। কপি পেস্ট করলেই হয়ে যাবে। -
    ````````````````````````````````````start
      -------------------------------------------------------------------
      <h2>Popup Product Price List Demo</h2>
      <button id="bakul">Open Product Price List</button>
    ---------------------------------------------------------------------
      <!-- Modal -->
      <div id="myModal" class="modal">
        <div class="modal-content">
          <h3>Product Price List</h3>
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Product Name</th>
                <th>Category</th>
                <th>Brand</th>
                <th>Unit</th>
                <th>Stock</th>
                <th>Price (৳)</th>
                <th>Discount</th>
                <th>Final Price (৳)</th>
                <th>Remarks</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td>Soap</td><td>Cosmetics</td><td>Lifebuoy</td><td>1 pc</td><td>120</td><td>35</td><td>5%</td><td>33</td><td>Hot Sale</td></tr>
              <tr><td>2</td><td>Shampoo</td><td>Cosmetics</td><td>Sunsilk</td><td>200ml</td>
    <td>80</td><td>180</td><td>10%</td><td>162</td><td>Bestseller</td></tr>
              <tr><td>3</td><td>Rice</td><td>Food</td><td>ACI</td><td>5kg</td><td>50</td><td>450</td><td>8%</td><td>414</td><td>Fresh</td></tr>
              <tr><td>4</td><td>Cooking Oil</td><td>Food</td><td>Rupchanda</td><td>2L</td>
    <td>60</td><td>380</td><td>5%</td><td>361</td><td>Popular</td></tr>
              <tr><td>5</td><td>Tea</td><td>Beverage</td><td>Tetley</td><td>400g</td><td>70</td><td>220</td><td>12%</td><td>194</td><td>New Arrival</td></tr>
              <tr><td>6</td><td>Milk Powder</td><td>Dairy</td><td>Nido</td><td>500g</td><td>40</td><td>520</td><td>7%</td><td>484</td><td>Premium</td></tr>
              <tr><td>7</td><td>Biscuit</td><td>Food</td><td>Olympic</td><td>12 pcs</td><td>200</td><td>120</td><td>10%</td><td>108</td><td>Regular</td></tr>
              <tr><td>8</td><td>Soft Drink</td><td>Beverage</td><td>Coca Cola</td><td>1L</td><td>150</td><td>70</td><td>5%</td><td>67</td><td>Hot Sale</td></tr>
              <tr><td>9</td><td>Sugar</td><td>Food</td><td>Fresh</td<td>1kg</td<td>100</td<td> 110</td><td>3%</td><td>107</td><td>Essential</td></tr>
              <tr><td>10</td><td>Salt</td><td>Food</td><td>ACI Pure</td><td>1kg</td><td>180</td><td>35</td><td>0%</td><td>35</td><td>Daily Use</td></tr>
            </tbody>
          </table>
          <br>
          <button id="closeModal">Close</button>
        </div>
      </div>

      <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        button { padding: 6px 12px; cursor: pointer; }
        -------------------------------------------------------
        /* Modal backdrop */
        .modal {
          display: none;
          position: fixed;
          z-index: 1000;
          left: 0; top: 0;
          width: 100%; height: 100%;
          background: rgba(0,0,0,0.5);
          align-items: flex-start; /* top এ রাখবে */
          justify-content: center;
          padding-top: 50px; /* উপরে কিছু gap */
        }
        -------------------------------------------------
        /* Modal content */
        .modal-content {
          background: #fff;
          padding: 20px;
          border-radius: 8px;
          width: 70%;       /* টেবিলের প্রস্থ 70% */
          height: 70%;      /* টেবিলের উচ্চতা 50% */
          overflow: auto;   /* table বড় হলে স্ক্রল হবে */
        }
        -------------------------------------------------------
        table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 10px;
        }
        th, td {
          border: 1px solid #ccc;
          padding: 6px;
          text-align: center; /* default সব কলাম center */
          font-size: 14px;
        }
        th { background: #f2f2f2; }
        ---------------------------------
        /* Product Name column (2nd column) left align */
        td:nth-child(2), th:nth-child(2) {
          text-align: left;
          padding-left: 10px;
        }
      </style>
    ------------
      <script>
        const modal = document.getElementById("myModal");
        document.getElementById("bakul").onclick = () => modal.style.display = "flex";
        document.getElementById("closeModal").onclick = () => modal.style.display = "none";
        window.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
      </script>

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

0 Comments:

Post a Comment

GET A FREE QUOTE NOW

If you need any advice regarding your required website, Google Blog, Search Console, Google Analytics, YouTube, Social Page/Marketing, Web Marketing, Web Redesign etc. feel free to message me.

GET FREE QUOTE

Contact Us

💬 Send Me Message

🏠Address

ADDRESS

Natore-6440, Rajshahi,

Dhaka, Bangladesh

EMAIL

bakulksarkar@gmail.com

bakulksarkar2@gmail.com

PHONE CALL

+8801783070172

Whats App

+8801783070172

Chat on WhatsApp