HTMLBeginner

HTML Tables (টেবিল)

table, tr, td, th, thead, tbody ও colspan/rowspan দিয়ে HTML টেবিল তৈরি — বাংলা টিউটোরিয়াল।

10টি অংশবাংলা ভাষায়

সারি ও কলামে ডেটা সাজানোর জন্য <table> ট্যাগ ব্যবহার করা হয়। প্রতিটি সারি <tr>, প্রতিটি ঘর (cell) <td> এবং শিরোনাম ঘর <th> দিয়ে তৈরি হয়।

সাধারণ টেবিল

<table>
  <tr>
    <th>নাম</th>
    <th>বয়স</th>
  </tr>
  <tr>
    <td>রহিম</td>
    <td>২৫</td>
  </tr>
  <tr>
    <td>করিম</td>
    <td>৩০</td>
  </tr>
</table>

thead, tbody, tfoot

বড় টেবিলে অংশ ভাগ করতে <thead> (শিরোনাম), <tbody> (মূল ডেটা) ও <tfoot> (সারাংশ) ব্যবহার হয়।

colspan ও rowspan

colspan="2" — একটি সেল দুইটি কলাম জুড়ে
rowspan="2" — একটি সেল দুইটি সারি জুড়ে

colspan ব্যবহারhtml

html

<table>
  <tr>
    <th>বিষয়</th>
    <th colspan="2">নম্বর</th>
  </tr>
  <tr>
    <td>ম্যাথ</td>
    <td>৮০</td>
    <td>৮৫</td>
  </tr>
</table>

টেবিল শুধু ডেটার জন্য

পেজের layout সাজাতে টেবিল ব্যবহার করবেন না — এ জন্য আধুনিক CSS (যেমন flexbox ও grid) ব্যবহার হয়। টেবিল শুধু tabular ডেটা দেখানোর জন্য।

সঠিক scope অ্যাট্রিবিউট (<th scope="col">) দিলে screen reader-এর জন্য টেবিল আরও বোধগম্য হয়।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।

<table> <tr> <th>নাম</th> <th>বয়স</th> </tr> <tr> <td>রহিম</td> <td>২৫</td> </tr> <tr> <td>করিম</td> <td>৩০</td> </tr> </table>