HTML အကိုးအကား

အက္ခရာဖြင့် HTML HTML အမျိုးအစားအလိုက် HTML Browser ပံ့ပိုးမှု HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML အက္ခရာအစုံများ HTML Doctypes HTML URL ကုဒ် HTML ဘာသာစကားကုဒ်များ HTML နိုင်ငံကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ


HTML <tbody> Tag


ဥပမာ

<thead>၊ <tbody> နှင့် <tfoot> ဒြပ်စင်ပါရှိသော HTML ဇယား-

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။


အဓိပ္ပါယ်နှင့် အသုံးပြုမှု

tag ကို <tbody>HTML ဇယားတစ်ခုတွင် ကိုယ်ထည်အကြောင်းအရာကို အုပ်စုဖွဲ့ရန် အသုံးပြုသည်။

ဒြပ်စင်အား ဇယားတစ်ခုစီ ၏ အစိတ်အပိုင်းတစ်ခုစီ (ကိုယ်ထည်၊ ခေါင်းစီး၊ အောက်ခြေမှတ်တိုင်) ကို သတ်မှတ်ရန် < thead> နှင့် <tfoot><tbody> ဒြပ်စင်များ နှင့် တွဲဖက်အသုံးပြုသည် ။

ဘရောက်ဆာများသည် ခေါင်းစီးနှင့် အောက်ခြေမှတ်စုတို့ သီးခြားကင်းသော ဇယားကိုယ်ထည်၏ လှိမ့်ခြင်းကို ဖွင့်ရန်အတွက် ဤဒြပ်စင်များကို အသုံးပြုနိုင်သည်။ ထို့အပြင်၊ စာမျက်နှာများစွာကို ဖြန့်ကျက်ထားသော ဇယားကြီးတစ်ခုကို ရိုက်နှိပ်သည့်အခါ၊ ဤအရာများသည် စာမျက်နှာတစ်ခုစီ၏ ထိပ်နှင့်အောက်ခြေတွင် ဇယားခေါင်းနှင့်အောက်ခြေကို ပုံနှိပ်နိုင်မည်ဖြစ်သည်။

မှတ်ချက်-<tbody> ဒြပ်စင်တွင် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော < tr> တဂ်များ ရှိရပါမည်။

တဂ်ကို အောက်ပါ အကြောင်းအရာများတွင် အသုံးပြုရပါမည်- <table> ဒြပ်စင်တစ်ခု၏ <tbody>ကလေးအနေဖြင့် ၊ <caption><colgroup> နှင့် <thead> ဒြပ်စင်တစ်ခုခုပြီးနောက်။

အကြံပြုချက်- <thead> <tbody>၊ နှင့် <tfoot> ဒြပ်စင်များသည် ပုံမှန်အားဖြင့် ဇယား၏ အပြင်အဆင်အပေါ် သက်ရောက်မှုရှိမည်မဟုတ်ပါ။ သို့သော်၊ သင်သည် ဤဒြပ်စင်များကို ပုံစံဆင်ရန် CSS ကိုသုံးနိုင်သည် (အောက်ပါဥပမာကိုကြည့်ပါ)။


Browser ပံ့ပိုးမှု

Element
<tbody> Yes Yes Yes Yes Yes

ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ

<tbody>tag သည် HTML တွင် Global Attributes ကို ပံ့ပိုး ပေးပါသည်။


ဖြစ်ရပ်ဂုဏ်တော်များ

<tbody>tag သည် HTML ရှိ Event Attributes ကိုလည်း ပံ့ပိုး ပေးပါသည်



နောက်ထပ် ဥပမာများ

ဥပမာ

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>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

ဥပမာ

<tbody> အတွင်းရှိ အကြောင်းအရာကို ချိန်ညှိနည်း (CSS ဖြင့်)

<table style="width:100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

ဥပမာ

<tbody> အတွင်းရှိ အကြောင်းအရာကို ဒေါင်လိုက်ညှိနည်း (CSS ဖြင့်)

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr style="height:100px">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

မူရင်း CSS ဆက်တင်များ

ဘရောက်ဆာအများစုသည် <tbody>အောက်ဖော်ပြပါ ပုံသေတန်ဖိုးများဖြင့် အစိတ်အပိုင်းကို ပြသလိမ့်မည်-

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