tfoot တဂ်

tfoot တဂ်သည် ဇယား၏ အောက်ခြေအပိုင်းကို သတ်မှတ်ပေးသည်။ CSS စတိုင်များကို ချက်ချင်းအသုံးပြုနိုင်ရန် အတန်းအချို့ကို အုပ်စုဖွဲ့ရန်အတွက် အသုံးပြုပါသည်။ ဇယားတစ်ခုတွင် tfoot တဂ် တစ်ခုသာ ရှိနိုင်ပါသည်။

tfoot တဂ်ကို မကြာခဏ thead နှင့် tbody တို့နှင့် အတူအသုံးပြု၍ HTML ဇယား၏ အပေါ်ပိုင်း၊ အဓိက အပိုင်းနှင့် အောက်ခြေအပိုင်းများကို သတ်မှတ်ပေးပါသည်။ စံသတ်မှတ်ချက်အရ ဘရောက်ဇာသည် tfoot ၏ အကြောင်းအရာကို ဇယား၏ အောက်ခြေတွင် ထား၍ thead ကို အပေါ်ဆုံးတွင် ထားပါလိမ့်မည်။

ဥပမာ

tfoot တဂ်ဖြင့် အုပ်စုဖွဲ့ထားသော အတန်းများအတွက် color ဂုဏ်သတ္တိကို အသုံးပြု၍ စာသားအရောင် အနီရောင်ကို သတ်မှတ်ကြပါစို့။

html<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surn</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>count: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

ဥပမာ

ဤနေရာတွင်၊ thead သည် အပေါ်ဆုံးတွင် မရှိပဲ tfoot သည် အောက်ခြေတွင် မရှိသော်လည်း ဘရောက်ဇာက ၎င်းတို့ကို ၎င်း၏ နေရာများတွင် သတ်မှတ်ပေးပုံကို ကြည့်ကြပါစို့။

html<table>
  <tfoot>
    <tr>
      <td>count: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surn</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

ဆက်လက်လေ့လာရန်