HTML Tables (Professional Use)

✅ Basic Table Structure (Readable Way)

        
          <table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Role</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Rahim</td>
      <td>rahim@email.com</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>Karim</td>
      <td>karim@email.com</td>
      <td>Designer</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">Total Users: 2</td>
    </tr>
  </tfoot>
</table>
        
      

🔹 ব্যবহার

• <thead> → table header section
• <tbody> → main data
• <tfoot> → summary / total

🔹 Benefit :

• Code readable হয়
• Browser + screen reader সহজে বুঝতে পারে
• Styling & JS control easy হয়

🔹 <th> and scope (Very Important)

        
        <th scope="col">Name</th>
        <th scope="row">Rahim</th>
        
      

Scope Types:
• col → column header
• row → row header
Explain: scope দিলে screen reader বুঝে কোন data কোন header এর সাথে সম্পর্কিত। এটা accessibility এর জন্য খুব important।

🔹 Accessibility Basics (Must Know)

1. Always use < th> < /th>
   <th>Name</th>
2. Use scope
   <th scope="col">Email</th>
3. Add caption (optional but good)
   <caption>User List</caption>

Explain:

• Screen reader user table বুঝতে পারে
• SEO তেও slight benefit আছে
• Professional code standard follow হয়

---

Pro Tips (Mid-Level)

• Layout design এর জন্য table ব্যবহার করো না ❌
• Only use for tabular data ✔️
• CSS দিয়ে style করো (border, spacing, hover etc.)
• Large data হলে <thead sticky> করা যায়

Responsive Table Design (Mobile Friendly)

        
  </> HTML
  <div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rahim</td>
        <td>rahim@email.com</td>
        <td>Developer</td>
      </tr>
    </tbody>
  </table>
</div>
        
      

Horizontal Scroll (Most Commonly use)

        
          </> CSS
          .table-container {
           overflow-x: auto;
          }
        
      

Explain: Table ছোট না করে container scrollable করা হয় → mobile এ clean UX 👍

🔹 Common Mistakes ❌

• Table shrink করে text unreadable করা
• Mobile test না করা
• overflow-x ব্যবহার না করা
• Accessibility ignore করা

---

✅ Basic HTML Table Border (Only HTML)

        
           <table border="1"></table>
        
      

Explain: border="1" → table এর চারপাশে border দেয়| HTML এর border পুরনো (outdated) ❌ — আধুনিকভাবে table design করতে CSS (border, padding, margin etc.) ব্যবহার করা হয় ✔️