Responsive table Full Width
আপনি যদি ওয়েবসাইট বা ব্লগে তথ্য উপস্থাপন করতে চান, তবে HTML টেবিল সবচেয়ে সহজ এবং কার্যকরী উপায়। বিশেষ করে ছোট ব্যবসা, ই-কমার্স সাইট, প্রোডাক্ট লিস্টিং বা শিক্ষামূলক ওয়েবসাইটে টেবিলের ব্যবহার অত্যন্ত গুরুত্বপূর্ণ। একদিকে এটি তথ্যকে সুন্দরভাবে সাজায়, অন্যদিকে ইউজারদের জন্য পড়া সহজ হয়। অনেক সময়ই আমরা ইন্টারনেটে খুঁজে পাই রেসপনসিভ টেবিল, কিন্তু সেগুলো হয়তো মোবাইল ফ্রেন্ডলি নয়, হেডার বা কলাম হ্রাস পায়, অথবা ডিজাইন পুরনো এবং কঠিন।
আপনি যদি আমার দেওয়া টেবিলটি ব্যবহার করেন, তবে আর আলাদা ওয়েবসাইটে ঘুরে ঘুরে কোড খুঁজতে হবে না। এটি পূর্ণতর রেসপনসিভ, মোবাইল ফ্রেন্ডলি, এবং ডেস্কটপসহ সকল ডিভাইসের জন্য উপযুক্ত।
টেবিলের বৈশিষ্ট্য
১. সম্পূর্ণ রেসপনসিভ:
২. মোবাইল ফ্রেন্ডলি ডিজাইন:
৩. সহজ কাস্টমাইজেশন:
আপনি চাইলে নতুন রো বা কলাম সহজেই যোগ করতে পারেন।
-
নতুন কলাম যোগ করতে
<th>এবং<td>ব্যবহার করুন। -
নতুন রো যোগ করতে
<tr>ব্যবহার করুন।
৪. ডেস্কটপে clean এবং প্রফেশনাল look:
ডেস্কটপে এই টেবিলের ডিজাইন অত্যন্ত পরিচ্ছন্ন এবং পেশাদার। হেডার অংশে কালার আলাদা, হোভার ইফেক্ট আছে, এবং alternate row shading ব্যবহার করা হয়েছে। এটি পড়ার সুবিধা বাড়ায়।
৫. সুবিধাজনক স্ক্রলিং:
মোবাইল বা ট্যাবলেটে টেবিল যদি বড় হয়, তা স্ক্রল করা যায়। overflow-x:auto এবং white-space: nowrap ব্যবহার করে টেবিল স্বয়ংক্রিয়ভাবে স্ক্রলযোগ্য হয়।
৬. ক্লিন CSS স্টাইল:
এই টেবিলের CSS খুব সহজ এবং পরিষ্কার। এটি যে কোনো ওয়েবসাইটে বসানো যায়। জটিল জাভাস্ক্রিপ্ট বা লাইব্রেরি প্রয়োজন নেই।
- Single Black Border.
- Full wide Mobile friendly.
- There is also a black border around the entire table.
| আইটেম | বর্ণনা | দাম | স্টক | রেটিং |
|---|---|---|---|---|
| প্রোডাক্ট A | লাইটওয়েট | $ 45 | ১২ | 4.5 |
| প্রোডাক্ট B | লাইফ ব্যাটারি | $ 100 | ৭ | 4.1 |
0 Comments:
Post a Comment