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 *