HTML <tfoot> 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 ကို <tfoot>HTML ဇယားတစ်ခုတွင် အောက်ခြေအကြောင်းအရာကို အုပ်စုဖွဲ့ရန် အသုံးပြုသည်။
ဇယားတစ်ခုစီ ၏ အစိတ်အပိုင်းတစ်ခုစီ (အောက်ခြေ၊ ခေါင်းစီး၊ ကိုယ်ထည်) ကို သတ်မှတ်ရန် ဒြပ်စင်အား <
thead> နှင့် <tbody><tfoot> ဒြပ်စင်များ နှင့် တွဲဖက်အသုံးပြုသည် ။
ဘရောက်ဆာများသည် ခေါင်းစီးနှင့် အောက်ခြေမှတ်စုတို့ သီးခြားကင်းသော ဇယားကိုယ်ထည်၏ လှိမ့်ခြင်းကို ဖွင့်ရန်အတွက် ဤဒြပ်စင်များကို အသုံးပြုနိုင်သည်။ ထို့အပြင်၊ စာမျက်နှာများစွာကို ဖြန့်ကျက်ထားသော ဇယားကြီးတစ်ခုကို ရိုက်နှိပ်သည့်အခါ၊ ဤအရာများသည် စာမျက်နှာတစ်ခုစီ၏ ထိပ်နှင့်အောက်ခြေတွင် ဇယားခေါင်းနှင့်အောက်ခြေကို ပုံနှိပ်နိုင်မည်ဖြစ်သည်။
မှတ်ချက်-<tfoot> ဒြပ်စင်တွင် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော
< tr> တဂ်များ ရှိရပါမည်။
တဂ်ကို အောက်ပါ အကြောင်းအရာများတွင် အသုံးပြုရပါမည်- <table> ဒြပ်စင်တစ်ခု၏
<tfoot>ကလေးအနေဖြင့်
၊ <caption> ၊ <colgroup> ၊
<thead> နှင့် <tbody> ဒြပ်စင်တစ်ခုခုပြီးနောက်။
အကြံပြုချက်- <thead>၊ <tbody> နှင့် <tfoot>ဒြပ်စင်များသည် ပုံမှန်အားဖြင့် ဇယား၏ အပြင်အဆင်ကို အကျိုးသက်ရောက်မည်မဟုတ်ပါ။ သို့သော်၊ သင်သည် ဤဒြပ်စင်များကို ပုံစံဆင်ရန် CSS ကိုသုံးနိုင်သည် (အောက်ပါဥပမာကိုကြည့်ပါ)။
Browser ပံ့ပိုးမှု
| Element | |||||
|---|---|---|---|---|---|
| <tfoot> | Yes | Yes | Yes | Yes | Yes |
ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ
<tfoot>tag သည် HTML တွင် Global Attributes ကို ပံ့ပိုး ပေးပါသည်။
ဖြစ်ရပ်ဂုဏ်တော်များ
<tfoot>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>
ဥပမာ
<tfoot> အတွင်းရှိ အကြောင်းအရာကို ချိန်ညှိနည်း (CSS ဖြင့်)
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="text-align:center">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
ဥပမာ
<tfoot> အတွင်းရှိ အကြောင်းအရာကို ဒေါင်လိုက်ချိန်ညှိနည်း (CSS ဖြင့်)
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="vertical-align:bottom">
<tr
style="height:100px">
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
မူရင်း CSS ဆက်တင်များ
ဘရောက်ဆာအများစုသည် <tfoot>အောက်ဖော်ပြပါ ပုံသေတန်ဖိုးများဖြင့် အစိတ်အပိုင်းကို ပြသလိမ့်မည်-
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}