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;
}