Table

HTML Table সংক্ষিপ্ত নোটস

টেবিল তৈরি করতে ব্যবহৃত ট্যাগ

ট্যাগ ব্যবহার
<table> টেবিল শুরু ও শেষ
<caption> টেবিলের শিরোনাম
<tr> টেবিলের সারি (Row) তৈরি
<th> হেডার সেল (Header cell), ডিফল্ট বোল্ড এবং সেন্টার
<td> ডেটা সেল (Data cell), ডিফল্ট লেফট এলাইনড

সেল মার্জ (Rowspan & Colspan)

  • Rowspan: এক সেলকে একাধিক সারিতে বিস্তৃত করা

    <th rowspan="2">Contact</th>
  • Colspan: এক সেলকে একাধিক কলামে বিস্তৃত করা

    <th colspan="2">Contact</th>

সেল স্পেসিং ও প্যাডিং

  • Cellspacing: সেলগুলোর মধ্যে দূরত্ব

    <table cellspacing="10">
  • Cellpadding: সেল বর্ডার এবং কনটেন্টের মধ্যে দূরত্ব

    <table cellpadding="10">

সেল কনটেন্টের উল্লম্ব অবস্থান

  • Valign অ্যাট্রিবিউট: top, middle, bottom, baseline

    <td valign="top">101</td>

HTML টেবিল উদাহরণসমূহ

১. সাধারণ হরিজন্টাল হেডার টেবিল

<table border="1">
<caption>Horizontal headers</caption>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
</tr>
<tr>
<td>Mizan</td>
<td>01724351470</td>
<td>mizanjust@gmail.com</td>
</tr>
<tr>
<td>Amir</td>
<td>01918038095</td>
<td>amir@gmail.com</td>
</tr>
</table>

২. ভার্টিকাল হেডার টেবিল

<table border="1">
<caption>Vertical headers</caption>
<tr>
<th>Name</th>
<td>Mizan</td>
<td>Amir</td>
</tr>
<tr>
<th>Mobile</th>
<td>01724351470</td>
<td>01918038095</td>
</tr>
<tr>
<th>Email</th>
<td>mizanjust@gmail.com</td>
<td>amir@gmail.com</td>
</tr>
</table>

৩. Rowspan টেবিল

<table border="1">
<caption>Table with rowspan</caption>
<tr>
<th>Name</th>
<td>Mizan</td>
<td>Amir</td>
</tr>
<tr>
<th rowspan="2">Contact</th>
<td>01724351470</td>
<td>01918038095</td>
</tr>
<tr>
<td>mizanjust@gmail.com</td>
<td>amir@gmail.com</td>
</tr>
</table>

৪. Colspan টেবিল

<table border="1">
<caption>Table with colspan</caption>
<tr>
<th>Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td>Mizan</td>
<td>01724351470</td>
<td>mizanjust@gmail.com</td>
</tr>
<tr>
<td>Amir</td>
<td>01918038095</td>
<td>amir@gmail.com</td>
</tr>
</table>

৫. Cell Spacing

<table border="1" cellspacing="10">
<caption>Table with cell spacing</caption>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
</tr>
<tr>
<td>Mizan</td>
<td>01724351470</td>
<td>mizanjust@gmail.com</td>
</tr>
<tr>
<td>Amir</td>
<td>01918038095</td>
<td>amir@gmail.com</td>
</tr>
</table>

৬. Cell Padding

<table border="1" cellpadding="10">
<caption>Table with cell padding</caption>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
</tr>
<tr>
<td>Mizan</td>
<td>01724351470</td>
<td>mizanjust@gmail.com</td>
</tr>
<tr>
<td>Amir</td>
<td>01918038095</td>
<td>amir@gmail.com</td>
</tr>
</table>

৭. Valign উদাহরণ

<table border="1">
<tr>
<th>Roll</th>
<th>Name</th>
<th>GPA</th>
</tr>
<tr height="50">
<td valign="top">101</td>
<td valign="middle">Rohim</td>
<td valign="bottom">5.00</td>
</tr>
<tr height="50">
<td valign="bottom">102</td>
<td valign="middle">Karim</td>
<td valign="top">4.50</td>
</tr>
</table>

প্রধান HTML টেবিল MCQ সমাধান

প্রশ্ন উত্তর
টেবিলের হেডিং ট্যাগ <th>
রো বিস্তৃত করতে rowspan
<table cellpadding="5"> অর্থ সেল কনটেন্টের দূরত্ব ৫px
বর্ডার প্রদর্শন না করতে border=”0″
টেবিল তৈরিতে ট্যাগ <tr>, <th>, <td>
টেবিল অ্যাট্রিবিউট border, cellpadding, align
<td> অ্যাট্রিবিউট rowspan, colspan, align

HTML টেবিল MCQ (20টি)

  1. টেবিলের হেডিং এর জন্য কোন ট্যাগ ব্যবহার হয়?
    ক) <tr>
    খ) <td>
    গ) <th> ✅
    ঘ) <br>

  2. সেল বা রো মার্জ করার জন্য কোন অ্যাট্রিবিউট ব্যবহার হয়?
    ক) rowspan ✅
    খ) colspan
    গ) align
    ঘ) valign

  3. কলাম মার্জ করার জন্য কোন অ্যাট্রিবিউট ব্যবহার হয়?
    ক) rowspan
    খ) colspan ✅
    গ) border
    ঘ) cellpadding

  4. সেলের ভ্যালু উল্লম্ব বরাবর অবস্থানের জন্য কোন অ্যাট্রিবিউট?
    ক) align
    খ) valign ✅
    গ) border
    ঘ) cellspacing

  5. সেলের বর্ডার স্পেসিফাই করতে কোন ট্যাগ অ্যাট্রিবিউট ব্যবহার হয়?
    ক) cellpadding
    খ) cellspacing ✅
    গ) border
    ঘ) valign

  6. সেলের ভেতরের কনটেন্টের দূরত্ব নির্ধারণের জন্য কোন অ্যাট্রিবিউট?
    ক) cellpadding ✅
    খ) cellspacing
    গ) border
    ঘ) align

  7. টেবিলের সকল সারিকে একত্রে বর্ডার করার জন্য কোন CSS প্রপার্টি?
    ক) border-spacing
    খ) border-collapse ✅
    গ) border-style
    ঘ) padding

  8. নিচের কোন ট্যাগ টেবিলের প্রতিটি সারি তৈরি করে?
    ক) <table>
    খ) <tr> ✅
    গ) <td>
    ঘ) <th>

  9. নিচের কোন ট্যাগ টেবিলের ডেটা সেল তৈরি করে?
    ক) <tr>
    খ) <th>
    গ) <td> ✅
    ঘ) <caption>

  10. নিচের কোন ট্যাগ টেবিলের ক্যাপশন তৈরি করে?
    ক) <caption> ✅
    খ) <th>
    গ) <td>
    ঘ) <tr>

  11. নিচের কোন ট্যাগ টেবিল হেডার তৈরি করে?
    ক) <tr>
    খ) <td>
    গ) <th> ✅
    ঘ) <table>

  12. HTML টেবিলের সেল ডিফল্টভাবে কোন দিকে আলাইন থাকে?
    ক) ডানদিকে
    খ) মাঝখানে
    গ) বাম দিকে ✅
    ঘ) উপরের দিকে

  13. HTML টেবিলের হেডার ডিফল্টভাবে কেমন থাকে?
    ক) নরমাল
    খ) বোল্ড ও সেন্টারড ✅
    গ) আন্ডারলাইন
    ঘ) ইটালিক

  14. সেল বা রো মার্জের জন্য যদি rowspan=“3” হয়, তাহলে কত সারি একত্রিত হবে?
    ক) 1
    খ) 2
    গ) 3 ✅
    ঘ) 4

  15. সেল বা কলাম মার্জের জন্য colspan=“4” মানে?
    ক) 2 কলাম একত্রিত
    খ) 3 কলাম একত্রিত
    গ) 4 কলাম একত্রিত ✅
    ঘ) 5 কলাম একত্রিত

  16. কোন অ্যাট্রিবিউট ব্যবহার করে টেবিলের বর্ডার প্রদর্শন বা অপ্রদর্শন করা যায়?
    ক) border ✅
    খ) cellpadding
    গ) valign
    ঘ) align

  17. নিচের কোন ট্যাগ টেবিলের মধ্যে নেস্টেড লিস্ট তৈরি করতে ব্যবহার করা যায়?
    ক) <ul> ও <ol> ✅
    খ) <tr>
    গ) <td>
    ঘ) <th>

  18. টেবিলের প্রতিটি সারির উচ্চতা নির্ধারণ করতে কোন অ্যাট্রিবিউট ব্যবহার হয়?
    ক) width
    খ) height ✅
    গ) cellpadding
    ঘ) border

  19. সেলের কনটেন্টকে কেন্দ্র করানোর জন্য কোন অ্যাট্রিবিউট ব্যবহার করা হয়?
    ক) valign
    খ) align ✅
    গ) cellpadding
    ঘ) border

  20. একটি HTML টেবিলের জন্য প্রয়োজনীয় ট্যাগগুলোর সঠিক ক্রম কি?
    ক) <tr> → <th> → <td>
    খ) <table> → <tr> → <th> / <td> ✅
    গ) <td> → <tr> → <table>
    ঘ) <th> → <td> → <tr>

Facebook
Twitter
Email
Print

Leave a Reply

Your email address will not be published. Required fields are marked *