ভূমিকা
ওয়েবপেজে তথ্যকে সুন্দরভাবে সারি ও কলামে প্রদর্শনের জন্য টেবিল (Table) ব্যবহার করা হয়।
HTML Tables দিয়ে ডেটা সজ্জিত করা হয়, যেমন প্রোডাক্ট লিস্ট, স্ট্যাটিস্টিক্স বা রিপোর্ট।
HTML টেবিলের মূল ট্যাগসমূহ
| ট্যাগ | কাজ |
|---|---|
<table> | টেবিলের মূল কনটেইনার |
<tr> | Table Row — সারি তৈরি করে |
<th> | Table Header — কলামের হেডার |
<td> | Table Data — সাধারণ সেল/ডেটা |
বেসিক উদাহরণ
border="1"ব্যবহার করলে সহজভাবে সীমানা দেখা যায়।<th>সাধারণত bold হয় এবং centered alignment থাকে।
Table Caption (শিরোনাম)
টেবিলের শীর্ষে একটি শিরোনাম যোগ করতে caption ব্যবহার করা হয়:
Colspan & Rowspan
কখনো কখনো সেলগুলো একাধিক কলাম বা সারি জুড়ে থাকতে পারে।
colspan="2"→ দুই কলাম জুড়েrowspan="2"→ দুই সারি জুড়ে
HTML টেবিলের CSS Styling
border-collapse: collapse;→ ভেতরের সীমানা একত্রিত করেnth-child(even)→ striped effect দেয়
Responsive Table (মোবাইলের জন্য)
overflow-x:auto;→ ছোট স্ক্রিনে horizontal scroll যোগ করেMobile-friendly টেবিল তৈরি করতে এটি সহজ ও কার্যকর
Best Practices
✔ টেবিল শুধুমাত্র ডেটা উপস্থাপনার জন্য ব্যবহার করুন, লেআউটের জন্য নয়
✔ <th> ব্যবহার করুন সঠিক হেডার প্রদানের জন্য
✔ Accessibility এর জন্য scope="col" বা scope="row" ব্যবহার করুন
✔ Responsive টেবিলের জন্য overflow-x:auto; বা CSS frameworks ব্যবহার করুন
