0
Home  ›  Technology

ব্লগার এবং ওয়ার্ডপ্রেসে কীভাবে এইচটিএমএল টেবিল যুক্ত করবেন

Introduction

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

ব্লগার এবং ওয়ার্ডপ্রেসে কীভাবে এইচটিএমএল টেবিল



How to Add a Responsive HTML Table in Blogger & WordPress

ধাপ 1: HTML টেবিল তৈরি করা

আমরা এই প্রথম ধাপে দেখব কীভাবে একটি HTML টেবিল তৈরি করতে হয়। টেবিল স্ট্রাকচার তৈরি করতে আপনি এই HTML কোড ব্যবহার করতে পারেন:

html
Copy code
<table>
  <tr>
    <th>শিরোনাম 1</th>
    <th>শিরোনাম 2</th>
    <th>শিরোনাম 3</th>
  </tr>
  <tr>
    <td>তথ্য 1</td>
    <td>তথ্য 2</td>
    <td>তথ্য 3</td>
  </tr>
</table>

উল্লিখিত কোডে, <table> ট্যাগটি একটি টেবিল শুরু করে এবং <tr> ট্যাগটি টেবিল সারি তৈরি করে। <th> ট্যাগগুলি টেবিলের শিরোনাম সেলেক্টর হিসেবে ব্যবহার করা হয় এবং <td> ট্যাগগুলি ডেটা সেলেক্টর হিসেবে ব্যবহার করা হয়।

ধাপ 2: টেবিল সাজানো

HTML টেবিলটি তৈরি করার পর, আমরা এটিকে সাজাতে হবে যাতে এটি রেসপন্সিভ হয়। আপনি CSS (Cascading Style Sheets) ব্যবহার করে টেবিল স্টাইল কাস্টমাইজ করতে পারেন।

css

Copy code
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

@media (max-width: 600px) {
  table, th, td {
    display: block;
  }

  th, td {
    width: 100%;
  }
}
এই CSS কোড টেবিলের স্টাইল সেট করে এবং টেবিলটি রেসপন্সিভ করে তোলে।

ধাপ 3: টেবিল এড করা

HTML টেবিল সাজানোর পর, এটি আপনার ব্লগে যোগ করা প্রয়োজন। ওয়ার্ডপ্রেসে, আপনি 'বিজ্ঞাপন স্থান' বা 'পোস্ট সাজানো' পৃষ্ঠায় এই HTML কোড যোগ করতে পারেন।

Frequently Asked Questions

প্রশ্ন 1: কীভাবে টেবিলে নতুন সারি যোগ করা যায়?
নতুন সারি যোগ করতে, আপনি একটি <tr> ট্যাগ তৈরি করতে পারেন এবং সেখানে আপনার ডেটা সেলগুলি যোগ করতে পারেন।

প্রশ্ন 2: কীভাবে টেবিলের শিরোনাম সেট করব?
টেবিলের শিরোনাম সেট করতে, <th> ট্যাগ ব্যবহার করে সেগুলি ডিফাইন করতে হয়।

প্রশ্ন 3: কীভাবে টেবিলের স্টাইল কাস্টমাইজ করব?
টেবিলের স্টাইল কাস্টমাইজ করতে, CSS ব্যবহার করুন এবং টেবিলের উপাদানগুলি স্টাইল করুন।

Conclusion

এই নিবন্ধে, আমরা দেখেছি কীভাবে একটি রেসপন্সিভ HTML টেবিল তৈরি করতে এবং এটি আপনার ওয়ার্ডপ্রেস বা ব্লগার ব্লগে যোগ করতে হয়। এই ব্যাপারে আপনি এখন স্বাধীন এবং ক্রিয়েটিভ হতে পারেন, এবং আপনার সাইটের দর্শকদের জন্য একটি আকর্ষণীয় এবং উপকারী টেবিল তৈরি করতে পারেন।
একটি মন্তব্য পোস্ট করুন
Search
Menu
Theme
Share
Additional JS