HTML ဇယားပုံစံရေးဆွဲခြင်း။
သင့်ဇယားများကို ပိုမိုကောင်းမွန်စေရန်အတွက် CSS ကိုသုံးပါ။
HTML ဇယား - မြင်းကျားအစင်းများ
အခြားဇယားအတန်းတိုင်းတွင် နောက်ခံအရောင်ထည့်ပါက၊ လှပသောမြင်းကျားအစင်းကြောင်းအကျိုးသက်ရောက်မှုကို ရရှိမည်ဖြစ်သည်။
၁ | ၂ | ၃ | ၄ |
၅ | ၆ | ၇ | ၈ |
၉ | ၁၀ | ၁၁ | ၁၂ |
၁၃ | ၁၄ | ၁၅ | ၁၆ |
၁၇ | ၁၈ | ၁၉ | ၂၀ |
အခြားဇယားအတန်းဒြပ်စင်တိုင်းကို ပုံစံ ဆင်ရန်၊ :nth-child(even)
ဤကဲ့သို့သော ရွေးချယ်ကိရိယာကို အသုံးပြုပါ-
ဥပမာ
tr:nth-child(even) {
background-color: #D6EEEE;
}
မှတ်ချက်-(odd)
၎င်း အစား သင်အသုံးပြု ပါက
(even)
၊ ပုံစံသည် အတန်း 1,3,5 စသည်တို့တွင် 2,4,6 စသည်တို့အစား စတိုင်လ်ဖြစ်ပေါ်လိမ့်မည်။
HTML ဇယား - ဒေါင်လိုက်မြင်းကျားအစင်းများ
ဒေါင်လိုက်မျဉ်းကျားအစင်းကြောင်းများပြုလုပ်ရန် အခြား အတန်း အစား ကော်လံတစ်ခု စီကို ပုံစံတူပြုလုပ်ပါ ။
၁ | ၂ | ၃ | ၄ |
၅ | ၆ | ၇ | ၈ |
၉ | ၁၀ | ၁၁ | ၁၂ |
၁၃ | ၁၄ | ၁၅ | ၁၆ |
၁၇ | ၁၈ | ၁၉ | ၂၀ |
:nth-child(even)
ဤကဲ့သို့သော ဇယားဒေတာဒြပ်စင်များအတွက် သတ်မှတ် ပါ-
ဥပမာ
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
မှတ်ချက်-
ခေါင်းစီးများနှင့် ပုံမှန်ဇယားဆဲလ်နှစ်ခုလုံးတွင် ပုံစံပုံစံကိုရလိုပါက :nth-child()
ရွေးချယ်ရေးကိရိယာ th
နှင့် အစိတ်အပိုင်းနှစ်ခုစလုံးပေါ်တွင် တင် ပါ။td
ဒေါင်လိုက်နှင့် အလျားလိုက် မြင်းကျားအစင်းများ ပေါင်းစပ်ပါ။
အထက်ဖော်ပြပါ နမူနာနှစ်ခုမှ ပုံစံကို ပေါင်းစပ်နိုင်ပြီး အခြားအတန်းတိုင်းနှင့် အခြားကော်လံတစ်ခုစီတွင် အစင်းကြောင်းများ ပါရှိမည်ဖြစ်သည်။
ပွင့်လင်းသောအရောင်ကို သင်အသုံးပြုပါက ထပ်နေသောအကျိုးသက်ရောက်မှုကို ရရှိမည်ဖြစ်သည်။
rgba()
အရောင်၏ ပွင့်လင်းမြင်သာမှုကို သတ်မှတ်ရန် အရောင် တစ်ခုကို အသုံးပြုပါ -
ဥပမာ
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Horizontal Dividers
နာမည် | မျိုးနွယ်အမည် | စုဆောင်းငွေ |
---|---|---|
ပီ | Griffin | $100 |
Lois | Griffin | $150 |
ဂျိုး | Swanson | $300 |
ဇယားအတန်းတစ်ခုစီ၏အောက်ခြေတွင်သာ ဘောင်များကို သတ်မှတ်ပါက၊ အလျားလိုက်ပိုင်းခြားထားသော ဇယားတစ်ခုရှိသည်။
အလျားလိုက်ပိုင်းခြားချက်များကို ရယူရန် border-bottom
ပိုင်ဆိုင်မှုအားလုံးကို
အစိတ်အပိုင်းများ ထဲသို့ ထည့်ပါ -tr
ဥပမာ
tr {
border-bottom: 1px solid #ddd;
}
Hoverable Table
မောက်စ်ပေါ်ရှိ ဇယားတန်းများကို မီးမောင်းထိုးပြရန် :hover
ပေါ်ရှိရွေးချယ်ရေး
ကိရိယာကို အသုံးပြု ပါ-tr
နာမည် | မျိုးနွယ်အမည် | စုဆောင်းငွေ |
---|---|---|
ပီ | Griffin | $100 |
Lois | Griffin | $150 |
ဂျိုး | Swanson | $300 |
ဥပမာ
tr:hover {background-color: #D6EEEE;}