caption-side ဂုဏ်သတ္တိ

caption-side ဂုဏ်သတ္တိသည် <caption> တဂ်ကို အသုံးပြု၍ ဖန်တီးထားသော ဇယား၏ ခေါင်းစဉ် တည်နေရာကို သတ်မှတ်ပေးသည်။ ယင်း ဂုဏ်သတ္တိတွင် တန်ဖိုးနှစ်မျိုး ရှိနိုင်ပါသည်။ ၎င်းတို့မှာ top (ဇယား၏ အပေါ်ဘက်၊ ပုံသေအားဖြင့်) နှင့် bottom (ဇယား၏ အောက်ဘက်) တို့ ဖြစ်သည်။

သဒ္ဒါဖွဲ့စည်းပုံ

cssselector {
  caption-side: top | bottom;
}

နမူနာ

ဇယားခေါင်းစဉ်ကို ဇယား၏ အပေါ်ဘက်တွင် ထားရှိကြပါစို့။

html<table border="1" width="300">
  <caption>ဇယား</caption>
  <tr>
    <th>ခေါင်းစဉ်</th>
    <th>ဖော်ပြချက်</th>
  </tr>
  <tr>
    <td>စာသား ၁</td>
    <td>စာသား ၂</td>
  </tr>
</table>
csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

နမူနာ

ယခုတော့ ခေါင်းစဉ်ကို ဇယား၏ အောက်ဘက်သို့ ရွှေ့ကြည့်ပါမည်။

html<table border="1" width="300">
  <caption>ဇယား</caption>
  <tr>
    <th>ခေါင်းစါ်</th>
    <th>ဖော်ပြချက်</th>
  </tr>
  <tr>
    <td>စာသား ၁</td>
    <td>စာသား ၂</td>
  </tr>
</table>
csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

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

  • bottom ဂုဏ်သတ္တိ၊
    အရာသည် အစိတ်အပိုင်း၏ အောက်ဆုံးအနားကို တည်နေရာသတ်မှတ်ပေးသည်
  • top ဂုဏ်သတ္တိ၊
    အရာသည် အစိတ်အပိုင်း၏ အပေါ်ဆုံးအနားကို တည်နေရာသတ်မှတ်ပေးသည်
  • left ဂုဏ်သတ္တိ၊
    အရာသည် အစိတ်အပိုင်း၏ ဘယ်ဘက်အနားကို တည်နေရာသတ်မှတ်ပေးသည်
  • right ဂုဏ်သတ္တိ၊
    အရာသည် အစိတ်အပိုင်း၏ ညာဘက်အနားကို တည်နေရာသတ်မှတ်ပေးသည်
  • ::backdrop ရှေ့ဆက်-အစိတ်အပိုင်း၊
    အရာသည် ပထမဆုံးအစိတ်အပိုင်းပြီးနောက် တည်နေရာကို သတ်မှတ်ပေးသည်