HTML <table> ကုတ်

  • အရှေ့ စာရင်း <svg>
  • နောက်ပိုင်း စာရင်း <tbody>

အသုံးချင့် နှင့် အဆိုပါသည်

<table> HTML အချက်အလက် ကို အမှတ်ပေးထားသည်။

一个 HTML 表格由一个 <table> 元素和一个或多个 <tr>、 和 元素组成：

HTML တိရစ္ဆာန်အုပ်စု ကို ပါဝင်သော အခြား အစိတ်အပိုင်းများမှာ အောက်ပါအတိုင်းဖြစ်သလား:

အခြား ကြည့်ရှုချက်

HTML ပါရမီHTML တွဲစည်

HTML DOM လက်တွေ့ရှိမှုTable အပျက်

CSS ပါရမီတိရစ္ဆာန်အုပ်စု အေျာင်းအောင် ပြုလုပ်ခြင်း

အကြောင်းကြား

အကြောင်းကြား 1

အကျယ်အဝန်း နှစ်လံ နှစ်ခု ပါဝင်သော အမောင်းသုံး HTML တိရစ္ဆာန်အုပ်စု:

<table>
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 2

တိရစ္ဆာန်အုပ်စု အတွင်း ပြိုကွဲခြင်းကို ပြုလုပ်ခြင်း (CSS) ကို ပြုလုပ်ခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
  <tr>
    <td>ဖေဖော်ဝါရီလ</td>
    <td>ဒေါ်လာ 4500</td>
  </tr>
</table>
</body>
</html>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 3

တိရစ္ဆာန်အုပ်စု ကို အဆိုင်းသတ်ခြင်း (CSS) ကို ပြုလုပ်ခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<table style="float:right">
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
  <tr>
    <td>ဖေဖော်ဝါရီလ</td>
    <td>ဒေါ်လာ 4500</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 4

တိရစ္ဆာန်အုပ်စု ကို အဆင်းသတ်ခြင်း (CSS) ကို ပြုလုပ်ခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
  <tr>
    <td>ဖေဖော်ဝါရီလ</td>
    <td>ဒေါ်လာ 4500</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 5

တိရစ္ဆာန်အုပ်စု အတွင်း အပြားအရောင် ပြုလုပ်ခြင်း (CSS) ကို ပြုလုပ်ခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<table style="background-color:#00FF00">
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
  <tr>
    <td>ဖေဖော်ဝါရီလ</td>
    <td>ဒေါ်လာ 4500</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 6

တိရစ္ဆာန်အုပ်စု အတွင်းသို့ အဆိုင်းအတန်း ပြုလုပ်ခြင်း (CSS) ကို ပြုလုပ်ခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
  <tr>
    <td>ဖေဖော်ဝါရီလ</td>
    <td>ဒေါ်လာ 4500</td>
  </tr>
</table>
</body>
</html>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 7

တိရစ္ဆာန်အုပ်စု အကျယ်အဝန်း ကို အသုံးပြုခြင်း (CSS) ကို ပြုလုပ်ခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<table style="width:400px">
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
  <tr>
    <td>ဖေဖော်ဝါရီလ</td>
    <td>ဒေါ်လာ 4500</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 8

တိရစ္ဆာန်အုပ်စု ခေါင်းစဉ် ဖန်တီးခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<table>
  <tr>
    <th>အမည်</th>
    <th>အီးမိုင်</th>
    <th>ဖုန်း</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 9

ခေါင်းစဉ်တစ်ခုခုပါဝင်သော တိရစ္ဆာန်အုပ်စု ကို ဖန်တီးခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<table>
  <caption>လပတ်လိုက် ကျေးဇူး</caption>
  <tr>
    <th>လပတ်</th>
    <th>ကျေးဇူး</th>
  </tr>
  <tr>
    <td>ဇွန်လ</td>
    <td>ဒေါ်လ� 3400</td>
  </tr>
  <tr>
    <td>ဖေဖော်ဝါရီလ</td>
    <td>ဒေါ်လာ 4500</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြောင်းကြား 10

နှင့်ပတ်သတ်သော တိုက်ထရိုက်တွေ့ရှိသော တိရစ္ဆာန်အုပ်စု အကျယ်အဝန်း ကို အသုံးပြုခြင်းသည်မှာမည်သို့ဖြစ်သလား:

<table>
  <tr>
    <th>အမည်</th>
    <th>အီးမိုင်</th>
    <th colspan="2">ဖုန်း</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

ကိုယ်တိုင် စမ်းသပ်ပါ

အကြီးအကျယ် ဗီဇ

<table> ကုတ် သည် HTML အကြီးအကျယ် ဗီဇ.

အခမ်းအနား ဗီဇ

<table> ကုတ် သည် HTML အခမ်းအနား ဗီဇ.

အရေးပါသော CSS အချက်အလက်

အသုံးပြုသည့် ဘတ်သျှား များစွာ အရေးပါသော အချက်အလက် အတိုင်း ပြင်ဆင်ထားသည် <table> အကွက်:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

ကိုယ်တိုင် စမ်းသပ်ပါ

ဘတ်သျှား ထောက်ပံ့

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့
  • အရှေ့ စာရင်း <svg>
  • နောက်ပိုင်း စာရင်း <tbody>