HTML <thead> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <th>
  • পরবর্তী পৃষ্ঠা <time>

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

<thead> ট্যাগটি একসঙ্গে এবং HTML ট্যাবিলের শীর্ষ বিষয়ক সামগ্রীকে গ্রুপ করতে ব্যবহৃত হয়。

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

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

নোট:<thead> উপাদান ভিতরে একটি বা একাধিক <td>￥3400</td> ট্যাগ。

<thead> ট্যাগটি নিম্নলিখিত কনটেক্স্টে ব্যবহার করা উচিত: হিসাবে <table> উপাদানের সাব-উপাদান, এবং কোনও <caption> এবং <colgroup> উপাদান পরে, এবং কোনও </thead>、<tfoot> এবং <td>￥3400</td> উপাদান আগে

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

একটি উদাহরণ

উদাহরণ 1

thead>、<tbody> এবং <tfoot> উপাদান ধারণকারী HTML ট্যাবিল:

<table>
  <thead>
    <td>￥3400</td>
      <tr style="height:100px">
      <th>মাস</th>
    <td>￥4500</td>
  <th>সংগ্রহ</th>
  </thead>
    <td>￥3400</td>
      <tbody>
      <td>জানুয়ারী</td>
    <td>￥4500</td>
    <td>￥3400</td>
      <tr>
      <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  </tr>
  <tfoot>
    <td>￥3400</td>
      <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>
    <td>￥3400</td>
      <tr style="height:100px">
      <th>মাস</th>
    <td>￥4500</td>
  <th>সংগ্রহ</th>
  </thead>
    <td>￥3400</td>
      <tbody>
      <td>জানুয়ারী</td>
    <td>￥4500</td>
    <td>￥3400</td>
      <tr>
      <td>ফেব্রুয়ারী</td>
    <td>￥4500</td>
  </tr>
  <tfoot>
    <td>￥3400</td>
      <td>সর্বমোট</td>
      <td>￥7900</td>
    <td>￥4500</td>
  </tfoot>
</tbody>

</table>

উদাহরণ 3

কিভাবে সামাল করা হয় <thead> এর মধ্যে কনটেন্ট (ক্রীড়াশাস্ত্র ব্যবহার করে):

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

</table>

উদাহরণ 4

কিভাবে উপরোক্ত সামাল করা হয় <thead> এর মধ্যে কনটেন্ট (ক্রীড়াশাস্ত্র ব্যবহার করে):

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

</table>

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

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

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

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

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

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

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

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

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