W3.CSS ဇယားများ
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
| ဗိုလ် | Nilsson | ၅၀ |
| မိုက် | ရော့စ် | ၃၅ |
W3.CSS ဇယားအတန်းများ
W3.CSS သည် ဇယားများအတွက် အောက်ပါ အတန်းများကို ပံ့ပိုးပေးသည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3-စားပွဲ | HTML ဇယားတစ်ခုအတွက် ကွန်တိန်နာ |
| w3 အစင်း | အစင်း စားပွဲ |
| w3-နယ်စပ် | နယ်နိမိတ် ဇယား |
| w3-နယ်စပ် | နယ်နိမိတ်မျဉ်းများ |
| w3 ကို ဗဟိုပြုသည်။ | ဇယားအကြောင်းအရာကို ဗဟိုပြုသည်။ |
| w3-hoverable | ပျံဝဲနိုင်သော စားပွဲ |
| w3-စားပွဲ-အားလုံး | ပိုင်ဆိုင်မှုအားလုံးကို သတ်မှတ်ထားသည်။ |
အခြေခံဇယား
w3-table class ကို အခြေခံဇယားကိုပြသရန် အသုံးပြုသည်-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
အစင်းကြောင်းဇယား
ဇယားတစ်ခုသို့ မြင်းကျားအစင်းများထည့်ရန် w3- အ စင်း အတန်းကို အသုံးပြုသည်-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table w3-striped">
နယ်နိမိတ်ဇယား
w3-bordered class သည် ဇယားအတန်းတစ်ခုစီသို့ အောက်ခြေဘောင်တစ်ခုကို ပေါင်းထည့်သည်-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table w3-bordered">
အစင်းကြောင်း ဘောင်ခတ်ထားသော ဇယား
အစင်းကြောင်းဘောင်ခတ် ထားသောဇယားကိုဖန်တီးရန် w3- အစင်း အတန်းနှင့် w3-ဘောင်ပတ်ထားသောအတန်း ကို ပေါင်းစပ် ပါ-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table w3-striped w3-bordered">
စားပွဲဝိုင်းတစ်ဝိုက်
w3-border class ကို ဇယားတစ်ခုပတ်ပတ်လည် တွင် ဘောင် တစ်ခုပြသရန် အသုံးပြုသည်-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table w3-striped w3-border">
အကြံပြုချက်- w3 -border အတန်းသည် ဇယားများအတွက်သာ မဟုတ်ပါ။ မည်သည့် HTML အစိတ်အပိုင်းတွင်မဆို အသုံးပြုနိုင်သည်။
အားလုံးကိုပြသခြင်း။
w3-table-all class သည် အထက်ဖော်ပြပါ အတန်းအားလုံးကို ပေါင်းစပ်ထားသည် -
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all">
အစင်းကြောင်းများလှန်ခြင်း။
အစင်းကြောင်းများကိုလှန်ရန် (မီးခိုးရောင်ဖျော့ဖျော့အရောင်ဖြင့်စတင်) ဇယားခေါင်းစီးအတန်းတစ်ဝိုက်တွင် <thead> အစိတ်အပိုင်းတစ်ခုကို ထည့်ပါ။ ဇယားခေါင်းစီးအတန်းအတွက် အသုံးပြုမည့်အရောင်ကိုလည်း သတ်မှတ်ရပါမည်။
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
| ဗိုလ် | Nilson | ၃၅ |
ဥပမာ
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
အကြောင်းအရာအားလုံးကို ဗဟိုပြုခြင်း။
w3 ကို ဗဟိုပြုသော အတန်း သည် ဇယား၏ အကြောင်းအရာကို ဗဟိုပြုသည်-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-centered">
ကော်လံတစ်ခုကို ဗဟိုပြုသည်။
w3-center အတန်း သည် ကော်လံတစ်ခု၏ အကြောင်းအရာကို ဗဟိုပြုသည်-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
ကော်လံတစ်ခုကို ညာဘက်ညှိပါ။
w3-right-align အတန်းသည် ကော်လံတစ်ခု၏ အကြောင်းအရာကို ညှိ ပေးသည် -
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Hoverable Table
w3-hoverable class သည် mouse-over တွင် မီးခိုးရောင်နောက်ခံအရောင်ကို ပေါင်းထည့်သည်-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all
w3-hoverable">
အရောင်များကို ရွှေ့ပါ။
သတ်မှတ်ထားသော မောက်စ်အရောင်ကို လိုချင်ပါက၊ <tr> ဒြပ်စင်တစ်ခုစီ တွင် w3-hover- အရောင် အတန်းများကို ထည့်ပါ။
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<tr class="w3-hover-green">
W3.CSS အတန်းများကို ပေါင်းစပ်ခြင်း။
W3.CSS အတန်းများစွာကို HTML အစိတ်အပိုင်းအားလုံးတွင် အသုံးပြုနိုင်သည်။
ဥပမာ- နယ်စပ်အတန်းများ၊ အရောင်အတန်းများ၊ ဖောင့်အတန်းများ၊ ကတ်အတန်းများနှင့် အခြားအရာများ။
ရောင်စုံဇယား ခေါင်းစီး
ရောင်စုံအတန်းကိုပြသရန် w3- အရောင် အတန်းများကို သုံးပါ ။
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
ရောင်စုံစားပွဲ
ရောင်စုံဇယားကိုပြသရန် w3- အရောင် အတန်းများကို သုံးပါ ။
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table w3-blue">
တုံ့ပြန်မှုဇယား
w3-responsive အတန်းသည် တုံ့ပြန်မှုဇယားတစ်ခုကို ဖန်တီးသည် ။ ထို့နောက် စားပွဲသည် သေးငယ်သော စခရင်များပေါ်တွင် အလျားလိုက် လှိမ့်သွားမည်ဖြစ်သည်။ ကြီးမားသော ဖန်သားပြင်များကို ကြည့်သောအခါတွင် ကွာခြားမှု မရှိပါ။
အောက်ပါဇယားအပေါ်အကျိုးသက်ရောက်မှုကိုကြည့်ရှုရန်စခရင်ကိုအရွယ်အစားပြောင်းပါ။
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ | အမှတ်များ |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ | ၅၀၀၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ | ၉၄၀၀ |
| အာဒံ | ဂျွန်ဆင် | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ | ၆၇၀၀ |
ဥပမာ
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
ကတ်တစ်ခုအနေဖြင့်ဇယား
ဇယားတစ်ခုကို ကတ်တစ်ခုအဖြစ်ပြသရန် w3-card အတန်း ကိုသုံး ပါ-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-card-4">
စားပွဲသေးသေးလေး
သေးငယ်သောဇယားကိုပြသရန် w3-သေးငယ်သော အတန်း ကိုသုံး ပါ-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-tiny">
စားပွဲငယ်
ဇယားအသေးတစ်ခုကိုပြသရန် w3-small class ကိုသုံး ပါ-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-small">
စားပွဲကြီး
စားပွဲကြီး တစ်ခုပြသရန် w3-large class ကိုသုံး ပါ-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-large">
XLarge ဇယား
xlarge ဇယားကိုပြသရန် w3-xlarge အတန်း ကိုသုံး ပါ။
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-xlarge">
XXLကြီး စားပွဲ
xxlarge ဇယားကိုပြသရန် w3-xxlarge အတန်း ကိုသုံး ပါ-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-xxlarge">
XXX စားပွဲကြီး
xxxlarge ဇယားကိုပြသရန် w3-xxxlarge အတန်း ကိုသုံး ပါ-
| နာမည် | မျိုးနွယ်အမည် | အမှတ်များ |
|---|---|---|
| ဂျေးလ် | စမစ် | ၅၀ |
| ဧဝ | လုပ်ပြတယ်။ | ၉၄ |
| အာဒံ | ဂျွန်ဆင် | ၆၇ |
ဥပမာ
<table class="w3-table-all w3-xxxlarge">
Jumbo စားပွဲ
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">