HTML <tbody> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <table>
  • পরবর্তী পৃষ্ঠা <td>

সংজ্ঞা ও ব্যবহার

<tbody> ট্যাগটি একটি HTML ট্যাবিলের মূল বাক্যখণ্ডকে গ্রুপ করার জন্য ব্যবহৃত হয়。

<tbody> উপাদান সহ <thead> এবং <tfoot> উপাদানগুলির মিলিত ব্যবহারের মাধ্যমে, ট্যাবিলের প্রত্যেক অংশ (মূল বাক্যখণ্ড, শীর্ষসূচক, পাদসূচক) নির্দিষ্ট করা হয়。

ব্রাউজারগুলি এই উপাদানগুলি ব্যবহার করতে পারে, যাতে ট্যাবিলের মূল বাক্যখণ্ডকে সর্বদা সরবরাহ করা যায়, এবং বড় মাপের ট্যাবিলকে বহুটি পৃষ্ঠায় প্রিন্ট করার সময়, এই উপাদানগুলির মাধ্যমে প্রত্যেক পৃষ্ঠার শীর্ষ ও নিচে টাবিলের শীর্ষসূচক ও পাদসূচক প্রিন্ট করা যায়。

নোটিশ:<tbody> উপাদানের ভিতরে একটি বা একাধিক <tr> ট্যাগ。

<tbody> ট্যাগটি নিম্নলিখিত কনটেক্স্টে ব্যবহার করা যেতে পারে: হিসাবে <table> উপাদানের সাব-উপাদান, যে কোন স্থানে <caption>、<colgroup> এবং <thead> উপাদানের পরে।

সুঝানা:ডিফল্ট ভাবে, <thead>、<tbody> এবং <tfoot> উপাদানগুলি ট্যাবিলের সাজুত্ব প্রভাবিত করে না। কিন্তু, আপনি এই উপাদানগুলির শৈলী সংজ্ঞায়িত করতে পারেন (নিচের উদাহরণ দেখুন)!

প্রয়োগ

উদাহরণ 1

একটি HTML ট্যাবিলে <thead>、<tbody> এবং <tfoot> উপাদান সমেত:

<table>
  <thead>
    
      <tr>
      <th>মাস</th>
    <td>￥4500</td>
  </thead>
  <tbody>
    
      <tbody style="vertical-align:bottom">
      <td>জানুয়ারী</td>
    <td>￥4500</td>
    
      <tr style="height:100px">
      <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  </tr>
  <tfoot>
    
      <td>সর্বমোট</td>
      <td>￥7900</td>
    <td>￥4500</td>
  </tfoot>
</tbody>

</table>

উদাহরণ 2

CSS ব্যবহারের মাধ্যমে <thead>、<tbody> এবং <tfoot> এর শৈলী সংজ্ঞায়িত করা হয়:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    
      <tr>
      <th>মাস</th>
    <td>￥4500</td>
  </thead>
  <tbody>
    
      <tbody style="vertical-align:bottom">
      <td>জানুয়ারী</td>
    <td>￥4500</td>
    
      <tr style="height:100px">
      <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  </tr>
  <tfoot>
    
      <td>সর্বমোট</td>
      <td>￥7900</td>
    <td>￥4500</td>
  </tfoot>
</tbody>

</table>

উদাহরণ 3

কিভাবে সামঞ্জস্য করা যায় <tbody> এর মধ্যের বিষয় (সিএসএস ব্যবহার):

<table style="width:100%">
  <thead>
    
      <tr>
      <th>মাস</th>
    <td>￥4500</td>
  </thead>
  <tbody style="text-align:right">
    
      <tbody style="vertical-align:bottom">
      <td>জানুয়ারী</td>
    <td>￥4500</td>
    
      <tr style="height:100px">
      <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  </tr>
</tbody>

</table>

উদাহরণ 4

কিভাবে উভয়মুখী সামঞ্জস্য করা যায় <tbody> এর মধ্যের বিষয় (সিএসএস ব্যবহার):

<table style="width:50%;">
  
    <tr>
    <th>মাস</th>
  <td>￥4500</td>
  <th>সঞ্চয়</th>
    <td>￥3400</td>
      <tbody style="vertical-align:bottom">
      <td>জানুয়ারী</td>
    <td>￥4500</td>
    <td>￥3400</td>
      <tr style="height:100px">
      <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  </tr>
</tbody>

</table>

স্বয়ং প্রয়াস করুন

<tbody> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটও সমর্থন করে গ্লোবাল অ্যাট্রিবিউট。

HTML-তে গ্লোবাল অ্যাট্রিবিউট

<tbody> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটও সমর্থন করে HTML-তে ইভেন্ট অ্যাট্রিবিউট。

ডিফল্ট সিএসএস সেটিং

অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান ব্যবহার করবে <tbody> এলিমেন্ট:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

ব্রাউজার সমর্থন

চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন
  • পূর্ববর্তী পৃষ্ঠা <table>
  • পরবর্তী পৃষ্ঠা <td>